javascript - 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">.

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">.

Share Improve this question edited Jul 30, 2017 at 9:54 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jun 29, 2013 at 10:16 Kanishka Gupta 2172 gold badges7 silver badges18 bronze badges

have you tried value instead of innerHTML? – luk2302 Commented Jun 29, 2013 at 10:21
If you have given 'name' attribute to the textbox, you can directly use document.getElementsByName('tboxname').value to get the value. – Shashwat Kumar Commented Jun 29, 2013 at 10:23
@luk2302 yes i tried value also but it was giving undefined as a result – Kanishka Gupta Commented Jun 29, 2013 at 12:41
@ShashwatKumar That is last option for me, and right now i am working with this option only, but i want to use a better way. – Kanishka Gupta Commented Jun 29, 2013 at 12:42

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

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;
}

<!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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to read value of Textbox which is inside table - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)