Question

我有表和javascript代码，应该更改表中每个输入的值。如何访问内部单元格？

这是我的HTML代码：

<table border="1" id="myTable">
  <tr>
     <th><input type="text" size="2"></th>
     <th><input type="text" size="2"></th>
     <th><input type="text" size="2"></th>
     <th><input type="text" size="2"></th>
     <th><input type="text" size="2"></th>
     <th><input type="text" size="2"></th>
  </tr>
</table>

这是我的javascript代码：

function showSuccess(msg) {
    Messenger({
        extraClasses: 'messenger-fixed messenger-on-right messenger-on-top',
        theme: 'flat'
    }).post(msg);
}

function pushArray(){

    var oTable = document.getElementById('myTable');

    //gets rows of table
    var rowLength = oTable.rows.length;

    //loops through rows
    for (i = 0; i < rowLength; i++) {
        //gets cells of current row
        var oCells = oTable.rows[i].cells;

        //gets amount of cells of current row
        var cellLength = oCells.length;

       //loops through each cell in current row
       for(var j = 0; j < cellLength; j++){

            // here i should change the value of input
            oCells[j].innerHTML="NEW CONTENT";
        }
    }
}

Answer 1

您应该尝试在标题标记

中找到已添加的文本框

oCells[j].getElementsByTagName("input")[0].value = "your value";

在这里工作小提琴 https://jsfiddle.net/bsmdr2hq/2/

Answer 2

此代码有效，请确保包含javascript文件并设置正文的onload属性。

<html>
    <head>
        <script src="test.js"></script>
    </head>
    <body onload="pushArray()">
        <table border="1" id="myTable">
          <tr>
             <th><input type="text" size="2"></th>
             <th><input type="text" size="2"></th>
             <th><input type="text" size="2"></th>
             <th><input type="text" size="2"></th>
             <th><input type="text" size="2"></th>
             <th><input type="text" size="2"></th>
          </tr>
        </table>
    </body>
</html>

如何在javascript中更改表格单元格中的输入

2 个答案: