Javascript setAttribute不适用于表元素

Question

如何仅使用JavaScript设置这些元素的名称属性？

我尝试在每行的每个单元格中找到元素的name属性。但它会抛出这样的错误：

  

setAttribute不是函数。

HTML

 <form action="timesheet_process" > 
<input type="hidden" id="taskcount" value="5">
        <table id="matrix">
            <tr>
                <th>Task Type</th>
                <th>Reference ID</th>
                <th>Description</th>
                <th>Efforts</th>
                <th></th>
            </tr>
            <tr>
                <td>
                    <select id="sele">
                        <option value="" disabled selected>Select your option</option>
                        <option value="DEV">DEV</option>
                        <option value="TEST">TEST</option>
                        <option value="MAIN">MAINTENANCE</option>
                    </select>
                </td>
                <td>
                    <input type="text" placeholder="E.g:1234"/>
                </td>
                <td>
                    <input type="text" placeholder="Brief your work"/>
                </td>
                <td>
                    <input type="text" placeholder="MM min" />
                </td>
                <td>
                    <img id="delete" src="close.png" onclick="changeImage(this)">
                </td>
            </tr>
        </table>
        <input type="button" value="Submit" onclick="convert('matrix','taskcount')" />
    </form>


**Script:**

    function convert(tableid, temp2){
        var table = document.getElementById(tableid);
        console.log(table.rows.length);
        var hidelement = document.getElementById(temp2);
        hidelement.setAttribute("value", table.rows.length-1);

        for(var i=1; i < table.rows.length - 1; i++){
            var tt = "tt" + i;
                rf = "rf" + i,
                des = "des" + i,
                eff = "eff" + i,
                elemen = table.rows[i].cells[0].childNodes[0];

            elemen.setAttribute("name", tt);
            elemen = table.rows[i].cells[1].childNodes[0];
            elemen.setAttribute("name", rf);
            elemen = table.rows[i].cells[2].childNodes[0];
            elemen.setAttribute("name", des);
            elemen = table.rows[i].cells[3].childNodes[0];
            elemen.setAttribute("name", eff);
        }
    }

Answer 1

产生错误，因为您搜索了标识为"taskcount"的元素（参数temp2）：

<INPUT type="button" value="Submit" onclick="convert('matrix','taskcount')" />


var hidelement = document.getElementById(temp2); 

此元素不存在，因此返回null。然后会在setAttribute上调用null，这会引发错误。

hidelement.setAttribute("value", table.rows.length - 1);

如果没有这个，您的代码将运行良好：

（修复它在onclick事件中传递正确的id）

修改：

使用childNodes[0]是一个坏主意，因为它还包含不可见的textNodes。您可以使用.querySelector("*")来获取作为元素的第一个节点！

循环应为for (var i = 1; i < table.rows.length; i++)

function convert(tableid, temp2) {
  var table = document.getElementById(tableid);
  var hidelement = document.getElementById(temp2);
  hidelement.setAttribute("value", table.rows.length - 1);
  
  for (var i = 1; i < table.rows.length; i++) {
    var tt = "tt" + i;
    var rf = "rf" + i;
    var des = "des" + i;
    var eff = "eff" + i;
    var elemen = table.rows[i].cells[0].querySelector("*");
    elemen.setAttribute("name", tt);
    elemen = table.rows[i].cells[1].querySelector("*");
    elemen.setAttribute("name", rf);
    elemen = table.rows[i].cells[2].querySelector("*");
    elemen.setAttribute("name", des);
    elemen = table.rows[i].cells[3].querySelector("*");
    elemen.setAttribute("name", eff);
  }
}

<form action="timesheet_process">
  <input type="hidden" id="taskcount" value="5">
  <table id="matrix">
    <tr>
      <th>Task Type</th>
      <th>Reference ID</th>
      <th>Description</th>
      <th>Efforts</th>
      <th></th>
    </tr>
    <tr>
      <td>
        <select id="sele">
          <option value="" disabled selected>Select your option</option>
          <option value="DEV">DEV</option>
          <option value="TEST">TEST</option>
          <option value="MAIN">MAINTENANCE</option>
        </select>
      </td>
      <td>
        <input type="text" placeholder="E.g:1234" />
      </td>
      <td>
        <input type="text" placeholder="Brief your work" />
      </td>
      <td>
        <input type="text" placeholder="MM min" />
      </td>
      <td>
        <img id="delete" src="close.png" onclick="changeImage(this)">
      </td>
    </tr>
  </table>
  <input type="button" value="Submit" onclick="convert('matrix','taskcount')" />
</form>