動的に複数のチェックボックスをhtmlテーブルに追加する方法はありますか？

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>