.empty() 在 table 动态创建时清除 tbody 元素

Question

我正在创建一个下拉列表来帮助人们为他们的打印机选择介质和墨水，然后生成一个 table 来查看结果。我已经达到了生成 table 并且可以使用 jspdf 下载为 PDF 的地步，但是当您 select 不同的打印机时，问题就来了。我似乎想不出一种方法来先清除 tbody 元素，然后用媒体和墨水填充 tbody。

我做了一些研究，发现使用 .empty() 可以清除内部有代码的 tbody 或 div。我想不出一种方法让 .empty 先发生，然后 .each 填充 table。

当下拉列表发生变化并且打印机被 selected 时，table 会完美填充。然后，您可以使用下载按钮获取 table 信息的 pdf 文件。问题是当您 select 第二台打印机时， table 只是将列表填充到前一台打印机的顶部。 .empty() 首先不工作或根本不工作。

function captioncode() {
  var e = document.getElementById("printers");
  var resulting = e.options[e.selectedIndex].value;
  document.getElementById("printertype").innerHTML = resulting + " Supply List";
};

var printersByBrand = {
  HP: ["Select", "HP DesignJet T120", "HP DesignJet T520", "HP DesignJet T730", "HP DesignJet T830 24-Inch", "HP DesignJet T830 36-Inch", "HP DesignJet T930", "HP DesignJet T1530", "HP DesignJet T1600", "HP DesignJet T1700", "HP DesignJet T2530", "HP DesignJet T2600", "HP DesignJet T3500", "HP DesignJet T7200", "HP DesignJet Z6 24-Inch", "HP DesignJet Z6 44-Inch", "HP DesignJet Z9+ 24-Inch", "HP DesignJet Z9+ 44-Inch", "HP DesignJet Z6610 60-Inch", "HP DesignJet Z6810 42-Inch", "HP DesignJet Z6810 60-Inch"],
  Canon: ["Select", "iPF500", "iPF600", "iPF610", "iPF700", "iPF710", "iPF810", "iPF815", "iPF820", "iPF825", "iPFPro-1000", "iPFPro-2000", "iPFPro-4000", "iPFPro-4000s", "iPFPro-6000s", "iPF5000", "iPF5100", "iPF6000", "iPF6100", "iPF6200", "iPF6300", "iPF6300s", "iPF6350", "iPF6400", "iPF6400s", "iPF6450", "iPF8000", "iPF8000s", "iPF8100", "iPF8300", "iPF8300s", "iPF8400", "iPF8400s", "iPF9000", "iPF9000s", "iPF9100", "iPF9400", "iPF9400s", "iPFW8200", "iPFW8400"],
  Mutoh: ["Select", "Mutoh ValueJet 426UF Printer", "Mutoh ValueJet 626UF Printer", "Mutoh ValueJet 628 Printer", "Mutoh ValueJet 1324X Printer with Take-Up Real", "Mutoh ValueJet 1624X Printer with Take-Up Real", "Mutoh ValueJet 1638X Printer with Take-Up Real", "Mutoh ValueJet 2638X Printer", "Mutoh ValueJet 1627MH Hybrid Printer", "Mutoh ValueJet 1638UH Hybrid Printer"]
}

function changecat(value) {
  if (value.length == 0) document.getElementById("printers").innerHTML = "<option></option>";
  else {
    var catOptions = "";
    for (printersId in printersByBrand[value]) {
      catOptions += "<option" + " id='" + printersByBrand[value][printersId] + "'>" + printersByBrand[value][printersId] + "</option>";
    }
    document.getElementById("printers").innerHTML = catOptions;
  }
};

function generate() {
  var doc = new jsPDF('p', 'pt');
  var res = doc.autoTableHtmlToJson(document.getElementById("testtest"));
  var header = function(data) {
    doc.setFontSize(18);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
    doc.addImage(logoImg, 'JPEG', data.settings.margin.left, 0, 300, 70);

    var e = document.getElementById("printers");
    var result = e.options[e.selectedIndex].value + " Printer Supplies";
    //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
    doc.text(result, data.settings.margin.left, 100);
  };

  var options = {
    beforePageContent: header,
    margin: {
      top: 120
    },
  };

  doc.autoTable(res.columns, res.data, options);
  var e = document.getElementById("printers");
  var resulting = e.options[e.selectedIndex].value;
  var docusave = resulting + " Printer Supply List"
  doc.save(docusave);
};

