使用 Javascript 從 HTML 表格輸入單元格中獲取值

Question

我用 Javascript 動態創建了一個 HTML 表，其中第一列由文本字段組成，第二列由輸入字段組成，第三列由文本字段組成，工作正常：

nrOfRows = document.getElementById("myId").value; //get nrOfRows from input
var i;
var row;
var cell1;
var cell2;
var cell3;

for (i = 0; i < nrOfRows; i++) {

    row = table.insertRow(i); //table is defined earlier
    cell1 = row.insertCell(0);
    cell2 = row.insertCell(1);
    cell3 = row.insertCell(2);
    cell1.innerHTML = "some text"; //Put "some text" in all column1 fields
    cell2.innerHTML = '<input type="text" class="form-control" size="5" maxlength="4" />'; //Make all fields in column2 input fields.

}

在此之后，我在輸入字段（第 2 列）中鍵入一些內容並嘗試將此輸入放入第 3 列，方法如下：

for (var r = 0; r < nrOfRows; r++) {    
        table.rows[r].cells[2].innerHTML = table.rows[r].cells[1].innerHTML;
    }

這不起作用。 它不是將輸入字段中的值放在第三列中，而是將第三列中的文本字段替換為新的輸入字段，就像使用 HTML 代碼而不是值一樣。

這有效（將 column1 中的值放入 column3）：

  for (var r = 0; r < nrOfRows; r++) {  
        table.rows[r].cells[2].innerHTML = table.rows[r].cells[0].innerHTML;
    }

關於如何從輸入字段而不是 HTML 代碼中獲取值的任何線索？

這就是我得到的。 我希望中間列的數字進入右列，但它用新的輸入字段替換所有內容：

Answer 1

您直接訪問cells[1]並獲取其innerHTML，而cells[1]有一個子項，您需要訪問它的value而不是像children[0].value那樣的innerHTML 。

在此處檢查訪問DOM 元素對象

此外，您可以使用querySelector 。

 var table; window.onload = function() { table = document.getElementById("test"); nrOfRows = 3;//document.getElementById("myId").value; //get nrOfRows from input var i; var row; var cell1; var cell2; var cell3; for (i = 0; i < nrOfRows; i++) { row = table.insertRow(i); //table is defined earlier cell1 = row.insertCell(0); cell2 = row.insertCell(1); cell3 = row.insertCell(2); cell1.innerHTML = "some text"; //Put "some text" in all column1 fields cell2.innerHTML = '<input type="text" class="form-control" size="5" maxlength="4" />'; //Make all fields in column2 input fields. } } function GetValue() { for (var r = 0; r < nrOfRows; r++) { table.rows[r].cells[2].innerHTML = table.rows[r].cells[1].children[0].value; } }

 <table id="test" border="1"> </table> <input type="button" value="Get Value" onclick="GetValue()" />