使用Javascript或JQuery从特定的表行和列中获取选择值和选项

Question

I have a table that has rows appended to it. Each row has a select in column 2 {0, 1, [2]} . I am trying to get the text/value/option of the select using JavaScript or JQuery. This seems like it should be something easy but for the life of me I cannot figure out a way to get the select element in the selected row & column. Any help would be greatly appreciated.

Here is my table.

 <div id="table_container">
        <table id="computer_table" class="service_table">
            <thead id="header_container">
            <th class="table_header">COMPUTER NAME</th>
            <th class="table_header">LIVE/HIDE</th>
            <th class="table_header">MODE</th>
            <th class="table_header">RUN</th>
            </thead>
            <tbody id="table_body">
            </tbody>
        </table>
    </div>

Here is my JavaScript that adds rows to the table. Rows contain a select in column 2.

row = $('<tr class="row_white"><td class="tb_pc_name">' + value.pc_name + '</td><td class="tb_live_hide">LIVE</td><td class="tb_mode">' +
                        '<select id="select_mode" class="select_dropdown">' +
                        '<option value="0">0 - DEFAULT</option>' +
                        '<option value="1">1 - CLEAN UP</option>' +
                        '<option value="2">2 - SIGN IN</option>' +
                        '<option value="3">3 - SIGN OUT</option>' +
                        '<option value="4">4 - UPDATE IPSW</option>' +
                        '<option value="5">5 - OPEN DMG DIRECTORY</option>' +
                        '</select></td>' +
                        '<td class="tb_btn"><button type="button" id="btn_run">RUN</button></td></tr>');


                    $("#computer_table").append(row);

After all rows have been appended, the user can make a selection from the select. There is a button in column 3 that when clicked should show an alert with the select option and value of the select on the same row. The code below should show the selected option and/or value of the select in the row of the cell that is clicked. I can get the row and column but cannot get the value of the select.

 $("#computer_table td").click(function() {

                    var table = document.getElementById('computer_table');

                    var column_num = parseInt( $(this).index() );
                    var row_num = parseInt( $(this).parent().index() );

                    alert('test');

               /*Error here.*******************************************************************************************/
                    var combo = table.rows[row_num + 1].cells[2].getElementById('select_mode');
 //$("#select_mode option:contains("?").attr('selected', 'selected');
                    alert(combo.value);

                });

Answer 1

First of all there is something wrong with youre code that add the row. Every ID must be unique and it's not the case. Try using a counter (or something else) to avoid that like this:

var numberRowAdded = 0;

row = $('<tr class="row_white"><td class="tb_pc_name">' + value.pc_name + '</td><td class="tb_live_hide">LIVE</td><td class="tb_mode">' +
                        '<select id="select_mode'+ numberRowAdded  +'" class="select_dropdown">' +
                        '<option value="0">0 - DEFAULT</option>' +
                        '<option value="1">1 - CLEAN UP</option>' +
                        '<option value="2">2 - SIGN IN</option>' +
                        '<option value="3">3 - SIGN OUT</option>' +
                        '<option value="4">4 - UPDATE IPSW</option>' +
                        '<option value="5">5 - OPEN DMG DIRECTORY</option>' +
                        '</select></td>' +
                        '<td class="tb_btn"><button type="button" id="btn_run'+ numberRowAdded  +'">RUN</button></td></tr>');


                    $("#computer_table").append(row);
numberRowAdded++;

Then to select what you want :

$("#computer_table td").click(function() {
    alert($(this).find(".select_dropdown").val());

});

Hope this help.

Answer 2

try passing in the ID onClick:

$("#computer_table td").click(function(this.id){    }

Just make sure all your cells have an ID.

Here is W3 example on enclosures and encapsulation. This is useful for giving all your elements a different ID. W3 encapsulation example

Adding elements with eventlisteners attached, and passing in a unique id!! *Note: this is not an exact fix for your code. This should however aid you in understanding.

/*use this function to create unique id's*/
 var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();


/*grab your table*/
 var table =document.getElementById("computer_table"); 
 /* create an element, set it's attributes*/
 var newRow = document.createElement("th");
 newRow.setAttribute("class", "table_header");
 newRow.setAttribute("id", "table_header"+add());
/*add the event listener*/ 
 newRow.addEventListener("click",function(this.id){  /* YOUR CODE HERE */ });  
 /*append to your table*/
 table.appendChild(newRow); 

Answer 3

If you changed your buttons to use a class rather than an id they could be triggered with this:

$("#computer_table").on("click", "button.btn_run", function(e) {
    alert($(this).parent().prev().children().find(":selected").text());
});