var t120Printer = [
  ["HP 711 38-ml Black DesignJet Ink Cartridge", "CZ129A", ".98"],
  ["HP 711 29-ml Cyan DesignJet Ink Cartridge", "CZ130A", ".92"],
  ["HP 711 29-ml Magenta DesignJet Ink Cartridge", "CZ131A", ".92"],
  ["HP 711 29-ml Yellow DesignJet Ink Cartridge", "CZ132A", ".92"],
  ["HP 711 80-ml Black DesignJet Ink Cartridge", "CZ133A", ".33"],
  ["HP 711 DesignJet Printhead Replacement Kit", "C1Q10A", "0.24"],
  ["20lb Bond Paper 24 x 150 (2 inch Core)", "B20IJ24X150", ".60"],
  ["20lb White Paper 24 x 150 (2 inch Core)", "20BIJ24150", ".10"],
  ["24lb Premium Coated Bond Paper 24 x 150 (2 inch Core)", "24IJC24150", ".20"],
  ["24lb Premium Coated Bond Paper 24 x 300 (2 inch Core)", "24IJC24300", ".47"],
  ["36lb Coated Color Bond Paper 24 x 100 (2 inch Core)", "36IJC24100", ".40"],
  ["46lb Premium Coated Color Bond Paper 24 x 100 (2 inch Core)", "46IJC24100", ".46"],
  ["Adhesive Matte Polypropylene 24 x 100 (2 inch core)", "QM-WRPPAD-24", ".48"]
]
var t520Printer = [
  ["36lb Coated Color Bond Paper 24 x 100 (2 inch Core)", "36IJC24100", ".40"],
  ["46lb Premium Coated Color Bond Paper 24 x 100 (2 inch Core)", "46IJC24100", ".46"],
  ["Adhesive Matte Polypropylene 24 x 100 (2 inch core)", "QM-WRPPAD-24", ".48"]
]

var html = ""

$("#printers").change(function() {
  var e = document.getElementById("printers");
  var resulting = e.options[e.selectedIndex].value;
  if (resulting == "HP DesignJet T120") {
    $('#testtest tbody').empty();

    $.each(t120Printer, function(rowNum, row) {
      console.log(rowNum, row);
      html += "<tr><td>" + row[0] + "<td>" + row[1] + "<td>" + row[2] + "</tr>"
    })

    $((html)).appendTo("#div");
  } else if (resulting == "HP DesignJet T520") {
    $('#testtest tbody').empty();

    $.each(t520Printer, function(rowNum, row) {
      console.log(rowNum, row);
      html += "<tr><td>" + row[0] + "<td>" + row[1] + "<td>" + row[2] + "</tr>"
    })

    $((html)).appendTo("#div");
  } else {
    $((html)).appendTo("#div");
  }
});

.PrinterSupplies th,
td,
tr {
  border: 1px solid black;
}

.PrinterSupplies th {
  font-size: 25px;
  font-weight: 600;
}

tbody:last-child::before {
  content: '';
  display: block;
  height: 25px;
}

.InkSup tr:nth-child(even) {
  background-color: rgba(138, 189, 60, 0.15);
}

.MediaSup tr:nth-child(odd) {
  background-color: rgba(66, 51, 82, 0.15)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
<script src="https://cdn.shopify.com/s/files/1/0096/5813/8703/t/9/assets/jspdf-autotable@2.3.2.js?13018"></script>
<script src="https://cdn.shopify.com/s/files/1/0096/5813/8703/files/logo-image-txt.js?13845" type="text/javascript"></script>

<p>Once you have selected something you will need to reload</p><br /><br />

<select name="brand" id="brand" onchange="changecat(this.value);">
  <option value="" disabled selected>Select</option>
  <option value="HP">HP</option>
  <option value="Canon">Canon</option>
  <option value="Mutoh">Mutoh</option>
</select>
<select name="printers" id="printers" onChange="captioncode()">
  <option value="" disabled selected>Select</option>
</select>
<br /><br /><br /><br />

<br/><br />
<h1>Test Dynamic Table</h1>
<br /><br />
<div id="pdfsaver">
  <table class="PrinterSupplies" id="testtest">
    <caption id="printertype"></caption>
    <thead>
      <tr>
        <th class="tablehead">Product Name</th>
        <th class="tablehead">Product Sku</th>
        <th class="tablehead">Price</th>
      </tr>
    </thead>
    <tbody id="div" class="InkSup"></tbody>
  </table>
</div>
<br /><br />
<button onclick="generate();">Download PDF</button>

这里有一个 fiddle 来帮助展示我遇到的问题：https://jsfiddle.net/gza92s5j/

Answer 1

尝试.remove()

$('#testtest tbody tr').remove();

更改现有代码：

$('#testtest tbody tr').remove();
    var html = "";
    $.each(t520Printer, function(rowNum, row){
        //console.log(rowNum, row);
        html += "<tr><td>" + row[0] + "<td>" + row[1] + "<td>" + row[2] + "</tr>"
    })

    $((html)).appendTo("#testtest tbody");

我已经用这个更新了你的代码并且它有效。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
<script src="https://cdn.shopify.com/s/files/1/0096/5813/8703/t/9/assets/jspdf-autotable@2.3.2.js?13018"></script>
<script src="https://cdn.shopify.com/s/files/1/0096/5813/8703/files/logo-image-txt.js?13845" type="text/javascript"></script>

<p>Once you have selected something you will need to reload</p>
<br /><br />

<select name="brand" id="brand" onchange="changecat(this.value);">
 <option value="" disabled selected>Select</option>
 <option value="HP">HP</option>
 <option value="Canon">Canon</option>
 <option value="Mutoh">Mutoh</option> 
</select>
<select name="printers" id="printers" onChange="captioncode()">
 <option value="" disabled selected>Select</option>
 
</select>
<br /><br /><br /><br />

<style>
 .PrinterSupplies th,td,tr{
  border:1px solid black;
 }
 .PrinterSupplies th{
  font-size:25px;
  font-weight: 600;
 }
 tbody:last-child::before{
  content:'';
  display:block;
  height:25px;
 }
 
 .InkSup tr:nth-child(even){
  background-color:rgba(138,189,60,0.15);
 }
 
 .MediaSup tr:nth-child(odd){
  background-color: rgba(66,51,82,0.15)
 }
</style>



<br/><br />
<h1>Test Dynamic Table</h1>
<br /><br />
<div id="pdfsaver">
<table class="PrinterSupplies" id="testtest">
 <caption id="printertype"></caption>
 <thead>
  <tr><th class="tablehead">Product Name</th>
   <th class="tablehead">Product Sku</th>
   <th class="tablehead">Price</th>
  </tr>
 </thead>
 <tbody id="div" class="InkSup">
  
 </tbody>
</table>
</div>
<br /><br />
<button onclick="generate();">Download PDF</button>

<script>
 
 
 function captioncode() {
  var e = document.getElementById("printers");
  var resulting = e.options[e.selectedIndex].value;
  document.getElementById("printertype").innerHTML = resulting + " Supply List";
 };
 
</script>

<script>
 
var printersByBrand = {
    HP: ["Select", "HP DesignJet T120", "HP DesignJet T520", "HP DesignJet T730", "HP DesignJet T830 24-Inch", "HP DesignJet T830 36-Inch", "HP DesignJet T930", "HP DesignJet T1530", "HP DesignJet T1600", "HP DesignJet T1700", "HP DesignJet T2530", "HP DesignJet T2600", "HP DesignJet T3500", "HP DesignJet T7200", "HP DesignJet Z6 24-Inch", "HP DesignJet Z6 44-Inch", "HP DesignJet Z9+ 24-Inch", "HP DesignJet Z9+ 44-Inch", "HP DesignJet Z6610 60-Inch", "HP DesignJet Z6810 42-Inch", "HP DesignJet Z6810 60-Inch"],
 
    Canon: ["Select", "iPF500", "iPF600", "iPF610", "iPF700", "iPF710", "iPF810", "iPF815", "iPF820", "iPF825", "iPFPro-1000", "iPFPro-2000", "iPFPro-4000", "iPFPro-4000s", "iPFPro-6000s", "iPF5000", "iPF5100", "iPF6000", "iPF6100", "iPF6200", "iPF6300", "iPF6300s", "iPF6350", "iPF6400", "iPF6400s", "iPF6450", "iPF8000", "iPF8000s", "iPF8100", "iPF8300", "iPF8300s", "iPF8400", "iPF8400s", "iPF9000", "iPF9000s", "iPF9100", "iPF9400", "iPF9400s", "iPFW8200", "iPFW8400"],
 
    Mutoh: ["Select", "Mutoh ValueJet 426UF Printer", "Mutoh ValueJet 626UF Printer", "Mutoh ValueJet 628 Printer", "Mutoh ValueJet 1324X Printer with Take-Up Real", "Mutoh ValueJet 1624X Printer with Take-Up Real", "Mutoh ValueJet 1638X Printer with Take-Up Real", "Mutoh ValueJet 2638X Printer", "Mutoh ValueJet 1627MH Hybrid Printer", "Mutoh ValueJet 1638UH Hybrid Printer"]
}

    function changecat(value) {
        if (value.length == 0) document.getElementById("printers").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (printersId in printersByBrand[value]) {
                catOptions += "<option" + " id='" + printersByBrand[value][printersId] + "'>" + printersByBrand[value][printersId] + "</option>";
            }
            document.getElementById("printers").innerHTML = catOptions;
        }
    };

 
