Show/Hide HTML Table Columns using SELECT option
Question
I have the attached table with a SELECT option for Viewing options(it currently does nothing)
In adition to always showing the first 5 columns, I need to Show just the "Each" columns if the user choses Each(Hide all Total columns), Show just the "Total" columns if the user choses Total(Hide all Each columns), if users choose Both, the default view is Each and Totals.
When a user clicks either option, the first Header row needs to adapt to the view of the table ie the numbers will always need to show if users choose Both/Each/Total so they know the event for each cost
https://jsfiddle.net/Snorlaxx/rfdk7utw/29/
<style>
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
text-align: left;
width: 21%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
}
#myInput1 {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 21%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
}
#myInput2 {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 21%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
}
#myInput3 {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 21%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
}
table {
width: 85%;
border-collapse: collapse;
margin:10px auto;
font-family: Arial, Helvetica, sans-serif;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #0B6FA4;
color: white;
font-size: 15px;
font-weight: bold;
text-align: centre;
padding: 2px;
border: 1px solid #ccc;
}
td{
padding: 10px;
border: 1px solid #ccc;
text-align: centre;
font-size: 15px;
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
table {
width: 100%;
}
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
/* Label the data */
content: attr(data-column);
color: #000;
font-weight: bold;
}
</Style>
<script>
function filter() {
var filter_num_package = document.getElementById("myInput").value.toUpperCase().trim();
var filter_num_nights = document.getElementById("myInput1").value.toUpperCase().trim();
var filter_num_people = document.getElementById("myInput2").value.toUpperCase().trim();
var rows = document.querySelectorAll("tr");
// First few rows are headers
for (var i = 2; i < rows.length; i++) {
var items = rows[i].querySelectorAll("td");
if (items.length === 0) continue;
var package= items[0];
var nights = items[1];
var people = items[2];
var package_text = package.innerHTML.toUpperCase().trim();
var nights_text = nights.innerHTML.toUpperCase().trim();
var people_text = people.innerHTML.toUpperCase().trim();
if (package_text.includes(filter_num_package) &&
nights_text.includes(filter_num_nights) &&
people_text.includes(filter_num_people)) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
</script>
<div align="center">
<select id="myInput" name="packages" onchange="filter()" title="Search for Package...">
<option value="" selected="selected">Select Package</option>
<option value="Bronze">Bronze</option>
<option value="Silver">Silver</option>
<option value="Gold">Gold</option>
<option value="Platinum">Platinum</option>
<option value="VIP">VIP</option>
<option value="Dearest">Dearest</option>
<option value="Once In A Lifetime">Once In A Lifetime</option>
</select>
<select id="myInput1" name="nights" onchange="filter()" title="Search for Number of Nights">
<option value="" selected="selected">Select Nights</option>
<option value="3">3 Nights</option>
<option value="4">4 Nights</option>
<option value="5">5 Nights</option>
</select>
<select id="myInput2" name="people" onchange="filter()" title="Search for number of People..">
<option value="" selected="selected">Select People</option>
<option value="1">1 Person</option>
<option value="2">2 People</option>
<option value="3">3 People</option>
<option value="4">4 People</option>
</select>
<select id="myInput3" name="view" onchange="filter()" title="Select View">
<option value="" selected="selected">Select View</option>
<option value="1">Both</option>
<option value="2">Each</option>
<option value="3">Total</option>
</select>
<table>
<thead>
<tr>
<th rowspan="2" >PACKAGE</th>
<th rowspan="2">NIGHTS</th>
<th rowspan="2">PEOPLE</th>
<th rowspan="2">RAW</th>
<th rowspan="2">SD</th>
<th colspan="2">20</th>
<th colspan="2">21</th>
<th colspan="2">22</th>
<th colspan="2">23</th>
<th colspan="2">24</th>
<th colspan="2">25</th>
<th colspan="2">26</th>
<th colspan="2">27</th>
<th colspan="2">28</th>
<th colspan="2">29</th>
<th colspan="2">30</th>
<th colspan="2">31</th>
<th colspan="2">32</th>
<th colspan="2">33</th>
<th colspan="2">34</th>
<th colspan="2">35</th>
<th colspan="2">36</th>
</tr>
<tr>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
<th>Each</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr> <td data-column="Package"> Bronze </td> <td data-column="Nights"> 3 </td> <td data-column="People"> 1 </td> <td data-column="RAW"> Not Inc </td> <td data-column="SD"> Not Inc </td> <td data-column="WM20 Each"> -- </td> <td data-column="WM20 Total"> -- </td> <td data-column="WM21 Each"> -- </td> <td data-column="WM21 Total"> -- </td> <td data-column="WM22 Each"> -- </td> <td data-column="WM22 Total"> -- </td> <td data-column="WM23 Each"> -- </td> <td data-column="WM23 Total"> -- </td> <td data-column="WM24 Each"> -- </td> <td data-column="WM24 Total"> -- </td> <td data-column="WM25 Each"> -- </td> <td data-column="WM25 Total"> -- </td> <td data-column="WM26 Each"> -- </td> <td data-column="WM26 Total"> -- </td> <td data-column="WM27 Each"> -- </td> <td data-column="WM27 Total"> -- </td> <td data-column="WM28 Each"> -- </td> <td data-column="WM28 Total"> -- </td> <td data-column="WM29 Each"> -- </td> <td data-column="WM29 Total"> -- </td> <td data-column="WM30 Each"> -- </td> <td data-column="WM30 Total"> -- </td> <td data-column="WM31 Each"> -- </td> <td data-column="WM31 Total"> -- </td> <td data-column="WM32 Each"> $1,225 </td> <td data-column="WM32 Total"> $1,225 </td> <td data-column="WM33 Each"> -- </td> <td data-column="WM33 Total"> -- </td> <td data-column="WM34 Each"> -- </td> <td data-column="WM34 Total"> -- </td> <td data-column="WM34 Total"> $2,080 </td> <td data-column="WM35 Total"> $2,080 </td> <td data-column="WM36 Each"> -- </td> <td data-column="WM36 Total"> -- </td> </tr>
<tr> <td data-column="Package"> Silver / 3 Nights </td> <td data-column="Nights"> 3 </td> <td data-column="People"> 3 </td> <td data-column="RAW"> Not Inc </td> <td data-column="SD"> Not Inc </td> <td data-column="WM20 Each"> $550 </td> <td data-column="WM20 Total"> $1,650 </td> <td data-column="WM21 Each"> $614 </td> <td data-column="WM21 Total"> $1,842 </td> <td data-column="WM22 Each"> $746 </td> <td data-column="WM22 Total"> $2,238 </td> <td data-column="WM23 Each"> $614 </td> <td data-column="WM23 Total"> $1,842 </td> <td data-column="WM24 Each"> $614 </td> <td data-column="WM24 Total"> $1,842 </td> <td data-column="WM25 Each"> $760 </td> <td data-column="WM25 Total"> $2,280 </td> <td data-column="WM26 Each"> $562 </td> <td data-column="WM26 Total"> $1,686 </td> <td data-column="WM27 Each"> $542 </td> <td data-column="WM27 Total"> $1,626 </td> <td data-column="WM28 Each"> $748 </td> <td data-column="WM28 Total"> $2,244 </td> <td data-column="WM29 Each"> $950 </td> <td data-column="WM29 Total"> $2,850 </td> <td data-column="WM30 Each"> $865 </td> <td data-column="WM30 Total"> $2,595 </td> <td data-column="WM31 Each"> $950 </td> <td data-column="WM31 Total"> $2,850 </td> <td data-column="WM32 Each"> $1,150 </td> <td data-column="WM32 Total"> $3,450 </td> <td data-column="WM33 Each"> $1,050 </td> <td data-column="WM33 Total"> $3,150 </td> <td data-column="WM34 Each"> $1,275 </td> <td data-column="WM34 Total"> $3,825 </td> <td data-column="WM34 Total"> $1,480 </td> <td data-column="WM35 Total"> $4,440 </td> <td data-column="WM36 Each"> $1,680 </td> <td data-column="WM36 Total"> $5,040 </td> </tr>
<tr> <td data-column="Package"> Gold / 4 Nights / Raw - 100 Level </td> <td data-column="Nights"> 4 </td> <td data-column="People"> 3 </td> <td data-column="RAW"> 100 Level </td> <td data-column="SD"> Not Inc </td> <td data-column="WM20 Each"> -- </td> <td data-column="WM20 Total"> -- </td> <td data-column="WM21 Each"> -- </td> <td data-column="WM21 Total"> -- </td> <td data-column="WM22 Each"> -- </td> <td data-column="WM22 Total"> -- </td> <td data-column="WM23 Each"> -- </td> <td data-column="WM23 Total"> -- </td> <td data-column="WM24 Each"> -- </td> <td data-column="WM24 Total"> -- </td> <td data-column="WM25 Each"> -- </td> <td data-column="WM25 Total"> -- </td> <td data-column="WM26 Each"> -- </td> <td data-column="WM26 Total"> -- </td> <td data-column="WM27 Each"> $894 </td> <td data-column="WM27 Total"> $2,682 </td> <td data-column="WM28 Each"> $1,233 </td> <td data-column="WM28 Total"> $3,699 </td> <td data-column="WM29 Each"> $1,765 </td> <td data-column="WM29 Total"> $5,295 </td> <td data-column="WM30 Each"> $1,385 </td> <td data-column="WM30 Total"> $4,155 </td> <td data-column="WM31 Each"> $1,400 </td> <td data-column="WM31 Total"> $4,200 </td> <td data-column="WM32 Each"> $1,475 </td> <td data-column="WM32 Total"> $4,425 </td> <td data-column="WM33 Each"> $1,675 </td> <td data-column="WM33 Total"> $5,025 </td> <td data-column="WM34 Each"> $1,800 </td> <td data-column="WM34 Total"> $5,400 </td> <td data-column="WM34 Total"> $2,050 </td> <td data-column="WM35 Total"> $6,150 </td> <td data-column="WM36 Each"> $2,310 </td> <td data-column="WM36 Total"> $6,930 </td> </tr>
</tbody>
</tr>
</table>
</div>
1 answers
solution1
1 ACCPTED 2020-11-10 06:23:10
As on change of view select-box whole structure of table will get change so it would be good to create different function for same.
Explanation :
In below code inside filter1 function first i have check if value of select-box is not BOTH or Select View if yes i have first hide all td which is greater then 4 because according to your html structure changes(hide or show) need to be done after 4th column.Then, i have loop through 2nd tr using $("table tr:eq(1) th ").each(.. as index start from 0 so that's why tr:eq(1) .
If the value inside th matches with view select then show that th then using class which i have added in your html structure ie : class="21"..etc i have removed colspan from that th .Now , to show only td which has data-column="selectvalue" use $("tr td[data-column*=" + $(this).text() + "]").show() . I have added comments to code so it would be easy to understand.
Demo Code :
function filter() { var filter_num_package = document.getElementById("myInput").value.toUpperCase().trim(); var filter_num_nights = document.getElementById("myInput1").value.toUpperCase().trim(); var filter_num_people = document.getElementById("myInput2").value.toUpperCase().trim(); //loop through tr $(" tbody tr").each(function() { //get td value 0,1,2 var first_td = $(this).find("td:eq(0)").text().toUpperCase().trim() var second_td = $(this).find("td:eq(1)").text().toUpperCase().trim() var third_td = $(this).find("td:eq(2)").text().toUpperCase().trim() //check if value matches if (first_td.includes(filter_num_package) && second_td.includes(filter_num_nights) && third_td.includes(filter_num_people)) { //display that row $(this).css("display", ""); } else { //hide that row $(this).css("display", "none"); } }) } function filter1() { //get value of last select var values = document.getElementById("myInput3").value.toUpperCase().trim(); //check if value is not both or first option if (values != "BOTH" && values != "") { //hide all td which are greater then 4 $("tr").find("td:gt(4)").hide() //loop through second tr > th $("table tr:eq(1) th ").each(function() { //check if the text is equal to selct value if ($(this).text().toUpperCase().trim() === values) { //show that th $(this).show(); //get class 21,22..etc var class_to_hide = $(this).attr('class'); //check th has value 21,22..etc remove colspan $("tr").find("th:contains(" + class_to_hide + ")").attr("colspan", "") //check td which has select option $("tr td[data-column*=" + $(this).text() + "]").show() } else { //hide the th $(this).hide(); } }) } else { //show 2nd tr > ths $("table tr:eq(1) th ").show() //show all td which is > 4 $("tr").find("td:gt(4)").show() //add colspan again $("tr:eq(0)").find("th:gt(4)").attr("colspan", "2") } }
#myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; text-align: left; width: 21%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; } #myInput1 { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 21%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; } #myInput2 { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 21%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; } #myInput3 { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 21%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; } table { width: 85%; border-collapse: collapse; margin: 10px auto; font-family: Arial, Helvetica, sans-serif; } /* Zebra striping */ tr:nth-of-type(odd) { background: #eee; } th { background: #0B6FA4; color: white; font-size: 15px; font-weight: bold; text-align: centre; padding: 2px; border: 1px solid #ccc; } td { padding: 10px; border: 1px solid #ccc; text-align: centre; font-size: 15px; } /* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { table { width: 100%; } /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; /* Label the data */ content: attr(data-column); color: #000; font-weight: bold; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div align="center"> <select id="myInput" name="packages" onchange="filter()" title="Search for Package..."> <option value="" selected="selected">Select Package</option> <option value="Bronze">Bronze</option> <option value="Silver">Silver</option> <option value="Gold">Gold</option> <option value="Platinum">Platinum</option> <option value="VIP">VIP</option> <option value="Dearest">Dearest</option> <option value="Once In A Lifetime">Once In A Lifetime</option> </select> <select id="myInput1" name="nights" onchange="filter()" title="Search for Number of Nights"> <option value="" selected="selected">Select Nights</option> <option value="3">3 Nights</option> <option value="4">4 Nights</option> <option value="5">5 Nights</option> </select> <select id="myInput2" name="people" onchange="filter()" title="Search for number of People.."> <option value="" selected="selected">Select People</option> <option value="1">1 Person</option> <option value="2">2 People</option> <option value="3">3 People</option> <option value="4">4 People</option> </select> <select id="myInput3" name="view" onchange="filter1()" title="Select View"> <option value="" selected="selected">Select View</option> <option value="Both">Both</option> <option value="Each">Each</option> <option value="Total">Total</option> </select> <table id="mytab1"> <thead> <tr> <th rowspan="2">PACKAGE</th> <th rowspan="2">NIGHTS</th> <th rowspan="2">PEOPLE</th> <th rowspan="2">RAW</th> <th rowspan="2">SD</th> <th colspan="2">20</th> <th colspan="2">21</th> <th colspan="2">22</th> <th colspan="2">23</th> <th colspan="2">24</th> <th colspan="2">25</th> <th colspan="2">26</th> <th colspan="2">27</th> <th colspan="2">28</th> <th colspan="2">29</th> <th colspan="2">30</th> <th colspan="2">31</th> <th colspan="2">32</th> <th colspan="2">33</th> <th colspan="2">34</th> <th colspan="2">35</th> <th colspan="2">36</th> </tr> <tr> <!-- added class here--> <th class="20">Each</th> <th class="20">Total</th> <th class="21">Each</th> <th class="21">Total</th> <th class="22">Each</th> <th class="22">Total</th> <th class="23">Each</th> <th class="23">Total</th> <th class="24">Each</th> <th class="24">Total</th> <th class="25">Each</th> <th class="25">Total</th> <th class="26">Each</th> <th class="26">Total</th> <th class="27">Each</th> <th class="27">Total</th> <th class="28">Each</th> <th class="28">Total</th> <th class="29">Each</th> <th class="29">Total</th> <th class="30">Each</th> <th class="30">Total</th> <th class="31">Each</th> <th class="31">Total</th> <th class="32">Each</th> <th class="32">Total</th> <th class="33">Each</th> <th class="33">Total</th> <th class="34">Each</th> <th class="34">Total</th> <th class="35">Each</th> <th class="35">Total</th> <th class="36">Each</th> <th class="36">Total</th> </tr> </thead> <tbody> <tr> <td data-column="Package"> Bronze </td> <td data-column="Nights"> 3 </td> <td data-column="People"> 1 </td> <td data-column="RAW"> Not Inc </td> <td data-column="SD"> Not Inc </td> <td data-column="WM20 Each"> -- </td> <td data-column="WM20 Total"> -- </td> <td data-column="WM21 Each"> -- </td> <td data-column="WM21 Total"> -- </td> <td data-column="WM22 Each"> -- </td> <td data-column="WM22 Total"> -- </td> <td data-column="WM23 Each"> -- </td> <td data-column="WM23 Total"> -- </td> <td data-column="WM24 Each"> -- </td> <td data-column="WM24 Total"> -- </td> <td data-column="WM25 Each"> -- </td> <td data-column="WM25 Total"> -- </td> <td data-column="WM26 Each"> -- </td> <td data-column="WM26 Total"> -- </td> <td data-column="WM27 Each"> -- </td> <td data-column="WM27 Total"> -- </td> <td data-column="WM28 Each"> -- </td> <td data-column="WM28 Total"> -- </td> <td data-column="WM29 Each"> -- </td> <td data-column="WM29 Total"> -- </td> <td data-column="WM30 Each"> -- </td> <td data-column="WM30 Total"> -- </td> <td data-column="WM31 Each"> -- </td> <td data-column="WM31 Total"> -- </td> <td data-column="WM32 Each"> $1,225 </td> <td data-column="WM32 Total"> $1,225 </td> <td data-column="WM33 Each"> -- </td> <td data-column="WM33 Total"> -- </td> <td data-column="WM34 Each"> -- </td> <td data-column="WM34 Total"> -- </td> <td data-column="WM34 Each"> $2,080 </td> <td data-column="WM35 Total"> $2,080 </td> <td data-column="WM36 Each"> -- </td> <td data-column="WM36 Total"> -- </td> </tr> <tr> <td data-column="Package"> Silver / 3 Nights </td> <td data-column="Nights"> 3 </td> <td data-column="People"> 3 </td> <td data-column="RAW"> Not Inc </td> <td data-column="SD"> Not Inc </td> <td data-column="WM20 Each"> $550 </td> <td data-column="WM20 Total"> $1,650 </td> <td data-column="WM21 Each"> $614 </td> <td data-column="WM21 Total"> $1,842 </td> <td data-column="WM22 Each"> $746 </td> <td data-column="WM22 Total"> $2,238 </td> <td data-column="WM23 Each"> $614 </td> <td data-column="WM23 Total"> $1,842 </td> <td data-column="WM24 Each"> $614 </td> <td data-column="WM24 Total"> $1,842 </td> <td data-column="WM25 Each"> $760 </td> <td data-column="WM25 Total"> $2,280 </td> <td data-column="WM26 Each"> $562 </td> <td data-column="WM26 Total"> $1,686 </td> <td data-column="WM27 Each"> $542 </td> <td data-column="WM27 Total"> $1,626 </td> <td data-column="WM28 Each"> $748 </td> <td data-column="WM28 Total"> $2,244 </td> <td data-column="WM29 Each"> $950 </td> <td data-column="WM29 Total"> $2,850 </td> <td data-column="WM30 Each"> $865 </td> <td data-column="WM30 Total"> $2,595 </td> <td data-column="WM31 Each"> $950 </td> <td data-column="WM31 Total"> $2,850 </td> <td data-column="WM32 Each"> $1,150 </td> <td data-column="WM32 Total"> $3,450 </td> <td data-column="WM33 Each"> $1,050 </td> <td data-column="WM33 Total"> $3,150 </td> <td data-column="WM34 Each"> $1,275 </td> <td data-column="WM34 Total"> $3,825 </td> <td data-column="WM34 Each"> $1,480 </td> <td data-column="WM35 Total"> $4,440 </td> <td data-column="WM36 Each"> $1,680 </td> <td data-column="WM36 Total"> $5,040 </td> </tr> <tr> <td data-column="Package"> Gold / 4 Nights / Raw - 100 Level </td> <td data-column="Nights"> 4 </td> <td data-column="People"> 3 </td> <td data-column="RAW"> 100 Level </td> <td data-column="SD"> Not Inc </td> <td data-column="WM20 Each"> -- </td> <td data-column="WM20 Total"> -- </td> <td data-column="WM21 Each"> -- </td> <td data-column="WM21 Total"> -- </td> <td data-column="WM22 Each"> -- </td> <td data-column="WM22 Total"> -- </td> <td data-column="WM23 Each"> -- </td> <td data-column="WM23 Total"> -- </td> <td data-column="WM24 Each"> -- </td> <td data-column="WM24 Total"> -- </td> <td data-column="WM25 Each"> -- </td> <td data-column="WM25 Total"> -- </td> <td data-column="WM26 Each"> -- </td> <td data-column="WM26 Total"> -- </td> <td data-column="WM27 Each"> $894 </td> <td data-column="WM27 Total"> $2,682 </td> <td data-column="WM28 Each"> $1,233 </td> <td data-column="WM28 Total"> $3,699 </td> <td data-column="WM29 Each"> $1,765 </td> <td data-column="WM29 Total"> $5,295 </td> <td data-column="WM30 Each"> $1,385 </td> <td data-column="WM30 Total"> $4,155 </td> <td data-column="WM31 Each"> $1,400 </td> <td data-column="WM31 Total"> $4,200 </td> <td data-column="WM32 Each"> $1,475 </td> <td data-column="WM32 Total"> $4,425 </td> <td data-column="WM33 Each"> $1,675 </td> <td data-column="WM33 Total"> $5,025 </td> <td data-column="WM34 Each"> $1,800 </td> <td data-column="WM34 Each"> $5,400 </td> <td data-column="WM34 Total"> $2,050 </td> <td data-column="WM35 Total"> $6,150 </td> <td data-column="WM36 Each"> $2,310 </td> <td data-column="WM36 Total"> $6,930 </td> </tr> </tbody> </table> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
show/hide html table columns using css
Hide and show html table columns
on option select, show/hide table row
on option select, show/hide table row and sort
JavaScript to hide and show form using select option
Select “Option” Div Hide/Show using JQuery
Radio buttons to show/hide html table columns
how hide and show in html element by click select option
show / hide table columns using jQuery
multiple select option with one #id to show n hide table
Related Tags