Saya membuat daftar drop-down untuk membantu orang memilih media dan tinta untuk printer mereka dan kemudian membuat tabel untuk melihat hasilnya. Saya telah mencapai titik di mana tabel dihasilkan dan dapat diunduh sebagai PDF menggunakan jspdf, tetapi masalahnya muncul ketika Anda memilih printer yang berbeda. Sepertinya saya tidak dapat menemukan cara untuk menghapus elemen tubuh terlebih dahulu kemudian mengisi tubuh dengan media dan tinta.

Saya telah melakukan riset dan menemukan bahwa menggunakan .empty() berfungsi untuk menghapus tbody atau div yang memiliki kode di dalamnya. Saya tidak dapat menemukan cara agar .empty terjadi terlebih dahulu dan kemudian .each mengisi tabel.

Ketika drop down diubah dan printer dipilih, tabel terisi dengan sempurna. Anda kemudian dapat menggunakan tombol unduh untuk mendapatkan pdf dari informasi tabel. Masalahnya adalah ketika Anda memilih printer kedua, tabel hanya mengisi daftar di atas yang sebelumnya. .empty() tidak berfungsi terlebih dahulu atau sama sekali.

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>

Berikut adalah biola untuk membantu menunjukkan masalah yang saya alami: https://jsfiddle.net/gza92s5j/

1
questilar 19 September 2019, 19:04

1 menjawab

Jawaban Terbaik

Coba .remove()

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

Ubah wrt ke kode Anda yang ada:

$('#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");

Saya telah memperbarui kode Anda dengan ini dan berhasil.

<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>
1
rprakash 19 September 2019, 17:22