如何只用一个复选框在最后一行添加一列和`thead`

伙计我需要你的帮助。 我有一个表，其中包含我使用csv文件中的数据数组创建的checkbox 。 桌子看起来像这张照片

复选框的id's是

1. 数字1复选框有id's mycheckbox1
2. 数字2复选框有id's mycheckbox

创建列和标题时的条件是这样的。 当我单击mycheckbox1 ，它将创建一个标题并为每个数据创建一个列。 然后当我点击mycheckbox它只是创建一个列（在mycheckbox位置的一行中）和标题（在第一行中）。

我想要传递到列中的数据是在检查时Tilting ，当未选中时，数据是Borongan 。 我想只创建一次标题和列。

我已经尝试制作代码但它不会工作T_T有人请帮助我

我只是为此创造一个小提琴这是小提琴https://jsfiddle.net/minervaz/qz8tm1yb/

我为这些数据的来源添加了一个代码

 $(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 = ""; var data = results.data; var size = -1; var check = 7; var header = ""; header+= ""; header+= ""; header+= ""; header+= ""; header+= ""; header+= ""; header+= ""; header+= ""; header+= ""; header+= ""; table += header; table+=""; for (i = 1; i < data.length; i++) { table += ""; var row = data[i]; var cells = row.join(",").split(","); 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 += ""; } if (cells[5]> a && cells[5] <b){ table += "" } else if (cells[5]> b && cells[5] <c){ table += "" } else if (cells[5]> c && cells[5] <d){ table += "" } table += "" table += ""; } } table+=""; table += "
Kode Material
Storage Location
Movement Type
Id Indentifier
Date Input
Netto
Unit
Payroll
"; table += cells[j]; table += "
"+ callback1 +"
"+ callback2 +"
"+ callback3 +"
"; $("#parsed_csv_list").html(table); } }); 

    
 
 
 
 
 Upload File Data :  
 
 Upload File 
 
 
 
 
 
 
 
 
  

我已将我的代码编辑到我创建表的所有代码中。 然后我也会在这里给出csv数据。 你可以在这里下载https://drive.google.com/file/d/0B_z​​APPvH-idZZkxSRDI4NGNHOHc/view

Answer 1

如果至少有两个数据行，那么您的HTML无效，因为您对每个数据行的复选框使用了相同的id 。 您需要为不同的行使用单独的id ，或者将数据行的id修改为class 。 让我们分别处理单独的案例：

 $('#mycheckbox1').click(function(event) { $("tr.header-row").append("some content"); $("tr.data-row").each(function() { $(this).append("some other content"); }); }); 

这是第一个checkbox应该如何工作。 其他checkbox应该像这样工作：

 $(document).on(".mycheckbox", "click", function() { var currentRow = $(this).closest("tr.data-row"); var sib = currentRow.siblings("tr.data-row"); sib.each(function() { $(this).prop("colspan", $(this).prop("colspan") + 1); }); $("tr.header-row").append("some content"); currentRow.append("Some other content"); }); 

此代码未经测试，如果有任何问题，请告诉我和/或创建一个JSFiddle，以便我们可以重现该问题。

编辑：

问题已经解决了。

HTML

  
 
 
 
 
 Upload File Data :  
 
 Upload File 
 
 
 
 
 
 
 
 
  

使用Javascript

 $(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 = ""; var data = results.data; var size = -1; var check1 = 5; var check2 = 7; table +=""; table+= ""; table+= ""; table+= ""; table+= ""; table+= ""; table+= ""; table+= ""; table+= ""; table+= ""; table+=""; for (i = 1; i < data.length; i++) { table += ""; 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 < check1 || cells.length >check2){ alert('Data Yang Anda Masukkan Salah'); return false; } 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 += ""; } if (cells[5]> a && cells[5] " } else if (cells[5]> b && cells[5] " } else if (cells[5]> c && cells[5] " } table += "" table += ""; } } table+=""; table += "
Kode Material
Storage Location
Movement Type
Id Indentifier
Date Input
Netto
Unit
Payroll
"; table += cells[j]; table += "
"; $("#parsed_csv_list").html(table); init(); } function init() { $(".checkbox1").click(function() { $(".table-bordered .checkbox2").prop("checked", this.checked); }); } });