Question

我发现了一个很棒的小部件，该部件创建了一个带有输入文本字段的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>-->

向动态创建的HTML表添加新行

0 个答案: