Question

我有一个包含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;

Answer 1

在#button点击后，您将获得一个数组（arr），其中包含所单击行行单元格的值：

＆＃13;

$('#button').on('click', function() {
   var arr = [];
   $(this).closest('tr').find('td').each(function() {
      var that = $(this);
      if (that.find('input[type="text"]').length > 0) {
         arr.push(that.find('input[type="text"]').val());
      } else if (that.find('select').length > 0) {
         arr.push(that.find('select').val());
      } else {
         arr.push(that.text());
      }
   });  
  alert(arr);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>text</td>
      <td>text2</td>
      <td>
        <select>
          <option value="opt1">opt1</option>
          <option value="opt2">opt2</option>
          <option value="opt3">opt3</option>
        </select>
      </td>
      <td><button id="button">Click</button></td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

$("#invoiceTbl input[type=button]").click(function(e){
   $(e.target).closest("tr").find("td").slice(0,2).each(function(){
        console.log($(this).text());
   });

});

Answer 3

首先在索引的帮助下为每个“选择”设置唯一ID：

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

并使用“updateStatus（index）”函数调用传递索引。

function updateStatus(index) {
    $('#s'+index).val(); // value of selected box.
}

Answer 4

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

$("#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());
            }
        });
    });
});

查看https://jsfiddle.net/cgfjewoe/以查看其运行情况。

使用javascript / jquery获取html表中行的选定下拉值

4 个答案: