通过<tr> id值javascript函数

Sas*_*u H 0 javascript dom

我想通过<tr> id值代替this.id,如何获取tr id值。请帮我谢谢

<tr id="1">
    <td>
        <input type="checkbox" onclick="toggle(this.id)" value="private" name="private" id="private_1">
    </td>
    <td>
        <input type="checkbox" onclick="toggle(this.id)" checked="" value="public" name="public" id="public_1">
    </td>
</tr>
<br>
<tr id="2">
    <td>
        <input type="checkbox" onclick="toggle(this.id)" checked=""  value="private" name="private" id="private_2">
    </td>
    <td>
        <input type="checkbox" onclick="toggle(this.id)" value="public" name="public" id="public_2">
    </td>
</tr>
Run Code Online (Sandbox Code Playgroud)

演示版

Fel*_*ing 5

如果结构完全像这样,则可以使用

this.parentNode.parentNode.id
Run Code Online (Sandbox Code Playgroud)

当然,一旦结构发生变化,这就会制动。

而不是绑定到click事件,您应该绑定到change事件。然后,您还将介绍键盘所做的更改。


由于每个处理程序都在做同样的事情,因此您应该考虑利用事件冒泡。与其将事件处理程序附加到inputHTML中的每个元素,不如将一个事件处理程序附加到表:

var table = document.getElementById('tableId');

table.onchange = function(event) {
   event = event || window.srcElement;  // IE specials
   var target = event.target || event.srcElement;  // IE specials

   // was the element a checkbox?
   if(target.nodeName === "INPUT" && target.type === "checkbox") {
       // find parent row
       var parent = target.parentNode;
       while(parent.nodeName !== "TR" && parent !== null) {
           parent = parent.parentNode;
       }

       if(parent) { // we found the row
           toggle(parent.id);
       }
   }
};
Run Code Online (Sandbox Code Playgroud)

这看起来更复杂,但具有不必onclick="toggle(this.id)"在每个input元素上都写的优点。

演示