</script>

<script>
function generate() {

  var doc = new jsPDF('p', 'pt');

  var res = doc.autoTableHtmlToJson(document.getElementById("testtest"));
  
  

  var header = function(data) {
   
    doc.setFontSize(18);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
   
 doc.addImage(logoImg, 'JPEG', data.settings.margin.left, 0, 300, 70);  
   
   var e = document.getElementById("printers");
   var result = e.options[e.selectedIndex].value + " Printer Supplies";
   
    //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
  
 
    doc.text(result, data.settings.margin.left, 100);
  };
 
  var options = {
    beforePageContent: header,
    margin: {
      top: 120
    },
    
  };
  
  
 
  doc.autoTable(res.columns, res.data, options);
  var e = document.getElementById("printers");
  var resulting = e.options[e.selectedIndex].value;
  var docusave = resulting + " Printer Supply List"
  doc.save(docusave);
};
 

</script>



<br /><br />


<script>
  var t120Printer = [
  ["HP 711 38-ml Black DesignJet Ink Cartridge", "CZ129A", ".98"],
  ["HP 711 29-ml Cyan DesignJet Ink Cartridge", "CZ130A", ".92"],
  ["HP 711 29-ml Magenta DesignJet Ink Cartridge", "CZ131A", ".92"],
  ["HP 711 29-ml Yellow DesignJet Ink Cartridge", "CZ132A", ".92"],
  ["HP 711 80-ml Black DesignJet Ink Cartridge", "CZ133A", ".33"],
  ["HP 711 DesignJet Printhead Replacement Kit", "C1Q10A", "0.24"],
  ["20lb Bond Paper 24 x 150 (2 inch Core)", "B20IJ24X150", ".60"],
  ["20lb White Paper 24 x 150 (2 inch Core)", "20BIJ24150", ".10"],
  ["24lb Premium Coated Bond Paper 24 x 150 (2 inch Core)", "24IJC24150", ".20"],
  ["24lb Premium Coated Bond Paper 24 x 300 (2 inch Core)", "24IJC24300", ".47"],
  ["36lb Coated Color Bond Paper 24 x 100 (2 inch Core)", "36IJC24100", ".40"],
  ["46lb Premium Coated Color Bond Paper 24 x 100 (2 inch Core)", "46IJC24100", ".46"],
  ["Adhesive Matte Polypropylene 24 x 100 (2 inch core)", "QM-WRPPAD-24", ".48"]
  ]
  var t520Printer = [
  ["36lb Coated Color Bond Paper 24 x 100 (2 inch Core)", "36IJC24100", ".40"],
  ["46lb Premium Coated Color Bond Paper 24 x 100 (2 inch Core)", "46IJC24100", ".46"],
  ["Adhesive Matte Polypropylene 24 x 100 (2 inch core)", "QM-WRPPAD-24", ".48"]
  ]

  
  
 
 $("#printers").change(function () {
  
  
  var e = document.getElementById("printers");
   var resulting = e.options[e.selectedIndex].value;
  if (resulting == "HP DesignJet T120") {
   $('#testtest tbody tr').remove();
   var html = "";
   $.each(t120Printer, function(rowNum, row) {
        
    //console.log(rowNum, row);
   html += "<tr><td>" + row[0] + "<td>" + row[1] + "<td>" + row[2] + "</tr>";
        
   })

   $((html)).appendTo("#testtest tbody");
  }
  else if (resulting == "HP DesignJet T520"){
   $('#testtest tbody tr').remove();
   var html = "";
   $.each(t520Printer, function(rowNum, row){
    //console.log(rowNum, row);
    html += "<tr><td>" + row[0] + "<td>" + row[1] + "<td>" + row[2] + "</tr>"
   })

   $((html)).appendTo("#testtest tbody");
  }
  else{
      $('#testtest tbody tr').remove();
   //$((html)).appendTo("#div");
  }
  
 });


</script>

.empty() 在 table 动态创建时清除 tbody 元素

.empty() to clear tbody element when table dynamically created

html

javascript

jquery

jspdf