.empty（）在动态创建表时清除tbody元素

时间：2019-09-19 16:04:38

标签： javascript jquery html jspdf

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

我进行了一些研究，发现使用.empty（）可以清除内部有代码的tbody或div。我无法弄清楚先出现.empty然后再填充.each的方法。

更改下拉列表并选择打印机后，表格将完美填充。然后，您可以使用下载按钮获取表格信息的pdf。问题是，当您选择第二台打印机时，该表只会填充上一台打印机的列表。 .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", "$35.98"],
  ["HP 711 29-ml Cyan DesignJet Ink Cartridge", "CZ130A", "$29.92"],
  ["HP 711 29-ml Magenta DesignJet Ink Cartridge", "CZ131A", "$29.92"],
  ["HP 711 29-ml Yellow DesignJet Ink Cartridge", "CZ132A", "$29.92"],
  ["HP 711 80-ml Black DesignJet Ink Cartridge", "CZ133A", "$58.33"],
  ["HP 711 DesignJet Printhead Replacement Kit", "C1Q10A", "$220.24"],
  ["20lb Bond Paper 24 x 150 (2 inch Core)", "B20IJ24X150", "$9.60"],
  ["20lb White Paper 24 x 150 (2 inch Core)", "20BIJ24150", "$9.10"],
  ["24lb Premium Coated Bond Paper 24 x 150 (2 inch Core)", "24IJC24150", "$19.20"],
  ["24lb Premium Coated Bond Paper 24 x 300 (2 inch Core)", "24IJC24300", "$34.47"],
  ["36lb Coated Color Bond Paper 24 x 100 (2 inch Core)", "36IJC24100", "$23.40"],
  ["46lb Premium Coated Color Bond Paper 24 x 100 (2 inch Core)", "46IJC24100", "$33.46"],
  ["Adhesive Matte Polypropylene 24 x 100 (2 inch core)", "QM-WRPPAD-24", "$60.48"]
]
var t520Printer = [
  ["36lb Coated Color Bond Paper 24 x 100 (2 inch Core)", "36IJC24100", "$23.40"],
  ["46lb Premium Coated Color Bond Paper 24 x 100 (2 inch Core)", "46IJC24100", "$33.46"],
  ["Adhesive Matte Polypropylene 24 x 100 (2 inch core)", "QM-WRPPAD-24", "$60.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>

以下是用来帮助展示我遇到的问题的小提琴：https://jsfiddle.net/gza92s5j/

1 个答案:

答案 0 :(得分：1)

尝试.remove() 

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

将wrt更改为您现有的代码：

$('#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", "$35.98"],
		["HP 711 29-ml Cyan DesignJet Ink Cartridge", "CZ130A", "$29.92"],
		["HP 711 29-ml Magenta DesignJet Ink Cartridge", "CZ131A", "$29.92"],
		["HP 711 29-ml Yellow DesignJet Ink Cartridge", "CZ132A", "$29.92"],
		["HP 711 80-ml Black DesignJet Ink Cartridge", "CZ133A", "$58.33"],
		["HP 711 DesignJet Printhead Replacement Kit", "C1Q10A", "$220.24"],
		["20lb Bond Paper 24 x 150 (2 inch Core)", "B20IJ24X150", "$9.60"],
		["20lb White Paper 24 x 150 (2 inch Core)", "20BIJ24150", "$9.10"],
		["24lb Premium Coated Bond Paper 24 x 150 (2 inch Core)", "24IJC24150", "$19.20"],
		["24lb Premium Coated Bond Paper 24 x 300 (2 inch Core)", "24IJC24300", "$34.47"],
		["36lb Coated Color Bond Paper 24 x 100 (2 inch Core)", "36IJC24100", "$23.40"],
		["46lb Premium Coated Color Bond Paper 24 x 100 (2 inch Core)", "46IJC24100", "$33.46"],
		["Adhesive Matte Polypropylene 24 x 100 (2 inch core)", "QM-WRPPAD-24", "$60.48"]
	 ]
	 var t520Printer = [
		["36lb Coated Color Bond Paper 24 x 100 (2 inch Core)", "36IJC24100", "$23.40"],
		["46lb Premium Coated Color Bond Paper 24 x 100 (2 inch Core)", "46IJC24100", "$33.46"],
		["Adhesive Matte Polypropylene 24 x 100 (2 inch core)", "QM-WRPPAD-24", "$60.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>

相关问题
最新问题