CODEWITHSUNDEEP
javascripthtml-tabletextbox
Kanishka Gupta
Kanishka Gupta

Reputation: 217

How to read value of Textbox which is inside table

I need to read the value of textbox which is inside the table.

Following is how I create table.

var theader = '<table border = "1" id = "MarksTable">\n';
var tbody = '';

for ( var i = 0; i < total_rows; i++) {
    tbody += '<tr>';
    for ( var j = 0; j < total_col; j++) {
        tbody += '<td name=' + "cell" + i + j + '>';
        if (i > 0) {
            tbody += '<input type="text" value = "marks" name="inputcell1'+j + '">';
        } else {
            tbody += '<b>' + subjectList[j] + '</b>';
        }
        tbody += '</td>';
    }
    tbody += '</tr>\n';
}
var tfooter = '</table>';
document.getElementById('wrapper').innerHTML =  theader
        + tbody + tfooter ;

and below is my attempt to read text box value:

function readTableData(){
    var marks = [];
    var table = document.getElementById("MarksTable");
    var column_count = table.rows[1].cells.length;
    var row = table.rows[1];
    if(column_count>0){
        for(var index = 0; index < column_count;index++){
            marks[index] = row.cells[index].innerHTML;
        }
    }
    return marks;
}

Here, row.cells[index].innerHTML gives the output '<input type="text" value = "marks" name="inputcell10">.

Upvotes: 0

Views: 16282

Answers (2)

Nandkishor Gokhe
Nandkishor Gokhe

Reputation: 552

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<div id="tableContainer">

</div>
<br>

<button onclick="myFunction()">Try it</button>
<button onclick="readTableData()"> Read it </button>
<script>
function myFunction() {
    var tab = '<table id="MarksTable">';
    var counter = 0;
    for(i = 0; i< 4; i++){
        tab = tab + '<tr><td rowspan = "4"> Dept1 </td><td> <input type="text" id="inputcell'+counter+'"  value="'+i+'"/> </td></tr>';
        counter++;
        tab = tab+'<tr><td> <input type="text" id="inputcell'+counter+'"  value="'+i+'"/> </td></tr>';
        counter++;
        tab = tab+'<tr><td> <input type="text" id="inputcell'+counter+'"  value="'+i+'"/> </td></tr>';
        counter++;
        tab = tab+'<tr><td> <input type="text" id="inputcell'+counter+'"  value="'+i+'"/> </td></tr>';
        counter++;
    }
    tab = tab + '</table>';
    document.getElementById("tableContainer").innerHTML = tab;
}

function readTableData(){
    var val;
    var table = document.getElementById("MarksTable");
    var column_count = table.rows[1].cells.length;
    var rowcount = table.rows.length;
    alert(rowcount);
    if(column_count>0){
        for(var index = 0; index < rowcount;index++){
            var row = table.rows[index];
            val = document.getElementById("inputcell"+index);
            alert(val.value);

            //marks = row.cells[0].getElementsByName('inputcell').value;
    //Or marks[index] = document.getElementsByName('inputcell' + index)[0].value;
        }
    }
   alert(val);
}
</script>

</body>
</html>

Upvotes: 0

Khanh TO
Khanh TO

Reputation: 48972

Try this:

function readTableData(){
    var marks = [];
    var table = document.getElementById("MarksTable");
    var column_count = table.rows[1].cells.length;
    var row = table.rows[1];
    if(column_count>0){
        for(var index = 0; index < column_count;index++){
            marks[index] = row.cells[index].getElementsByName('inputcell' + index)[0].value;
    //Or marks[index] = document.getElementsByName('inputcell' + index)[0].value;
        }
    }
    return marks;
}

Upvotes: 2

Related Questions