Переключение столбцов таблицы с динамически добавленными строками

Question

Я переключаю столбцы в таблице, используя атрибут data-col. Он работает, когда таблица уже существует.

Однако у меня есть функция javascript, которая добавляет новые строки в таблицу. Как я могу также автоматически устанавливать видимость столбцов динамически добавленных строк на основе статуса флажка?

HTML

<div id="tablemodal"> 
    <h4>Select Columns to Hide or Show</h4> 
    <input checked="checked" data-col='column1' type="checkbox" /> Route 
    <input checked="checked" data-col='column2' type="checkbox" /> Distance</div> 
    <input checked="checked" data-col='column3' type="checkbox" /> speed</div> 
    <div> 
    <table id="table"> 
     <tbody> 
     <tr> 
      <th class="col" data-col="column1">route</th> 
      <th class="col" data-col="column2">distance</th> 
      <th class="col" data-col="column3">speed</th> 
     </tr> 
     <tr> 
      <td class="col" data-col="column1">washington to new york</td> 
      <td class="col" data-col="column2">1000 miles</td> 
      <td class="col" data-col="column3">300 mph</td> 
     </tr> 
     </tbody> 
    </table> 
    <input type="button" value="add new row" id="button"> 
    </div> 

JQuery

$(function() { 
    $("input[data-col]").on("change", function() { 
     var col = $(this).data("col"); 
     $(".col[data-col='" + col + "']").toggle(); 
    }); 
    }) 

    $("#button").click(function() { 
    $('#table').append('<tr>'+ 
         '<td class="col" data-col="column1">NY to Philly</td>'+ 
         '<td class="col" data-col="column2">300 miles</td>'+ 
         '<td class="col" data-col="column3">200mph</td>') 
    }); 

JSFiddle:https://jsfiddle.net/rdawkins/com7ef5u/12/

Answer 1

Измени Javascript как этот jsfiddle:

Этот код будет проверять входы и переключать их в случае необходимости.

$(function() { 
    $("input[data-col]").on("change", function() { 
    var col = $(this).data("col"); 
    $(".col[data-col='" + col + "']").toggle(); 
    }); 
}) 
$("#button").click(function() { 
    $('#table').append('<tr id="addedrow">'+ 
    '<td class="col" data-col="column1">NY to Philly</td>'+ 
    '<td class="col" data-col="column2">300 miles</td>'+ 
    '<td class="col" data-col="column3">200mph</td>'); 
    $("input[data-col]").each(function(){ 
    if(!$(this).is(':checked')) { 
     var col = $(this).data("col"); 
     $("#addedrow .col[data-col='" + col + "']").toggle(); 
    } 
    }); 
    $("#addedrow").removeAttr('id'); 
}); 

Answer 2

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

$("#button").click(function(){ 
    var newRow = $($('#table').children().children()[1]).clone(); 
    //set values 
    $('#table').append(newRow); 
});