javascript - 您将如何访问动态生成的表格的特定单元格？

Question

假设我有一个动态生成的表:

{% for r in result %}
<tr>
        <td>
            <form action="/deleteBook" method="POST">
                <input type="submit" id="deleteBtn" value="Delete"/>
           </form> 
        </td>
        <td>
            <form action="/editBook" method="POST">
                <input type="submit" id="editBtn" value="Edit"/>
           </form> 
        </td>
        <td id="itemID">{{r.itemID}}</td>
        <td> {{r.title}}</td>

</tr>
{% endfor %}

现在我想访问按下相应表单提交按钮的行的 itemID。我知道我的设置方式，每一行都有一个 id“itemID”的列，我只是想知道是否可以轻松引用这些行，即使它们没有唯一的 ID。

Answer 1

您的事件处理程序接收一个 Event 对象，该对象具有两个属性:

• target ，这是点击的元素
• currentTarget ，这是您 Hook 事件的元素(可能是 target 的祖先)

我可能会在这里使用事件委托(delegate)， Hook click关于table或tbody ，所以currentTarget该表并不是特别有用，但是 target将是按钮。从按钮中您可以找到行 ( tr )，然后在该行中您可以找到 td对于该项目。

我会摆脱所有这些 id不过，从id开始要求在页面上是唯一的。请改用类名。所以:

document.getElementById("id-for-the-table").addEventListener("click", function(event) {
    const item = event.target.closest("tr").querySelector(".itemID");
    // ...use `item` here... For instance, `item.textContent` will be the item ID
});

实例:

document.getElementById("the-table").addEventListener("click", function(event) {
    const item = event.target.closest("tr").querySelector(".itemID");
    // ...use `item` here... For instance, `item.textContent` will be the item ID
    console.log("Item ID: " + item.textContent);
});
// Just for the example, I prevent forms being submitted
document.getElementById("the-table").addEventListener("submit", function(event) {
    event.preventDefault();
});

<table id="the-table">
    <tbody>
        <tr>
                <td>
                    <form action="/deleteBook" method="POST">
                        <input type="submit" class="deleteBtn" value="Delete"/>
                   </form> 
                </td>
                <td>
                    <form action="/editBook" method="POST">
                        <input type="submit" class="editBtn" value="Edit"/>
                   </form> 
                </td>
                <td class="itemID">1</td>
                <td> Title 1</td>
        </tr>
        <tr>
                <td>
                    <form action="/deleteBook" method="POST">
                        <input type="submit" class="deleteBtn" value="Delete"/>
                   </form> 
                </td>
                <td>
                    <form action="/editBook" method="POST">
                        <input type="submit" class="editBtn" value="Edit"/>
                   </form> 
                </td>
                <td class="itemID">2</td>
                <td> Title 2</td>
        </tr>
        <tr>
                <td>
                    <form action="/deleteBook" method="POST">
                        <input type="submit" class="deleteBtn" value="Delete"/>
                   </form> 
                </td>
                <td>
                    <form action="/editBook" method="POST">
                        <input type="submit" class="editBtn" value="Edit"/>
                   </form> 
                </td>
                <td class="itemID">3</td>
                <td> Title 3</td>
        </tr>
    </tbody>
</table>

<小时/>

请注意，它使用新的(ish) closest 元素上的方法。如果您需要支持像IE这样过时的浏览器，您可以对其进行polyfill。

另请注意，我使用了 ES2015+ ( const )，但如果(再次)您需要支持过时的浏览器，则可以使用 var而是在那里。