如何動態添加多個複選框到一個HTML表？

Question

我想動態地添加複選框到html表中的多行，而不必爲每個添加input type =「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()函數。它基本上爲每一行創建一個新的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>