如何使用下拉列表选择在html中显示表

Vinay 发表于 Dev

维纳

我想根据下拉列表中的选择显示数据。例如，如果我选择空，那么它将显示所有表数据。如果我选择“ a”，那么它将在“ a”行中显示数据。.请提出如何实现此要求的建议。

<html>

<head>
  <title>details</title>
  <style>
    table,
    th,
    td {
      border: 0.5px solid black;
    }
  </style>
</head>
<div>

  <body>
    <h1>details</h1> 
    <select>
      <option id=""></option>
      <option id="a">a</option>
      <option id="b">b</option>
      <option id="c">c</option>
      <option id="d">d</option>
    </select>


    <table>
      <tr bgcolor="#C2D0C7">
        <th>name</th>
        <th>Description</th>
        <th>URL</th>
      </tr>
      <tr>
        <td rowspan="2">a</td>
        <td>site URL</td>
        <td><a href=xyz.com target="_blank">xyz.com</a>
        </td>
      </tr>
      <tr>
        <td>site1 url</td>
        <td><a href=xyz.com target="_blank">xyz.com</a>
        </td>
      </tr>


      <tr>
        <td rowspan="2">b</td>
        <td>site URL</td>
        <td><a href=xyz.com target="_blank">xyz.com</a>
        </td>
      </tr>
      <tr>
        <td>site1 url</td>
        <td><a href=xyz.com target="_blank">xyz.com</a>
        </td>
      </tr>
      <tr>
        <td rowspan="2">c</td>
        <td>site URL</td>
        <td><a href=xyz.com target="_blank">xyz.com</a>
        </td>
      </tr>
      <tr>
        <td>site1 url</td>
        <td><a href=xyz.com target="_blank">xyz.com</a>
        </td>
      </tr>
      <tr>


        
        <td rowspan="2">d</td>
        <td>site URL</td>
        <td><a href=xyz.com target="_blank">xyz.com</a>
        </td>
      </tr>
      <tr>
        <td>site1 url</td>
        <td><a href=xyz.com target="_blank">xyz.com</a>
        </td>
      </tr>
    </table>
  </body>
</div>

</html>

普拉桑斯

尝试与jquery脚本一起使用。匹配所选输入中的contains（）单词

更新了单HTML页答案

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 0.5px solid black;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    function change(that) { //in this get the value of changing input
      var a = $(that).val() //its the value of selected data
      if (a != "") { //it's check the not empty condition
        $('tr').not('tr[bgcolor="#C2D0C7"]').hide() //its prevent the heading row `not()`
        $('td[rowspan^="2"]:contains(' + a + ')').parent('tr').show() //match the seleted value to display 
        $('td[rowspan^="2"]:contains(' + a + ')').parent('tr').next().show()
          //it matches the next row of other two columns it is the same in the first column 
      } else {
        $('tr').show() //it selects empty data show all rows
      }
    }
  </script>
</head>

<body>
  <h1>details</h1> 
  <select onchange="change(this)">
    <option id=""></option>
    <option id="a">a</option>
    <option id="b">b</option>
    <option id="c">c</option>
    <option id="d">d</option>
  </select>


  <table>
    <tr bgcolor="#C2D0C7">
      <th>name</th>
      <th>Description</th>
      <th>URL</th>
    </tr>
    <tr>
      <td rowspan="2">a</td>
      <td>site URL</td>
      <td><a href=xyz.com target="_blank">xyz.com</a>
      </td>
    </tr>
    <tr>
      <td>site1 url</td>
      <td><a href=xyz.com target="_blank">xyz.com</a>
      </td>
    </tr>

    <tr>
      <td rowspan="2">b</td>
      <td>site URL</td>
      <td><a href=xyz.com target="_blank">xyz.com</a>
      </td>
    </tr>
    <tr>
      <td>site1 url</td>
      <td><a href=xyz.com target="_blank">xyz.com</a>
      </td>
    </tr>
    <tr>
      <td rowspan="2">c</td>
      <td>site URL</td>
      <td><a href=xyz.com target="_blank">xyz.com</a>
      </td>
    </tr>
    <tr>
      <td>site1 url</td>
      <td><a href=xyz.com target="_blank">xyz.com</a>
      </td>
    </tr>
    <tr>
      <td rowspan="2">d</td>
      <td>site URL</td>
      <td><a href=xyz.com target="_blank">xyz.com</a>
      </td>
    </tr>
    <tr>
      <td>site1 url</td>
      <td><a href=xyz.com target="_blank">xyz.com</a>
      </td>
    </tr>
  </table>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。