堆棧內存溢出
  簡體   English   中英

使用 SELECT 選項顯示/隱藏 HTML 表格列

[英]Show/Hide HTML Table Columns using SELECT option

 原文  2020-11-08 23:18:04  5   1    javascript/ html/ css

問題描述

我有一個附表，其中有一個用於查看選項的 SELECT 選項（它目前什么都不做）

除了始終顯示前 5 列之外，如果用戶選擇每個（隱藏所有總計列），我需要僅顯示“每個”列，如果用戶選擇總計（隱藏所有每列），則僅顯示“總計”列，如果用戶選擇兩者，則默認視圖為每個和總計。

當用戶單擊任一選項時，第一個標題行需要適應表格的視圖，即如果用戶選擇兩者/每個/總計，則數字將始終需要顯示，以便他們知道每個成本的事件

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

由於view選擇框的變化，表格的整個結構都會發生變化，因此最好為相同的功能創建不同的功能。

說明：

在filter1函數中的以下代碼中，我首先檢查選擇框的值是否不是BOTH或Select View如果是，我首先隱藏所有大於4 td因為根據您的 html 結構更改（隱藏或顯示）需要在4th之后完成。然后，我使用$("table tr:eq(1) th ").each(..作為索引從0開始循環遍歷2nd tr，這就是為什么tr:eq(1) 。

如果內部的值th火柴view選擇然后顯示th然后使用class我在HTML結構即添加了： class="21"..etc我已刪除colspan從th 。現在，以只顯示其具有TD data-column="selectvalue"使用$("tr td[data-column*=" + $(this).text() + "]").show() 。 我在代碼中添加了注釋，以便於理解。

演示代碼： 

 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表列 隱藏和顯示 html 表列 選項選擇，顯示/隱藏表格行 在選項選擇上，顯示/隱藏表行並排序 JavaScript 使用選擇選項隱藏和顯示表單 使用“ jQuery”選擇“選項” Div隱藏/顯示 顯示/隱藏html表格列的單選按鈕 如何通過單擊選擇選項在html元素中隱藏和顯示 使用 jQuery 顯示/隱藏表列 一個#id的多重選擇選項以顯示n個隱藏表
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM