Question

我有一个简单的HTML表，其中包含从服务器端生成的动态数据。该表包含多行，包含2列和一个复选框。单击每行的复选框，然后单击“添加”按钮，行应添加到此格式的选择框中 “row1col1value：row1col2value：”。选择框应仅包含已检查的行

sample code in this link

[http://jsfiddle.net/6nT2r/16/][2]

Answer 1

$('#button1').click(function(){
    $('#myselect').empty();
    $(':checkbox:checked').each(function(){
        var _row_data = $(this).parent().siblings().map(function(){
           return $(this).html();
        }).get().join('');
        $('#myselect').append('<option>' + _row_data + '</option>');
    });
});

工作示例：http://jsfiddle.net/AlienWebguy/g3CZC/

Answer 2

这是我的尝试

$("#button1").click(function() {
    $("#myselect").empty();
    var values;
    $("input:checked").parent("td").each(function() {
        $(this).siblings("td").each(function(index) {
            if (index == 0) values = $(this).text() + ":";
            else values = values + $(this).text();
        });
        $("#myselect").append("<option>" + values + "</option>");
    });

})

演示：http://jsfiddle.net/6nT2r/27/

Answer 3

试试这个

$("addButtonSelector").click(function(){

   var str = "";
   $("tableSelector tr").each(function(i){
     if($(this).find("input:checked").length){
       str = str + "row"+(i+1)+ $(this).find("td:eq(0)").text() + ":";
     } 
   });
});

Answer 4

$('#button1').click(function () {
  $('#myselect').html(
  $(':checked').map(function () {
    var selText = $(this).parent().siblings().map(function () {
      return $(this).text();
    }).get().join(':');
    return $('<option>', { text: selText }).get();
  }));
});

Customary jsFiddle Link.

从这个例子中拿走最重要的是Map成语。注意我如何将已检查元素集转换为我需要的选项元素，然后只替换目标选择的html。

如何使用jquery将表行添加到选择框元素

4 个答案: