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>

Javascript setAttribute不适用于表元素

1 个答案: