Question

<table border="1" cellpadding="5" id="newtable">
                <tr>
                    <th>Room No</th>
                    <th>AC</th>
                    <th>Deluxe</th>
                    <th>Tariff</th>
                </tr>
                <c:forEach var="room" items="${myrooms}">
                    <tr bgcolor="#4B476F" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#4B476F';">

                        <td class="nr"><c:out value="${room.roomno}" /></td>
                        <td><c:out value="${room.ac}" /></td>
                        <td><c:out value="${room.deluxe}" /></td>
                        <td>&#8377;<c:out value="${room.price}" /></td>
                        <td><button type="button" class="mybutton" onclick="rowFunction()">Pay</button> </td>
                    </tr>
                </c:forEach>
            </table>

单击每行对应的按钮，我希望我的脚本返回房间号，即行的第一个单元格数据。在互联网上引用各种文章后，我尝试了很多东西。似乎没什么用。请帮忙。我要求你不要发布任何解决方案。只有JAVASCRIPT。谢谢！

Answer 1

您可以将点击的元素传递给您的函数：

<td><button type="button" class="mybutton" onclick="rowFunction(this)">Pay</button> </td>

并遍历DOM：

function rowFunction(el) {
   var n = el.parentNode.parentNode.cells[0].textContent;
   // ...
}

Answer 2

您可以使用HTML5函数document.querySelectorAll获取按钮列表，然后向它们添加一个事件侦听器，以允许您访问其父行，并获取其第一个单元格。

var buttons = document.querySelectorAll('#newtable tbody .mybutton');

function buttonClicked(e) {
    var button = this,
        cell = button.parentElement,
        row = cell.parentElement,
        firstCell = row.querySelector('td');
    alert(firstCell.innerHTML);
}

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', buttonClicked);
}

Here is the fiddle I used to verify my code。另外，请考虑使用CSS而不是JavaScript来设置行的颜色和悬停颜色的样式。从长远来看，它将更清洁，更易于维护。

Answer 3

使用喜欢

$(".mybutton").click(function(){
    alert($(this).parent().siblings().eq(0).text());
});

JavaScript - 获取单击表行的第一个单元格的数据

3 个答案:

DEMO