簡體   English   中英

如何讀取表格內的Textbox的值

[英]How to read value of Textbox which is inside 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 ;

以下是我嘗試閱讀文本框值:

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

這里, row.cells[index].innerHTML給出輸出'<input type="text" value = "marks" name="inputcell10">

嘗試這個:

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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM