使用JavaScript/jQuery获取html表中某行的选定下拉值

我有一个包含4列和多行的html表

column1 : simple text
column2 : simple text
column3 : select list with 2 values
column4 : Button that performs some operation

在运行时，我希望获得单击column4按钮所在行的所有列的选定/输入值。我对JavaScript/jQuery略知一二

下面是静态表代码

<table id="invoiceTbl" border="1">

    <thead>
        <tr>
            <th>Broker info</th>
            <th>Receivable Amount</th>
            <<th>Status</th>
                <th>Action</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

我正在填充表，即在AJAX调用中插入数据，如下所示：

$.ajax({
    type: "POST",
    data: $('#searchDetails').serialize(),
    async: false,
    cache: false,
    url: "/opsadmin/search.json",
    dataType: 'json',
    success: function (result) {
        var i = 1;
        $.each(result, function (index, value) {
            alert(index + ": " + value.brokerInfo);
            $('table#invoiceTbl TBODY').append('<tr> <td>' + i + '</td><td>' + value.brokerInfo + '</td><td>' + value.receivableAmount + '</td><td><select name="act" id="s"><option>PENDING</option><option>CLEARED</option></select></td><td><input type="button" value="Process" onclick="updateStatus(\'' + index + '\')"</input></td></tr>');
            i++;
        });
    }
});
return false;

单击按钮时，您将获得一个数组arr，该数组保存单击的行单元格的值：

$'按钮'。单击'按钮'，函数{ var-arr=[]； $this.最近的'tr'。查找'td'。每个函数{ var that=$this； 如果是，请查找'input[type=text]'。长度>0{ arr.pushthit.find'input[type=text].val； }否则，请查找“选择”。长度>0{ arr.pushthat.find'select'.val； }否则{ arr.pushthat.text； } }; alertarr； }; 文本 文本2 opt1 opt2 opt3 点击

---

首先，在索引的帮助下，为每个选定项设置唯一ID，如：

'<select name="act" id="s'+ index +'">'

---

已经有一些很好的答案，但我的解决方案有点不同：

$("#invoiceTbl tr").each(function(){
    var select = $(this).find("select");
    var button = $(this).find("button");
    button.click(function(){
        alert(select.val());
    });
});

如果您还需要其他专栏的内容，那么这就有点困难：

$("#invoiceTbl tr").each(function(){
    var tr = $(this);
    var button = $(this).find("button");
    button.click(function(){
        tr.find("td").each(function(){
            var select = $(this).find("select");
            var td_button = $(this).find("button");
            if(!td_button.length)
            {
                if(select.length)
                    console.log(select.val());
                else
                    console.log($(this).text());
            }
        });
    });
});

---

查看它是否运行。

我正在单击按钮调用一个函数。我是否应该在该函数中编写代码？您正在调用的函数是从.json文件获取数据并将这些数据附加到表中。my answer中的函数会通知一个数组，该数组包含单击行中每个单元格的值。这是两件不同的事情。

$("#invoiceTbl tr").each(function(){
    var select = $(this).find("select");
    var button = $(this).find("button");
    button.click(function(){
        alert(select.val());
    });
});

$("#invoiceTbl tr").each(function(){
    var tr = $(this);
    var button = $(this).find("button");
    button.click(function(){
        tr.find("td").each(function(){
            var select = $(this).find("select");
            var td_button = $(this).find("button");
            if(!td_button.length)
            {
                if(select.length)
                    console.log(select.val());
                else
                    console.log($(this).text());
            }
        });
    });
});