使用 jQuery 选择表格行的值

Posted 2023-03-11

【中文标题】使用 jQuery 选择表格行的值

【英文标题】：Selecting values of table row using jQuery

【发布时间】：2013-04-22 12:56:15

【问题描述】：

我有一个表格，每一行都包含下拉列表。 Rows 没有 id 属性。因此，由于 row 没有 id 属性，我如何获取下拉列表的选定项和相应的 ID 列的值。例如，如果我从第一行中选择一个项目，我想要项目的值和 ID 列的值，即 204。

这是上表的html代码

 <table class="table-1 gapmb40">
    <thead>
        <tr>
            <th>
                Status
            </th>
            <th>
                <a class="sortable" href="">Featured</a>
            </th>
            <th>
            </th>
            <th>
                <a class="sortable" href="">Date Modified</a>
            </th>
            <th>
            </th>
            <th>
                ID
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <select class="input-2" name="2">
                    <option value="New">New</option>
                    <option selected="selected" value="Live">Live</option>
                    <option value="AccountOnly">AccountOnly</option>
                    <option value="Hide">Hide</option>
                    <option value="Suspended">Suspended</option>
                </select>
            </td>
            <td>
                <a href="">Feature</a>
            </td>
            <td>
                <a href="">View</a>
            </td>
            <td>
                07/03/2013
            </td>
            <td style="display: none">
                <a href="">LogOnAs</a>
            </td>
            <td>
                204
            </td>
        </tr>
    </tbody>
</table>

【参考方案1】：

给你所有的选择框一个类...说selectClass并使用jquery类选择器。

试试这个

 $('.selectClass').change(function(e)
     alert($(this).val()); //gives you the selected value
     alert($(this).parents('tr').find('td:eq(5)').text()); //gives you the related TD which is 4th column and gets its text

     //or
     alert($(this).closest('tr').find('td:eq(5)').text()); 
);

fiddle here

【讨论】：

回答这个问题，即使您的问题很可能会被关闭...请将您的相关代码也与您的问题一起发布...以便其他人可以帮助您...

bipen, alert($(this).parent().find('td:eq(3)').text());正在返回空白值。

@kaustubhshukla 更新了试试看……也更新了小提琴……看看

非常感谢 bipen... alert($(this).closest('tr').find('td:eq(5)').text());真的为我工作......

bipen，我想用一些额外的 jQuery 来更新它。在更改下拉列表时，我将显示一个带有确定和取消按钮的确认对话框。如果用户单击取消按钮或关闭确认框，我希望选择下拉列表的先前值。例如：参考随问题添加的图片，如果有人将下拉值从“实时”更改为其他值并且弹出窗口已显示并且用户取消它，用户将在下拉列表中看到“实时”。

【参考方案2】：

<select onchange=sel_change(this.value,'<%=id%>');></select>

所以在 javascript 函数中，您可以获取所选项目的值和该行的 id

<script>

    function sel_change(item,id)
        alert("selected item "+item+"from the id "+id);
    

</script>

【参考方案3】：

如果你有表ID，那么你可以试试这个..

$("#tbltable tr").click(function() 
    var selectedText = $(this).find('select :selected').text();
    var columnID = this.cells[4].innerHTML.toString();
    alert(selectedText + " , " + columnID);
 );