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>

单击每行对应的按钮，我希望我的脚本返回房间号，即行的第一个单元格数据。在互联网上引用各种文章后，我尝试了很多东西。似乎没什么用。请帮忙。

Answer 1

您可以使用类似

的内容

Demo

$(window).on('click', '.mybutton' ,function() {
    alert($(this).parent().parent().find('.nr').text());
    //Or you can use, which is even better
    //alert($(this).parent().siblings('.nr').text());
});

在这里，选择器非常简单，我们首先在按钮上绑定click事件，onclick我们选择button元素父素即td我们选择td的父级，即tr，后来我们找到class .nr

的元素

您也可以写td.nr而不仅仅.nr来更具体。

您的行正在动态添加，为了让您的点击监听器正常工作，您必须delegate the events

@Patsy Issa建议.siblings()

的致谢

Answer 2

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

Answer 3

通常我使用DataTables js作为解决方案，您可以查看：https://datatables.net/reference/api/row().data()

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

3 个答案: