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

I have a html table with 4 columns and multiple rows

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

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

At run time, i want to get the selected / entered values for all the columns of that row against which column4 button is clicked. I know a little of javascript/jquery.So, please help.

在运行时,我想获取该行的所有列的选定/输入值,单击column4按钮。我知道一点javascript / jquery.So,请帮忙。

Here is the static table code

这是静态表代码

<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>

And I am populating table i.e. inserting data on AJAX call like this:

我正在填充表格,即在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;

4 个解决方案

#1

First set the unique ID to each of your "select" with help of index like:

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

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

and pass the index with "updateStatus(index)" function call.

并使用“updateStatus(index)”函数调用传递索引。

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

#2

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

});

#3

On #button click you will get an array (arr) that holds the values of the clicked row cells:

在#button上单击,您将获得一个数组(arr),其中包含单击的行单元格的值:

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

<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>

#4

There's already a few good answers, but my solution is a bit different:

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

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

If you also want the content of the other columns, that's a bit more difficult:

如果您还想要其他列的内容,那就更难了:

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

Check out https://jsfiddle.net/cgfjewoe/ to see it run.

看看https://jsfiddle.net/cgfjewoe/看它运行。

#1