使用 SELECT 选项显示/隐藏 HTML 表格列
[英]Show/Hide HTML Table Columns using SELECT option
问题描述
I have the attached table with a SELECT option for Viewing options(it currently does nothing)
我有一个附表，其中有一个用于查看选项的 SELECT 选项（它目前什么都不做）
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.除了始终显示前 5 列之外，如果用户选择每个（隐藏所有总计列），我需要仅显示“每个”列，如果用户选择总计（隐藏所有每列），则仅显示“总计”列，如果用户选择两者，则默认视图为每个和总计。
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/ 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 个解决方案
解决方案1
1 已采纳 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.由于view选择框的变化，表格的整个结构都会发生变化，因此最好为相同的功能创建不同的功能。
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) .在filter1函数中的以下代码中，我首先检查选择框的值是否不是BOTH或Select View如果是，我首先隐藏所有大于4 td因为根据您的 html 结构更改（隐藏或显示）需要在4th之后完成。然后，我使用$("table tr:eq(1) th ").each(..作为索引从0开始循环遍历2nd tr，这就是为什么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() .如果内部的值th火柴view选择然后显示th然后使用class我在HTML结构即添加了： class="21"..etc我已删除colspan从th 。现在，以只显示其具有TD data-column="selectvalue"使用$("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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用css显示/隐藏html表列 - show/hide html table columns using css
隐藏和显示 html 表列 - Hide and show html table columns
选项选择，显示/隐藏表格行 - on option select, show/hide table row
在选项选择上，显示/隐藏表行并排序 - on option select, show/hide table row and sort
JavaScript 使用选择选项隐藏和显示表单 - JavaScript to hide and show form using select option
使用“ jQuery”选择“选项” Div隐藏/显示 - Select “Option” Div Hide/Show using JQuery
显示/隐藏html表格列的单选按钮 - Radio buttons to show/hide html table columns
如何通过单击选择选项在html元素中隐藏和显示 - how hide and show in html element by click select option
使用 jQuery 显示/隐藏表列 - show / hide table columns using jQuery
一个#id的多重选择选项以显示n个隐藏表 - multiple select option with one #id to show n hide table
相关标签