Question

我有一个附加了行的表。每行在第2列{0, 1, [2]}中都有一个选择。我试图使用JavaScript或JQuery获取select的text / value /选项。这似乎应该是容易的东西，但对于我的生活，我无法找到一种方法来获得所选行中的选择元素＆amp;柱。任何帮助将不胜感激。

这是我的桌子。

 <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。行包含第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);

添加完所有行后，用户可以从选择中进行选择。第3列中有一个按钮，单击该按钮时，应显示带有select选项的警报和同一行上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++;

然后选择你想要的东西：

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

添加附加了eventlisteners的元素，并传入唯一的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

如果您将按钮更改为使用类而不是ID，则可以使用此按钮触发：

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

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

3 个答案: