我在页面中创建了一个带有javascript功能的html表。我需要在我的表格中的最后一个checkbox中创建一个column in each row。
我不知道该怎么做。
有人可以帮帮我吗？请给我一个例子。
这是我创建表格的代码
$(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'>";
var data = results.data;
var size = -1;
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;
for (j = 0; j < cells.length; j++) {
table += "<td>";
table += cells[j];
table += "</td>";
}
table += "</tr>";
}
table += "</table>";
$("#parsed_csv_list").html(table);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.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>
<img src="../image/show.png" class="button" name="display_data" id="display_data" style="height:35px; width:40px" />
</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>
我只是添加了所有代码
包含html code和所有the javascript code
我从csv文件中解析数据后创建表。我从csv文件得到的数组我把它变成了一个表。
答案 0 :(得分：1)
我刚补充一点，你试试：
function displayHTMLTable(results) {
var table = "<table class='table table-bordered'>";
var data = results.data;
var size = -1;
var header = "<thead><tr>";
header+= "<th>Column header 1</th>";
header+= "<th>Column header 2</th>";
header+= "<th>Column header 3</th>";
header+= "<th>Column header 4</th>";
header+= "<th>Column header for checkbox</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;
for (j = 0; j < cells.length; j++) {
table += "<td>";
table += cells[j];
table += "</td>";
}
table += "<td><input type='checkbox' name='mycheckox'></td>"
table += "</tr>";
}
table+="</tbody>";
table += "</table>";
$("#parsed_csv_list").html(table);
}
答案 1 :(得分：0)
function displayHTMLTable(results) {
const table = document.createElement('table');
table.className = 'table table-bordered';
// Add the thead.
const thead = table.appendChild(document.createElement('thead'));
const theadRow = thead.appendChild(document.createElement('tr'));
// Assuming the first row is the line with the headers.
results.data[0].split(',').forEach((header) => {
theadRow.appendChild(document.createElement('th')).innerText = header;
});
// Add an empty th for the checkbox column.
theadRow.appendChild(document.createElement('th'));
// Add the tbody.
const tbody = table.appendChild(document.createElement('tbody'));
results.data.forEach((row, i) => {
if (i === 0) {
return;
}
const tr = tbody.appendChild(document.createElement('tr'));
const cells = row.split(',');
cells.forEach((cell) => {
tr.appendChild(document.createElement('td')).innerText = cell;
});
// Add the checkbox here.
const td = tr.appendChild(document.createElement('td'));
const chk = td.appendChild(document.createElement('input'));
chk.type = 'checkbox';
// Set the value, name, etc. of the checkbox.
// chk.value = cells[0];
// chk.name = `chk-${cells[0]}`;
});
document.getElementById('parsed_csv_list').appendChild(table);
}
function displayHTMLTable(results) {
const table = document.createElement('table');
table.className = 'table table-bordered';
// Add the thead.
const thead = table.appendChild(document.createElement('thead'));
const theadRow = thead.appendChild(document.createElement('tr'));
// Assuming the first row is the line with the headers.
results.data[0].split(',').forEach((header) => {
theadRow.appendChild(document.createElement('th')).innerText = header;
});
// Add an empty th for the checkbox column.
theadRow.appendChild(document.createElement('th'));
// Add the tbody.
const tbody = table.appendChild(document.createElement('tbody'));
results.data.forEach((row, i) => {
if (i === 0) {
return;
}
const tr = tbody.appendChild(document.createElement('tr'));
const cells = row.split(',');
cells.forEach((cell) => {
tr.appendChild(document.createElement('td')).innerText = cell;
});
// Add the checkbox here.
const td = tr.appendChild(document.createElement('td'));
const chk = td.appendChild(document.createElement('input'));
chk.type = 'checkbox';
// Set the value, name, etc. of the checkbox.
// chk.value = cells[0];
// chk.name = `chk-${cells[0]}`;
});
document.getElementById('parsed_csv_list').appendChild(table);
}
const results = {
data: [
'id,name,age',
'1,John Doe,25',
'2,Jane Doe,20',
'3,Mary Jane,30',
'4,John Smith,35',
],
};
displayHTMLTable(results);* {
margin: 0;
outline: 0;
padding: 0;
}
html, body {
font: normal 14px/1.8 Helvetica, Arial, sans-serif;
}
table {
border-collapse: collapse;
margin: 10px 0;
table-layout: fixed;
}
th, td {
border: 1px solid #ccc;
padding: 5px;
}
th {
background: #ccc;
}<div id="parsed_csv_list"></div>