javascript - 如何动态添加多个复选框到html表格？

Question

我想动态地将复选框添加到 html 表中的多行，而不必为每个添加输入类型 ="checkbox"。这可能吗？ 下面给出了用于制作表格和添加复选框的函数“check()”的代码片段......但它不起作用。请帮忙。

// Builds the HTML Table out of myList json data.

function buildHtmlTable(myList) {
  var columns = addAllColumnHeaders(myList);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];

      if (cellValue == null) {
        cellValue = "";
      }

      row$.append($('<td/>').html(cellValue));

    }
    
    $("#excelDataTable").append(row$);
  }

}

// Adds a header row to the table and returns the set of columns.

function addAllColumnHeaders(myList) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');
  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
        //check();
      }
      // check();
    }
    //check();
  }
  $("#excelDataTable").append(headerTr$);

  return columnSet;
  check();

}

function check() {
  for (var i = 0; i < myList.length; i++) {
    $('<input />', {
        type: 'checkbox',
        id: 'id' + i,
      })
      .appendTo("#excelDataTable");
  }
}

Answer 1

您可以在创建表后添加复选框。 下面，您可以看到更新后的代码。您的表格创建工作非常完美。但您试图将复选框附加到表格本身，而不是 td 元素。

在下面的 $(document).ready 函数中，您可以看到我首先创建了表，然后调用了 check() 函数。它基本上为每一行创建一个新的复选框，将其包装在td中并将其放入行中。

我还为第一个复选框添加了一个 change 事件方法来控制所有其他复选框。

// Builds the HTML Table out of myList json data.

function buildHtmlTable(myList) {
  var columns = addAllColumnHeaders(myList);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];

      if (cellValue == null) {
        cellValue = "";
      }

      row$.append($('<td/>').html(cellValue));

    }

    $("#excelDataTable").append(row$);
  }

}

// Adds a header row to the table and returns the set of columns.

function addAllColumnHeaders(myList) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');
  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
        //check();
      }
      // check();
    }
    //check();
  }
  $("#excelDataTable").append(headerTr$);



  return columnSet;
  //check();

}

function check() {
// foreach row in the table
// we create a new checkbox
// and wrap it with a td element
// then put that td at the beginning of the row

  var $rows = $('#excelDataTable tr');
  for (var i = 0; i < $rows.length; i++) {
    var $checkbox = $('<input />', {
      type: 'checkbox',
      id: 'id' + i,
    });

    $checkbox.wrap('<td></td>').parent().prependTo($rows[i]);
  }
  
  
  // First checkbox changes all the others
  $('#id0').change(function(){
  var isChecked = $(this).is(':checked');
  $('#excelDataTable input[type=checkbox]').prop('checked', isChecked);
  })

}

$(document).ready(function() {

  var myList = [{
    "ASN": "AS9498 BHARTI Airtel Ltd.",
    "COUNTRY": "IN",
    "IP": "182.72.211.158\n"
  }, {
    "ASN": "AS9874 StarHub Broadband",
    "COUNTRY": "SG",
    "IP": "183.90.37.224"
  }, {
    "ASN": "AS45143 SINGTEL MOBILE INTERNET SERVICE PROVIDER Singapore",
    "COUNTRY": "SG",
    "IP": "14.100.132.200"
  }, {
    "ASN": "AS45143 SINGTEL MOBILE INTERNET SERVICE PROVIDER Singapore",
    "COUNTRY": "SG",
    "IP": "14.100.134.235"
  }]


  buildHtmlTable(myList);
  check();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="excelDataTable"></table>