javascript - 使用动态添加的行切换表列

Question

我使用 data-col 属性切换表中的列。当 table 已经存在时它就可以工作。

但是，我有一个 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');
});