javascript - 向动态创建的 HTML 表添加新行
问题描述
我发现了一个很棒的小部件，它创建了一个带有输入文本字段的 HTML 表格，允许用户在字段中插入文本并通过单击按钮在底部添加新行。添加数据后，它有一个按钮，允许用户将表格下载为 CSV 文件。它工作得很好，但我正在尝试使用新功能对其进行更新。
目前，表格是用 HTML 手写的。当我希望用户在干净的输入文本字段中输入新数据或添加/更新已经存在的数据时，这非常有用。我仍然可以使用此选项。
我喜欢提供的新选项，用户可以更新表中现有的 CSV 数据。我设法用现有 CSV 文件中动态创建的表格替换手写 HTML。除了添加新行外，一切正常。新行显示，但格式不正确（只是稍微偏离），而不是像原始概念那样在底部添加一个新行，它有时会添加几个新行（行数随机）。除此之外，一切都按预期工作。
我已经查看了脚本，但我无法解决这个问题。动态表是用 D3.js 和一个 CSV 文件创建的；其他一切都是 JavaScript/jQuery/、HTML 和 CSS。任何帮助了解我所缺少的内容将不胜感激。
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Update Table and CSV</title>
<meta charset = "UTF-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/d3.v3.js"></script>
<script src="js/d3Tip.js"></script>
<script src="js/jquery.fancybox-buttons.js"></script>-->
<style>
body {
margin: 0 auto;
}
#container{
width:95%;
height:auto;
margin: 0 auto;
border: 1px solid rgba(153,153,153,1);
background-color: rgba(255,255,255,1);
overflow:hidden;
}
.header {
width:100%;
height:60px;
background-color: grey;
}
.btn{
width: 6.5em;
height: auto;
margin-right: .5em;
padding: .2em;
background-color: black;
text-align: center;
font-size: 1em;
color: white;
font-family: Arial, Helvetica, sans-serif;
position: relative;
float: right;
top: 1.2em;
cursor: pointer;
}
.content {
width:100%;
height:auto;
}
.footer{
width:100%;
height:60px;
background-color: grey;
}
#clear{
clear: both;
}
/*Table Style*/
.btn {
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: #ffffff;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
text-decoration: none;
}
.btn-blue {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
}
.btn-blue:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
.btn-green {
background: #75c987;
background-image: -webkit-linear-gradient(top, #75c987, #468054);
background-image: -moz-linear-gradient(top, #75c987, #468054);
background-image: -ms-linear-gradient(top, #75c987, #468054);
background-image: -o-linear-gradient(top, #75c987, #468054);
background-image: linear-gradient(to bottom, #75c987, #468054);
}
.btn-green:hover {
background: #75c987;
background-image: -webkit-linear-gradient(top, #75c987, #75c987);
background-image: -moz-linear-gradient(top, #75c987, #75c987);
background-image: -ms-linear-gradient(top, #75c987, #75c987);
background-image: -o-linear-gradient(top, #75c987, #75c987);
background-image: linear-gradient(to bottom, #75c987, #75c987);
}
#inputsTable{
margin:20px 0;
position: relative;
z-index: 50;
}
input{
width:150px;
}
.input-id{
width:20px;
}
.input-graphic{
width:100px;
}
.input-date{
width:100px;
}
.input-marker{
width:200px;
}
.input-imageCount{
width:200px;
}
.input-speed{
width:200px;
}
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
</style>
</head>
<body>
<div id="container">
<div class="header" ></div>
<div class="content">
<h1>Update</h1>
<table id="inputsTable"></table>
<a href="#" class="btn btn-green" id="addRowBtn">Add new table row</a>
<a href="#" class="btn btn-blue" id="lnkFile" download="productData.csv">Download CSV file</a><div id="clear"></div><br><br>
</div><!--Close content-->
<div class="footer"></div><!--Close footer-->
</div><!--Close container-->
<script>
d3.text("data.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("#inputsTable")
.append("table")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.attr('class',function(d) { return 'csv-row'})
.selectAll("td")
.data(function(d) { return d; }).enter().append("td")
.append('input')
.attr('type','text')
.attr('name','textInput')
.attr('value', function(d){ return d;});
});
$(document).ready(function(){
(function($) {
var ieOldFn = null;
var getRandomNumber = function() {
return Math.floor(Math.random() * 100);
};
var addRowClick = function() {
$("table").find("tr:last").clone().appendTo($("table"));
$("table").find("tr:last").find("input").each(function(ind, el) {
if (ind === 0) {
var id = parseInt($(el).val());
$(el).val(id + 1);
} else {
$(el).val('');
}
});
updateCsvLink();
};
var updateCsvLink = function() {
var csvString = "id,graphic,date,marker,imageCount,speed";///CSV file header
$(".csv-row").each(function() {
csvString += "\n";
var separator = "";
$(this).find("input").each(function() {
csvString += separator + $(this).val();
separator = ",";
});
});
var fileName = 'productData.csv';
console.log(csvString);
window.URL = window.URL || window.webkiURL;
var blobObj = new Blob([csvString]);
var lnkElement = document.getElementById('lnkFile');
if (typeof window.navigator.msSaveOrOpenBlob != "undefined") {
var clickFn = function() {
window.navigator.msSaveOrOpenBlob(blobObj, fileName);
};
if(ieOldFn !== null){
lnkElement.removeEventListener('click', ieOldFn, true);
}
lnkElement.addEventListener('click', clickFn, true);
ieOldFn = clickFn;
} else {
var fileUrl = window.URL.createObjectURL(blobObj);
lnkElement.setAttribute('href', fileUrl);
lnkElement.setAttribute('download', fileName);
}
};
$('#inputsTable').on('change', 'input', updateCsvLink);
$('#addRowBtn').on('click', addRowClick);
updateCsvLink();
})(jQuery);
});
</script>
</body>
</html>
下面是用动态表替换的手写 HTML 表。
<table id="inputsTable">
<thead>
<tr>
<th>id</th>
<th>graphic</th>
<th>date</th>
<th>marker</th>
<th>imageCount</th>
<th>speed</th>
</tr>
</thead>
<tbody>
<tr class="csv-row">
<td><input class="input-id" readonly value="0" ></td>
<td><input class="input-graphic" value="Slide1.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="510" ></td>
<td><input class="input-imageCount" value="3" ></td>
<td><input class="input-speed" value="5000" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="1" ></td>
<td><input class="input-graphic" value="Slide2.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="520" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="2" ></td>
<td><input class="input-graphic" value="Slide3.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="530" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="3" ></td>
<td><input class="input-graphic" value="Slide4.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="540" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="4" ></td>
<td><input class="input-graphic" value="Slide5.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="550" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="5" ></td>
<td><input class="input-graphic" value="Slide6.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="560" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="6" ></td>
<td><input class="input-graphic" value="Slide7.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="570" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="7" ></td>
<td><input class="input-graphic" value="Slide8.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="580" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="8" ></td>
<td><input class="input-graphic" value="Slide9.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="590" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="9" ></td>
<td><input class="input-graphic" value="Slide10.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="600" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="10" ></td>
<td><input class="input-graphic" value="Slide11.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="610" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="11" ></td>
<td><input class="input-graphic" value="Slide12.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="620" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="12" ></td>
<td><input class="input-graphic" value="Slide13.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="630" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="13" ></td>
<td><input class="input-graphic" value="Slide14.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="640" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="14" ></td>
<td><input class="input-graphic" value="Slide15.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="650" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="15" ></td>
<td><input class="input-graphic" value="Slide16.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="660" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="16" ></td>
<td><input class="input-graphic" value="Slide17.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="670" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="17" ></td>
<td><input class="input-graphic" value="Slide18.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="680" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="18" ></td>
<td><input class="input-graphic" value="Slide19.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="690" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="19" ></td>
<td><input class="input-graphic" value="Slide20.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="700" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="20" ></td>
<td><input class="input-graphic" value="Slide21.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="710" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="21" ></td>
<td><input class="input-graphic" value="Slide22.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="720" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
</tbody>
</table>-->
解决方案
推荐阅读
- javascript - 在 Vue2 中的方法内使用 eval() 可以工作，但不能同时工作
- java - java.lang.UnsupportedOperationException：此功能仅在元素类型实现 RealmModel 时可用
- reactjs - React create-react-app 在构建时更改静态目录的名称
- python - 期望值：第 1 行，第 1 列（字符 0），带有 Python JSON
- python - 根据字符数拆分字符串列
- python - Django：settings.DATABASES 配置不正确
- dependencies - Sbt：一个回购中断打破了依赖关系解决方案
- android - ScrollView doesn't display whole content of ConstraintLayout
- c++ - 如何在 Windows 10 的 Clion 中使用 intel opencl sdk？
- python - 如何打印 args 和 kwargs 列表