第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用按鈕切換表格

使用按鈕切換表格

三國紛爭 2021-10-07 10:45:17
所以目前我已經(jīng)制作了 2 個表格，其中包含信息。但我想這樣做，當(dāng)用戶打開 html 文檔時，它只顯示 1 個表，您可以在不同的表之間切換。當(dāng)我單擊表 1 的按鈕時，它會隱藏表 2，當(dāng)我單擊表 2 的按鈕時，它會隱藏表 1。function myFunction() {  var x = document.getElementById("Tables");  if (x.style.display === "none") {    x.style.display = "block";  } else {    x.style.display = "none";  }}function myFunction1() {  var x = document.getElementById("Tables1");  if (x.style.display === "none") {    x.style.display = "block";  } else {    x.style.display = "none";  }}#Tables {  width: 100%;  padding: 50px 0;  text-align: center;  background-color: blue;  margin-top: 20px;}#Tables1 {  width: 100%;  padding: 50px 0;  text-align: center;  background-color: Purple;  margin-top: 20px;}table {  font-family: arial, sans-serif;  border-collapse: collapse;  width: 100%;}td,th {  border: 1px solid #dddddd;  text-align: left;  padding: 8px;}tr:nth-child(even) {  background-color: #dddddd;}<button onclick="myFunction()">Click!</button> <button onclick="myFunction1()">Click!</button><div id="Tables">  <table>    <tr>      <th>Cost</th>      <th>Name</th>      <th>Country</th>    </tr>    <tr>      <td>Price</td>      <td>Names</td>      <td>Place</td>    </tr>  </table></div><div id="Tables1">  <table>    <tr>      <th>Cost</th>      <th>Name</th>      <th>Country</th>    </tr>    <tr>      <td>Price</td>      <td>Names</td>      <td>Place</td>    </tr>  </table></div>
查看完整描述

3 回答

?
SMILET

TA貢獻(xiàn)1796條經(jīng)驗 獲得超4個贊

使用單個選擇。并給你想要隱藏的表隱藏的屬性并使用下面給出的javascript



 function myFunction() {

      var tables = document.getElementsByClassName("toggletable");

      var targetval = document.getElementById("select").value;

      for(var i = 0; i < tables.length; i++){

        if(targetval == i + 1){

            tables[i].removeAttribute("hidden");

        }else{

            tables[i].setAttribute("hidden", true);

        }

      }

    }

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

#Tables {

  width: 100%;

  padding: 50px 0;

  text-align: center;

  background-color: blue;

  margin-top: 20px;

}

#Tables1 {

  width: 100%;

  padding: 50px 0;

  text-align: center;

  background-color: Purple;

  margin-top: 20px;

}


table {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: 100%;

}


td, th {

  border: 1px solid #dddddd;

  text-align: left;

  padding: 8px;

}


tr:nth-child(even) {

  background-color: #dddddd;

}

</style>

</head>

<body>

<select id="select" onchange="myFunction()">

    <option value="1" >Table 1</option>

    <option value="2">Table 2</option>

    <option value="3">Table 3</option>

    <option value="4">Table 4</option>

    <option value="5">Table 5</option>

</select>



<div id="Tables" class="toggletable">

<table>

  <tr>

    <th>Cost</th>

    <th>Name</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Price1</td>

    <td>Names1</td>

    <td>Place1</td>

  </tr>

</table>

</div>


<div id="Tables1" class="toggletable" hidden>

<table>

  <tr>

    <th>Cost</th>

    <th>Name</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Price2</td>

    <td>Names2</td>

    <td>Place2</td>

  </tr>

</table>

</div>


<div class="toggletable" hidden>

<table>

  <tr>

    <th>Cost</th>

    <th>Name</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Price3</td>

    <td>Names3</td>

    <td>Place3</td>

  </tr>

</table>

</div>


<div class="toggletable" hidden>

<table>

  <tr>

    <th>Cost</th>

    <th>Name</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Price4</td>

    <td>Names4</td>

    <td>Place4</td>

  </tr>

</table>

</div>


<div class="toggletable" hidden>

<table>

  <tr>

    <th>Cost</th>

    <th>Name</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Price5</td>

    <td>Names5</td>

    <td>Place5</td>

  </tr>

</table>

</div>


<script>

function myFunction() {

  var tables = document.getElementsByClassName("toggletable");

  var targetval = document.getElementById("select").value;

  for(var i = 0; i < tables.length; i++){

    if(targetval == i + 1){

        tables[i].removeAttribute("hidden");

    }else{

        tables[i].setAttribute("hidden", true);

    }

  }

}

</script>


</body>

</html>


查看完整回答
反對 回復(fù) 2021-10-07
  • 3 回答
  • 0 關(guān)注
  • 217 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號