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

Question

I have a html table with 4 columns and multiple rows

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.

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 ie inserting data on AJAX call like this:

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

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

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

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

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

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

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

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

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