Question

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

复选框的id's为

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

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

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

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

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

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

＆＃13;

$(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);
	
}   

});

＆＃13;

<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>

＆＃13;

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

Answer 1

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

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

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

$(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("<td><thead>some content</thead></td>");
    currentRow.append("<td>Some other content</td>");
});

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

编辑：

问题解决了。

<强> HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.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 class="row">

            <div id="parsed_csv_list" class="panel-body table-responsive" style="width:800px">
            </div>
        </div>
    </div>
    <div id="footer"></div>
  </div>

<强>的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 = "<table class='table table-bordered' width='90%'>";
    var data = results.data;
    var size = -1;
    var check1 = 5;
    var check2 = 7;
    table +="<td width='120'>Kode Material</td>";
    table+= "<td width='140'>Storage Location</td>";
    table+= "<td width='130'>Movement Type</td>";
    table+= "<td width='130'>Id Indentifier</td>";
    table+= "<td width='120'>Date Input</td>";
    table+= "<td width='80'>Netto</td>";
    table+= "<td width='50'>Unit</td>"; 
    table+= "<td width='80'>Payroll</td>"; 
    table+= "<td><input type='checkbox' class='checkbox1' name='checkbox1' ></td>";
    table+= "</tr>";
    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 < 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 += "<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' class='checkbox2' name='checkbox2'></td>"
        table += "</tr>";  
        }
    }
    table+="</tbody>";
    table += "</table>";
    $("#parsed_csv_list").html(table);
      init();
}   
function init() { 
$(".checkbox1").click(function() { 
$(".table-bordered .checkbox2").prop("checked", this.checked); 

}); 
}
});

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

1 个答案: