Click here to Skip to main content
14,209,923 members
Rate this:
Please Sign up or sign in to vote.
See more:
i am having three three textbox of 'Emp. Name', 'Designation', 'Age' whose values i am binding to HTML table using javascript which is working fine.

Now i want to pass the data of HTML table(which is binded through javascript) to controller on button click to save in database.

What I have tried:

@{
    Layout = null;
}

<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
    // ARRAY FOR HEADER.
    var arrHead = new Array();
    arrHead = ['', 'Emp. Name', 'Designation', 'Age'];      // SIMPLY ADD OR REMOVE VALUES IN THE ARRAY FOR TABLE HEADERS.

   
    // ADD A NEW ROW TO THE TABLE.s
    function addRow() {
        var empTab = document.getElementById('empTable');

        var rowCnt = empTab.rows.length;
        var tr = empTab.insertRow(rowCnt);      // TABLE ROW.
        tr = empTab.insertRow(rowCnt);

        for (var c = 0; c < arrHead.length; c++) {
            var td = document.createElement('td');          // TABLE DEFINITION.
            td = tr.insertCell(c);

            if (c == 0) {           // FIRST COLUMN.
                // ADD A BUTTON.
                var button = document.createElement('input');

                // SET INPUT ATTRIBUTE.
                button.setAttribute('type', 'button');
                button.setAttribute('value', 'Remove');

                // ADD THE BUTTON's 'onclick' EVENT.
                button.setAttribute('onclick', 'removeRow(this)');

                td.appendChild(button);
            }
            else {
                if (c == 1) {
                    var values = document.getElementById("empname").value;
                }
                if (c == 2) {
                    var values = document.getElementById("empdesignation").value
                }
                if (c == 3) {
                    var values = document.getElementById("empage").value
                }
                //alert(values);
                // CREATE AND ADD TEXTBOX IN EACH CELL.
                var ele = document.createElement('LABEL');
                ele.setAttribute('type', 'text');
                //  ele.setAttribute('text', '1');
                ele.innerHTML = values;
                td.appendChild(ele);
            }
        }
    }

    // DELETE TABLE ROW.
    function removeRow(oButton) {
        var empTab = document.getElementById('empTable');
        empTab.deleteRow(oButton.parentNode.parentNode.rowIndex);       // BUTTON -> TD -> TR.
    }

   
</script>

