使用 Javascript 或 JQuery 从特定 Table 行和列获取 Select 值和选项

Question

我有一个 table，其中附加了行。每行在第 2 列 {0, 1, [2]} 中有一个 select。我正在尝试使用 JavaScript 或 JQuery 获取 select 的 text/value/option。这看起来应该很简单，但对于我来说，我无法想出一种方法来获取 selected 行和列中的 select 元素。任何帮助将不胜感激。

这是我的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>

这是我的 JavaScript，它向 table 添加了行。行在第 2 列中包含 select。

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

添加完所有行后，用户可以从 select 创建一个 selection。第 3 列中有一个按钮，单击该按钮时应在同一行上显示带有 select 选项和 select 值的警报。下面的代码应在所单击的单元格的行中显示 selected 选项 and/or 的 select 值。我可以获取行和列，但无法获取 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

首先，您添加行的代码有问题。每个 ID 都必须是唯一的，但事实并非如此。尝试使用计数器（或其他东西）来避免这样的情况：

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

然后select你想要什么：

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

});

希望对您有所帮助。

Answer 2

尝试传入 ID onClick:

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

只需确保您的所有单元格都有一个 ID。

这里是关于外壳和封装的 W3 示例。这对于为所有元素提供不同的 ID 很有用。 W3 encapsulation example

添加带有事件监听器的元素，并传入一个唯一的 id！！ *注意：这不是您的代码的精确修复。不过，这应该有助于您理解。

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

如果您将按钮更改为使用 class 而不是 id，它们可能会被触发：

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

使用 Javascript 或 JQuery 从特定 Table 行和列获取 Select 值和选项

Get Select Value and Option from Specific Table Row and Column with Javascript or JQuery

html

javascript

jquery

html-select

html-table