Question

我想使用javascript隐藏表格行。

这就是我现在正在做的事情。但我知道有更好的方法可以做到这一点。

我为每行使用了表，每个表都有一个id。

根据选择下拉选择项目时，表格中只显示一行。

我表的一部分

<table width="100%" border="0" cellspacing="0" id="tableOneHDPT1">
          <tr>
            <td width="9%" align="center" bgcolor="#0471B2" height="30"><strong>Width</strong></td>
            <td width="10%" align="center" bgcolor="#0471B2"><strong>Length</strong></td>
            <td width="8%" align="center" bgcolor="#0471B2"><strong>Mil.</strong></td>
            <td width="15%" align="center" bgcolor="#0471B2"><strong>Rolls Per Case</strong></td>
            <td width="9%" align="center" bgcolor="#0471B2"><strong>1 Case</strong></td>
            <td width="10%" align="center" bgcolor="#0471B2"><strong>2 Case</strong></td>
            <td width="8%" align="center" bgcolor="#0471B2"><strong>5 Cases</strong></td>
            <td width="11%" align="center" bgcolor="#0471B2"><strong>10 Cases</strong></td>
            <td width="10%" align="center" bgcolor="#0471B2"><strong>25 Cases</strong></td>
            <td width="10%" align="center" bgcolor="#0471B2"><strong>60 Cases</strong></td>
            </tr>
          <tr>
            <td colspan="10" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" id="PT1Row1">
              <tr>
                <td width="9%" align="center">2''</td>
                <td width="10%" align="center">55 yds.</td>
                <td width="8%" align="center">2</td>
                <td width="15%" align="center">72</td>
                <td width="9%" align="center">N/A</td>
                <td width="10%" align="center">N/A</td>
                <td width="8%" align="center">$4.12</td>
                <td width="11%" align="center">$3.64</td>
                <td width="10%" align="center">$3.04</td>
                <td width="10%" align="center">$2.54</td>
                </tr>
            </table></td>
            </tr></table>

下拉

<select name="TapeSizeHDPT" id="TapeSizeHDPT">
    <option selected="selected" value="-1">&lt;Select&gt;</option>
    <option value="HDPT1">2"x55 yds.</option>
    <option value="HDPT2">3"x55 yds.</option>
    <option value="HDPT3">2"x 110 yds.</option>
    <option value="HDPT4">3"x 110 yds.</option>
    <option value="HDPT5">2"x 1000 yds.</option>
    <option value="HDPT6">3"x 110 yds.</option>
</select>

这是我的js：

$('#TapeSizeHDPT').change(function() {
    if ($('#TapeSizeHDPT option:selected').val() == "HDPT1") {
        $('#PT1Row1').show();
        $('#PT1Row2').hide();
        $('#PT1Row3').hide();
        $('#PT1Row4').hide();
        $('#PT1Row5').hide();
        $('#PT1Row6').hide();
    }
});

Answer 1

您可以对其进行概括，并将其写得更短，如下所示：

$('#TapeSizeHDPT').change(function () {        
   $('#PT1Row'+$(this).val().replace('HDPT')).show().siblings().hide();   
});

我们在这里做的是获取所选选项的数字部分并显示相应的tr，同时隐藏其所有兄弟姐妹（即所有其他tr s）

Answer 2

您可以隐藏<TBODY>中的所有行：

$('#some_tbody').children().hide();

然后显示您要显示的1 <TR>：

$('#' + this.value).show(); // this.value is from the <select> onchange event

为此，您需要<TABLE> <THEAD>和<TBODY>：

<table>
  <thead>
    <tr>... THs here ...</tr>
  </thead>
  <tbody id="some_tbody">
    <tr id="HDPT1">...</tr>
    <tr id="HDPT2">...</tr>
    <tr id="HDPT3">...</tr>
    <tr id="HDPT4">...</tr>
  </tbody>
</table>

而不是<TR>中的所有<TABLE>。

Answer 3

将下拉列表的值更改为数字1,2 ...然后

$('#TapeSizeHDPT').change(function () {
    var id = '#PT1Row' + $(this).val();
    $('#table').find(':visible').hide();     
    $(id).show();
})

用javascript隐藏表格行

3 个答案: