Как добавить строку таблицы в поле выбора элемента с помощью jquery

Question

У меня простая HTML-таблица с динамическими данными, генерируемыми на стороне сервера. Таблица содержит несколько строк с 2 столбцами и флажок. Установите флажок для каждой строки и нажмите кнопку «ДОБАВИТЬ», чтобы строки были добавлены в поле выбора в этом формате. "Row1col1value: row1col2value:". Поле выбора должно содержать только те строки, которые отмечены

пример кода по этой ссылке

[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

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

Обычная jsFiddle Link.

Самая важная вещь, которую стоит убрать из этого примера, - это идиома Карта . Обратите внимание, как я преобразую набор отмеченных элементов в нужные мне опции, а затем просто заменяю html моего целевого выбора.

Answer 4

Попробуйте это

$("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() + ":";
     } 
   });
});