0

默认情况下，复选框已被选中，但表格并未隐藏。默认情况下，应演示前两个表。当您单击几次时，您可以看到隐藏的表格，但它们应该被隐藏为默认选中。我需要调用函数吗？或者我需要更改函数中的参数吗？

function showMe(cls) {
    var chboxs = document.getElementsByName("c1");
    var vis = 0;
    for (var i = 0; i < chboxs.length; i++) {
        if (chboxs[i].checked) {
            vis = 1;
            break;
        }
    }
    var elements = document.getElementsByClassName(cls);
    for (let e of elements) {
        if (vis === 1) {
            e.style.display = 'none';
        } else {
            e.style.display = 'table';
        }

    }
}
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="left">
            <input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
        </td>
    </tr>
</table>

<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tr>
        <td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
        <td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
    </tr>
    <tr>
        <td class="uniqueborder" align="left">
            <p style="margin: 0pt; ">Test </p>
        </td>
        <td class="uniqueborder" align="center" width="10%">
            <font color="gray">N/A</font>
        </td>
    </tr>
    <tr>
        <td class="uniqueborder" align="left">
            <p style="margin: 0pt; ">Test </p>
        </td>
        <td class="uniqueborder" align="center" width="10%">
            <font color="gray">N/A</font>
        </td>
    </tr>
    </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
                <p style="margin: 0pt; ">Test </p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>

    </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
    </tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
    </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>

    </tbody>
</table>
</table>

4

2 回答 2

1

快速而肮脏的方法是showMe('box')在页面加载时调用：

function showMe(cls) {
  var chboxs = document.getElementsByName("c1");
  var vis = 0;
  for (var i = 0; i < chboxs.length; i++) {
    if (chboxs[i].checked) {
      vis = 1;
      break;
    }
  }
  var elements = document.getElementsByClassName(cls);
  for (let e of elements) {
    if (vis === 1) {
      e.style.display = 'none';
    } else {
      e.style.display = 'table';
    }
  }
}

showMe('box');
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left">
      <input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
    </td>
  </tr>
</table>

<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tr>
    <td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
    <td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
  </tr>
  <tr>
    <td class="uniqueborder" align="left">
      <p style="margin: 0pt; ">Test </p>
    </td>
    <td class="uniqueborder" align="center" width="10%">
      <font color="gray">N/A</font>
    </td>
  </tr>
  <tr>
    <td class="uniqueborder" align="left">
      <p style="margin: 0pt; ">Test </p>
    </td>
    <td class="uniqueborder" align="center" width="10%">
      <font color="gray">N/A</font>
    </td>
  </tr>
  </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
        <p style="margin: 0pt; ">Test </p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>

  </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
  </tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
  </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>

  </tbody>
</table>
</table>

然而，更好的方法是删除内联onclick事件处理程序，并将不显眼的change事件处理程序绑定到复选框。然后，您可以在页面加载时简单地触发该事件。

请注意，这种方法的好处是使代码中的第一个循环变得多余。尝试这个：

jQuery($ => {
  $('.show').on('change', e => {
    var targetClass = $(e.target).data('targetclass');
    $('.' + targetClass).toggle();   
  }).trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left">
      <input type="checkbox" name="c1" checked="true" class="show" data-targetclass="box">Show Result
    </td>
  </tr>
</table>

<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tr>
    <td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
    <td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
  </tr>
  <tr>
    <td class="uniqueborder" align="left">
      <p style="margin: 0pt; ">Test </p>
    </td>
    <td class="uniqueborder" align="center" width="10%">
      <font color="gray">N/A</font>
    </td>
  </tr>
  <tr>
    <td class="uniqueborder" align="left">
      <p style="margin: 0pt; ">Test </p>
    </td>
    <td class="uniqueborder" align="center" width="10%">
      <font color="gray">N/A</font>
    </td>
  </tr>
  </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
        <p style="margin: 0pt; ">Test </p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>

  </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
  </tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
  </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>

  </tbody>
</table>
</table>

顺便说一句，您应该删除内联 CSS 样式以及width、bordercolor等cellpadding属性，并使用外部样式表。此外font，元素已被弃用很长时间，永远不应使用。

于 2020-06-30T12:08:07.257 回答
0

您可以找到详细信息，我准备了一个 html 文件。当我在 javascript 中调用 showMe('box') 时它不起作用

<script language="JavaScript">

function showMe(cls) {
    var chboxs = document.getElementsByName("c1");
    var vis = 0;
    for (var i = 0; i < chboxs.length; i++) {
        if (chboxs[i].checked) {
            vis = 1;
            break;
        }
    }
    var elements = document.getElementsByClassName(cls);
    for (let e of elements) {
        if (vis === 1) {
            e.style.display = 'none';
        } else {
            e.style.display = 'table';
        }

    }
}
show('box');
</script>

</head>


                <br>
                <table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                <td align="left">
                <input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
                </td>
                </tr>
                </table>
                
                <table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
                <tr>
                <td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
                <td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
                </tr>
                    <tr>
                        <td class="uniqueborder" align="left"><p style="margin: 0pt; ">Test </p></td>
                          <td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
                    </tr>
                    <tr>
                        <td class="uniqueborder" align="left"><p style="margin: 0pt; ">Test </p></td>
                          <td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
                    </tr>
                </tbody></table>
                <table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0"><tbody>
                    <tr>
                        <td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px"align="left"><p style="margin: 0pt; ">Test </p></td>
                          <td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
                    </tr>

                </tbody></table>
                <table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0"><tbody>
                    <tr>
                        <td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p></td>
                          <td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
                    </tr>
                    <tr>
                        <td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p></td>
                          <td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
                    </tr>
                                    </tbody></table>
                <table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0"><tbody>
                    <tr>
                        <td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p></td>
                          <td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
                    </tr>
                    <tr>
                        <td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p></td>
                          <td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
                    </tr>
                                    </tbody></table>
                <table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0"><tbody>
                    <tr>
                        <td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p></td>
                          <td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
                    </tr>
                    <tr>
                        <td class="uniqueborder" align="left"><p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p></td>
                          <td class="uniqueborder" align="center" width="10%"><font color="gray">N/A</font></td>
                    </tr>
                    
                </tbody></table></table>

</html>
于 2020-06-30T14:32:54.510 回答