0

我想使用 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();
    }
});
4

3 回答 3

1

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

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

我们在这里所做的基本上是获取被选择的选项的数字部分并显示适当的tr，同时隐藏它的所有兄弟（即所有其他trs）

于 2013-03-21T15:41:27.357 回答
0

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

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

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

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

为此，您需要一个<TABLE>with<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>s 直接在<TABLE>.

于 2013-03-21T15:39:41.957 回答
0

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

$('#TapeSizeHDPT').change(function () {
    var id = '#PT1Row' + $(this).val();
    $('#table').find(':visible').hide();     
    $(id).show();
})
于 2013-03-21T15:44:07.617 回答