<html>
<head>
    <title>Dynamically Add Remove Table Rows in JavaScript</title>

    <style>
        table 
        {
            width: 70%;
            font: 17px Calibri;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
    </style>
</head>
<body >
    <input type=text id="empname"  />
    <input type=text id="empdesignation"   />
    <input type=text id="empage" />
    <p>
        <input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
    </p>

    <table id="empTable" class="table table-bordered table-hover table-striped">
    <thead>
    <tr>
    <th></th>
    <th>Emp. Name</th>
    <th>Designation</th>
    <th>Age</th>
    </tr>
    <tbody>
      <tr>
      </tr>
      </tbody>
    </table>
    <div id="cont"></div>

    <p><input type="button" id="bt" value="Sumbit Data" onclick="sumbit()" /></p>
</body>


</html>
Posted
Updated 11-Jun-19 21:57pm

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

As you create your label elements also create an "input" element with "type=hidden" and a "name" of "empname[0]" where you increment the number in the brackets for each row, and add your data to the "value" attribute as well as adding it to your label. So you should have fields like;

<input type="hidden" name="empname[0]" value="Joe"/>
<input type="hidden" name="empname[1]" value="Pete"/>
<input type="hidden" name="empname[2]" value="Dave"/>


Do that for each column you have (changing the name of course). Make sure the table is in a form element and then submit that form via ajax to your controller action (google "submit form jquery ajax" for sample code). Make sure your action has parameters like;

public ActionResult SubimitData (string[] empname, string[] empdesignation, ...)


Update:

Your script is setting the "name" attribute of the label, but labels are not submitted in a form, you have to create an INPUT of type HIDDEN to hold the data as I said above. You are also using "c" as the index for the name, which is the column index so you'll end up with names like

Row 1 - empname[0]
Row 2 - empname[0]
Row 3 - empname[0]
Row 1 - empdesignation[1]
Row 2 - empdesignation[1]
Row 3 - empdesignation[1]
Row 1 - empage[2]
Row 2 - empage[2]
Row 3 - empage[2]

What you need are names like

Row 1 - empname[0]
Row 2 - empname[1]
Row 3 - empname[2]
Row 1 - empdesignation[0]
Row 2 - empdesignation[1]
Row 3 - empdesignation[2]
Row 1 - empage[0]
Row 2 - empage[1]
Row 3 - empage[2]

Define a new variable to hold the current row

var arrHead = new Array();
arrHead = ['', 'Emp. Name', 'Designation', 'Age'];
var rowIndex = 0;


When you create the LABEL, create the INPUT too

var ele = document.createElement('LABEL');
ele.setAttribute('type', 'text');
var txt = document.createElement('input');
txt.setAttribute('type', 'hidden');


Set the name of the textbox when you update the label (this needs done in each of your "if (c == x)" blocks, changing the name as appropriate)

if (c == 1) {
    var values = document.getElementById("empname").value;
    txt.setAttribute('name', 'empname['+ rowIndex +']');
}


Assign the textbox a value and add it to the DOM when you do the label

ele.innerHTML = values;
txt.value = values;
td.appendChild(ele);
td.appendChild(txt);


Finally increment the rowIndex just as you leave the addRow function

    rowIndex++;
}


Your remove function will need to decrease the value of rowIndex too.
   
v2
Comments
manish-gusain8909 12-Jun-19 6:22am
   
data of text elements is binding to table on button(id="addRow")click through javascipt function. but now i want pass table values(which i added through javascript) to controller.
F-ES Sitecore 5 days ago
   
I told you what you need to do, I'm not going to do the work for you too :) You understand how to create labels, so create input elements too.
manish-gusain8909 5 days ago
   
function addRow() {
var empTab = document.getElementById('empTable');

var rowCnt = empTab.rows.length;
var tr = empTab.insertRow(rowCnt); // TABLE ROW.
tr = empTab.insertRow(rowCnt);

for (var c = 0; c < arrHead.length; c++) {
var td = document.createElement('td'); // TABLE DEFINITION.
td = tr.insertCell(c);

if (c == 0) { // FIRST COLUMN.
// ADD A BUTTON.
var button = document.createElement('input');

// SET INPUT ATTRIBUTE.
button.setAttribute('type', 'button');
button.setAttribute('value', 'Remove');

// ADD THE BUTTON's 'onclick' EVENT.
button.setAttribute('onclick', 'removeRow(this)');

td.appendChild(button);
}
else {
var ele = document.createElement('LABEL');
ele.setAttribute('type', 'text');
if (c == 1) {
var values = document.getElementById("empname").value;
ele.setAttribute('name', 'empname['+c+']');
}
if (c == 2) {
var values = document.getElementById("empdesignation").value
ele.setAttribute('name', 'empdesignation[' + c + ']');
}
if (c == 3) {
var values = document.getElementById("empage").value
ele.setAttribute('name', 'empage[' + c + ']');
}
//alert(values);
// CREATE AND ADD TEXTBOX IN EACH CELL.


// ele.setAttribute('text', '1');
ele.innerHTML = values;
td.appendChild(ele);
}
}
}
i tried it, but did'nt work.
F-ES Sitecore 5 days ago
   
It didn't work because you didn't implement what I suggested, you added a name to the label rather than creating a new textbox, and you are using incorrect indexes of the names too. I have updated my solution.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Cookies | Terms of Service
Web06 | 2.8.190617.3 | Last Updated 13 Jun 2019
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100