GDC Training Portal

Select Table Box

Function


Select the drop-down menu and choose a class, the corresponding table will displays in the below.
当选择不同的下拉选项时,下面展示的表格也会随之改变。


Example Display

ยี่ห้อรถยนต์
ใบปัดน้ำฝน สำหรับรถแต่ละแบรนด์
ใบปัดน้ำฝน สำหรับ Chevrolet
ยี่ห้อรถยนต์ รุ่นรถยนต์ ปีรถยนต์ ใบปัดน้ำฝนฝั่งด้านคนขับ ใบปัดน้ำฝนฝั่งผู้โดยสาร ใบปัดนน้ำฝนรุ่นซิลิโคน ฝบปัดน้ำฝนรุ่ก้านแสตนเลส
Chevrolet Cruze 2011-2013 24 18 Y Y
Optra 22 19 Y Y
Aveo 24 14 Y Y
Trailbazer 2012-2013 22 18 N N
Captiva 2012-2013 24 16 Y Y
Zafira 24 24 Y Y
Colorado 22 19 Y Y
ยี่ห้อรถยนต์ รุ่นรถยนต์ ปีรถยนต์ ใบปัดน้ำฝนฝั่งด้านคนขับ ใบปัดน้ำฝนฝั่งผู้โดยสาร ใบปัดนน้ำฝนรุ่นซิลิโคน ฝบปัดน้ำฝนรุ่ก้านแสตนเลส
Isuzu Dmax V-Cross '12 22 18 Y Y
D-Max 4 ประตู 21 19 Y Y
D-Max 2 ประตู 21 19 Y Y
ยี่ห้อรถยนต์ รุ่นรถยนต์ ปีรถยนต์ ใบปัดน้ำฝนฝั่งด้านคนขับ ใบปัดน้ำฝนฝั่งผู้โดยสาร ใบปัดนน้ำฝนรุ่นซิลิโคน ฝบปัดน้ำฝนรุ่ก้านแสตนเลส
Nissan Teana 2009 - 2012 26 18 Y Y
Teana 2004 - 2008 24 19 Y Y
Tiida 24 16 Y Y
Almera 2012 - 2013 22 16 Y Y
March 2010 - 2013 22 14 Y Y
Juke 2011 - ปัจจุบัน 23 14 Y Y
X-Trail 2015 - ปัจจุบัน 26 17 Y Y
Navara 2014 - ปัจจุบัน 24 18 Y Y
ยี่ห้อรถยนต์ รุ่นรถยนต์ ปีรถยนต์ ใบปัดน้ำฝนฝั่งด้านคนขับ ใบปัดน้ำฝนฝั่งผู้โดยสาร ใบปัดนน้ำฝนรุ่นซิลิโคน ฝบปัดน้ำฝนรุ่ก้านแสตนเลส
Mitsubishi Mirage 2012 - 2013 22 14 Y Y
Lancer EX 2010 - 2013 26 18 Y Y
Lancer Cedia 24 18 Y Y
Pajero Sport 2009 22 19 Y Y
New Pajero Sport 2015 - ปัจจุบัน 22 18 N N
Triton 21 19 Y Y
ยี่ห้อรถยนต์ รุ่นรถยนต์ ปีรถยนต์ ใบปัดน้ำฝนฝั่งด้านคนขับ ใบปัดน้ำฝนฝั่งผู้โดยสาร ใบปัดนน้ำฝนรุ่นซิลิโคน ฝบปัดน้ำฝนรุ่ก้านแสตนเลส
Suzuki Swift 2007 - 2011 21 18 Y Y
Swift 2012 - 2013 22 18 Y Y
ยี่ห้อรถยนต์ รุ่นรถยนต์ ปีรถยนต์ ใบปัดน้ำฝนฝั่งด้านคนขับ ใบปัดน้ำฝนฝั่งผู้โดยสาร ใบปัดนน้ำฝนรุ่นซิลิโคน ฝบปัดน้ำฝนรุ่ก้านแสตนเลส
Mazda 2 2009 - 2013 24 14 Y Y
New Mazda 2 Skyactiv 2015 - ปัจจุบัน 22 17 Y Y
New Mazda 3 Skyactiv 2015 - ปัจจุบัน 24 18 Y Y
3 (3 ประตู) 22 19 Y Y
4 (4 ประตู) 22 19 Y Y
3 2011 - 2013 24 19 Y Y
CX-3 2015 - ปัจจุบัน 22 18 Y Y
CX-5 2015 - ปัจจุบัน 24 18 Y Y
BT-50 24 16 N N
ยี่ห้อรถยนต์ รุ่นรถยนต์ ปีรถยนต์ ใบปัดน้ำฝนฝั่งด้านคนขับ ใบปัดน้ำฝนฝั่งผู้โดยสาร ใบปัดนน้ำฝนรุ่นซิลิโคน ฝบปัดน้ำฝนรุ่ก้านแสตนเลส
Ford Focus 2007 - 2011 26 17 N N
Focus 2004 - 2006 26 17 N N
Fiesta 26 16 N N
Ranger '12 21 19 N N
Ranger '06 18 18 N N
ยี่ห้อรถยนต์ รุ่นรถยนต์ ปีรถยนต์ ใบปัดน้ำฝนฝั่งด้านคนขับ ใบปัดน้ำฝนฝั่งผู้โดยสาร ใบปัดนน้ำฝนรุ่นซิลิโคน ฝบปัดน้ำฝนรุ่ก้านแสตนเลส
Honda CRV 2012 - ปัจจุบัน 26 16 Y Y
CRV 2010 26 17 Y Y
CRV 2008 26 17 Y Y
Accord 2012 - ปัจจุบัน 26 19 Y Y
Accord 2008-2011 26 19 Y Y
Accord 2003-2007 26 18 Y Y
Civic FC 2016 - ปัจจุบัน 26 18 Y Y
Civic FB 2012-2015 26 24 Y Y
Civic FD 2006-2011 26 24 Y N
Civic ES Dimension 2001-2003 20 18 Y Y
City 2014 - ปัจจุบัน 24 14 Y Y
City 2009-2012 24 14 Y Y
City ZX 2005-2008 26 14 Y Y
City Type Z 1999-2002 24 14 Y Y
Jazz 2014 - ปัจจุบัน 24 14 Y Y
Jazz GE 2008-2012 24 14 Y Y
Jazz GD 2004-2007 24 14 Y Y
B-RV 2016 - ปัจจุบัน 22 14 Y Y
Mobilio 2014 22 14 Y Y
Freed 2010 - ปัจจุบัน 26 14 Y Y
HRV 2014 - ปัจจุบัน 26 16 Y Y
ยี่ห้อรถยนต์ รุ่นรถยนต์ ปีรถยนต์ ใบปัดน้ำฝนฝั่งด้านคนขับ ใบปัดน้ำฝนฝั่งผู้โดยสาร ใบปัดนน้ำฝนรุ่นซิลิโคน ฝบปัดน้ำฝนรุ่ก้านแสตนเลส
Toyota Camry 2012 - ปัจจุบัน 26 18 Y Y
Camry 2007 - 2011 24 20 Y Y
Camry 2003 - 2006 24 19 Y Y
Prius 2011 - 2013 26 16 Y Y
Wish 2008 26 14 Y Y
Innova '10 2010 24 16 Y Y
Sienta 2016 - ปัจจุบัน 26 14 N N
Altis 2014 - ปัจจุบัน 26 14 Y Y
Altis 2008 - 2011 26 14 Y Y
Altis 2001 - 2006 24 16 Y Y
Vios 2002 - 2005 21 14 Y Y
Vios 2006 21 14 Y Y
Vios 2007 - 2012 21 14 Y Y
Vios 2013 - ปัจจุบัน 24 14 Y Y
Yaris 2014 - ปัจจุบัน 24 14 Y Y
Yaris 2006 - 2012 24 14 Y Y
Fortuner 2008 - 2015 21 19 Y Y
Fortuner 2015 - ปัจจุบัน 22 16 Y Y
Vigo 2015 - ปัจจุบัน 20 18 Y Y

How to use?

  • Steps

    1. Add rC-58-HTML to page. / 在网页内添加rC-58-HTML这个DPL

    2. Copy below HTML code. / 将下方的代码复制到DPL的Content内

    3. Set options value (Table_1- Table_N). / 设置每个下拉选项option的value值(例如:table_1 - table_N)

    4. Make content for each table, and use the options' value as id for each one. / 为table添加内容,并将上一步设置好的value值一一对应,设置为每个table的ID值

    5. Alter the style as local request. / 根据当地的不同需求调整该DPL的整体样式

HTML CODE:

<style type="text/css">
.tableContainer td{text-align: center;}
.MMM--bgColor_20{font-weight:bold;}
.tableContainer table {display: none;}
.MMM--Select-Input{width:18%;}
.MMM-title{font-size:14px;font-weight: bold;}
.selectContainer{width:26%;}
.MMM--fancyDropDiv {margin-left: 50px;} 
td{border-right: 2px solid #fff;}
</style>
<form action="" class="centered MMM--gapTop">
<div class="selectContainer">
<div class="MMM--filterLabel MMM--LabelPrimary MMM--txt_italic">Title</div>
 <div class="MMM--fancyDropDiv js-fancyDropDiv">
 <select id="brand" class="MMM--selectInput subValCheck js-formoptions js-fancyDropDown MMM--isVisuallyHidden">
    <!--1. Update the option -->
    <option selected>Select options</option>
          <option value="Table1">Table1</option>
          <option value="Table2">Table2</option>
          <option value="Table3">Table3</option>
          <option value="Table4">Table4</option>
          <option value="Table5">Table5</option>
          <option value="Table6">Table6</option>
          <option value="Table7">Table7</option>
  </select>
</div>
</div>
</form>
<div class="tableContainer MMM--gapTop">
  <!--2. Update the corresponding table content -->
  <table frame="box" id="Table1" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table1 content  -->
    <tr><td>Table1</td></tr>
  </table>
  <table frame="box" id="Table2" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table2 content  -->
    <tr><td>Table2</td></tr>
  </table>
  <table frame="box" id="Table3" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table3 content  --> 
    <tr><td>Table3</td></tr>
  </table>
  <table frame="box" id="Table4" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table4 content  -->
    <tr><td>Table4</td></tr> 
  </table>
  <table frame="box" id="Table5" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table5 content  --> 
    <tr><td>Table5</td></tr>
  </table>
  <table frame="box" id="Table6" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table6 content  --> 
    <tr><td>Table6</td></tr>
  </table>
  <table frame="box" id="Table7" class="MMM--table MMM--Border" style="border-collapse:collapse;line-height:35px;margin:auto;width:100%;">
    <!--Table7 content  --> 
    <tr><td>Table7</td></tr>
  </table>
</div>
<script>
domReady.changeTable = function(){
  $("#brand").change(function(){
    var tableId = $("#brand").val();
    //alert (tableId);
    $(".tableContainer > table").hide();
    $("#"+tableId).show();
  })
}
</script>

更改地区
中国大陆 - 中文