Question

我想动态地将复选框添加到html表中的多行，而不必为每个行添加输入类型=“复选框”。这可能吗？下面给出了用于创建表的代码片段和用于添加复选框的函数'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()函数。它基本上为每一行创建一个新的checkbox，将其包装在td中并将其放入row。

我还为第一个复选框添加了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>

如何动态地将多个复选框添加到html表中？

1 个答案: