如何選中和取消選中復選框，然后在表的最后一列中創建一列

Question

晚上都。 我在這里有一個問題。 我有一個由我創建的javascript函數創建的表。 在該表的每一行中都包含一個checkbox ， thead也具有該checkbox 。 我為每行使用id mycheckbox和thead使用id mycheckbox1分別設置了checkbox的ID。

現在就可以解決問題了。 我必須嘗試使所有我的復選框都可以通過ID為mycheckbox1的thead的復選框進行檢查。 我嘗試了許多發現的代碼。 但是沒有人在工作。 然后我嘗試用我用HTML手動創建的表做一個小提琴，我可以檢查所有texboxt，它可以像這樣的小提琴一樣正常工作https://jsfiddle.net/minervaz/29fnt79f/1/

但是，當我嘗試在頁面中使用它時，它無法工作，這是我創建的表的代碼

 $(document).ready(function(){ $('#submit-file').on("click",function(e){ if ($('#files').val()== "") { alert("Anda Harus Memasukkan File Terlebih Dahulu"); } else{ e.preventDefault(); $('#files').parse({ config: { delimiter: "", skipEmptyLines: false, complete: displayHTMLTable, }, before: function(file, inputElem) { //console.log("Parsing file...", file); }, error: function(err, file) { //console.log("ERROR:", err, file); }, complete: function() { //console.log("Done with all files"); } }); } }); function displayHTMLTable(results) { var table = "<table class='table table-bordered' width='90%'>"; var data = results.data; var size = -1; var check = 7; var header = "<thead><tr>"; header+= "<th width='120'>Kode Material</th>"; header+= "<th width='140'>Storage Location</th>"; header+= "<th width='130'>Movement Type</th>"; header+= "<th width='130'>Id Indentifier</th>"; header+= "<th width='120'>Date Input</th>"; header+= "<th width='80'>Netto</th>"; header+= "<th width='50'>Unit</th>"; header+= "<th width='80'>Payroll</th>"; header+= "<th><input type='checkbox' id='mycheckbox1' name='mycheckbox1' ></th>"; header+= "</tr></thead>"; table += header; table+="<tbody>"; for (i = 1; i < data.length; i++) { table += "<tr>"; var row = data[i]; var cells = row.join(",").split(","); if (cells.length < size) continue; else if (cells.length > size) size = cells.length; if (cells.length > check){ alert('Data Yang Anda Masukkan Salah'); } else{ for (j = 0; j < cells.length; j++) { var a = 1.000; var b = 10.000; var c = 20.000; var d = 45.000; var callback1 = '10.000'; var callback2 = '20.000'; var callback3 = '37.500'; var callback4 = '45.000'; table += "<td>"; table += cells[j]; table += "</td>"; } if (cells[5]> a && cells[5] <b){ table += "<td>"+ callback1 +"</td>" } else if (cells[5]> b && cells[5] <c){ table += "<td>"+ callback2 +"</td>" } else if (cells[5]> c && cells[5] <d){ table += "<td>"+ callback3 +"</td>" } table += "<td><input type='checkbox' id='mycheckbox' name='mycheckbox'></td>" table += "</tr>"; } } table+="</tbody>"; table += "</table>"; $("#parsed_csv_list").html(table); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.5/papaparse.min.js"></script> <div class="container" style="padding:5px 5px; margin-left:5px"> <div class="well" style="width:70%"> <div class="row"> <form class="form-inline"> <div class="form-group"> <label for="files">Upload File Data :</label> <input type="file" id="files" class="form-control" accept=".csv" required /> </div> <div class="form-group"> <button type="submit" id="submit-file" class="btn btn-primary">Upload File</button> </div> </form> </div> </div> <div class="row" style="width:90%"> <form action="" id="form_data" name="form_data" method="post"> <div id="parsed_csv_list" class="panel-body table-responsive" style="width:90%"> </div> </form> </div> 

在可以選中我的復選框之后，我想在thead的最后一行和每個tbody的最后一行中添加一個新的th列。 選中時該列的值是Tilting ，不選中該列的值是Borongan 。

對於csv文件，您可以在此鏈接中下載https://drive.google.com/open?id=0B_zAPPvH-idZZkxSRDI4NGNHOHc

Answer 1

您遇到的問題是綁定時將更改事件設置為不存在的元素，因此您必須將其設置在存在的元素上。 我可以給你答案，但是從長遠來看不會有幫助。由於我不太擅長解釋概念，因此我只將指出問題的答案-

jQuery .on（'change'，function（）{}不觸發動態創建的輸入

對於第二部分的研究更多。 （我也不明白）