如何在最后一行中仅添加一个列和`thead`以及一个复选框 [英] how to add only one column and `thead` in the last row with a checkbox
问题描述
老兄，我需要您的帮助.
我有一个包含checkbox的表，该表是使用csv文件中的数据数组创建的.
桌子看起来像这张照片
guy's i need your help.
i have a table that contain a checkboxthat i have create with a data array from csv file.
the table look like this picture
复选框的id's是
- 数字1复选框具有
id's mycheckbox1 - 数字2复选框具有
id's mycheckbox
- the number 1 checkbox has
id's mycheckbox1 - the number 2 checkbox has
id's mycheckbox
创建列和标题时的条件是这样的.
当我单击mycheckbox1时，它将创建一个标题，并为每个数据创建一列.然后，当我单击mycheckbox时，只需创建一列(在mycheckbox位置的一行中)和标题(在第一行中).
the condition when the column and header created is like this.
when i click the mycheckbox1 it will created one header and create a column for each data. and then when i click mycheckbox it just create a column (in a row of the mycheckbox place) and the header (in the 1st row) .
我要传递到列中的数据是Tilting，选中时和未选中时的数据都是Borongan.我只想一次创建标题和列.
the data i want to pass into the column is Tilting when checked and when it was unchecked the data is Borongan. and i want to create the header and the column just one time only.
我尝试编写代码，但无法正常工作T_T 有人请帮助我
i have try make a code but it wont work T_T someone please help me
我只是为此制造一个小提琴 这是小提琴 https://jsfiddle.net/minervaz/qz8tm1yb/
Im just create a fiddle for this this is the fiddle https://jsfiddle.net/minervaz/qz8tm1yb/
我再添加一个代码，说明数据的来源
i add one more code for where that data come from
$(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>
我已将我的代码编辑为创建表的所有代码.
然后我也会在这里提供csv数据.
您可以在此处 https://drive.google.com/file/d下载/0B_zAPPvH-idZZkxSRDI4NGNHOHc/view
i have edited my code into all of my code for creating the table.
and then i will give the csv data here too.
you can download in here https://drive.google.com/file/d/0B_zAPPvH-idZZkxSRDI4NGNHOHc/view
推荐答案
如果至少有两个数据行，则您的HTML无效，因为您对每个数据行的复选框使用了完全相同的id.您将需要为不同的行使用单独的id，或将数据行的id修改为class.让我们分别处理单独的情况:
If there are at least two data rows, then your HTML is invalid, since you use the very same id for the checkboxes of each data row. You will need to either use separate ids for the different rows, or modify the id of the data rows to class. Let's handle the separate cases separately:
$('#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应该像这样工作:
This is how the very first checkbox should work. The other checkboxes should work like this:
$(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，以便我们重现该问题.
This code is untested, if there is anything wrong with it, please, let me know and/or create a JSFiddle so we can reproduce the issue.
问题解决了.
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`以及一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
