Question

我正在尝试做一个简单的表，并在用户选择一个选项时隐藏所有其他选项列。我担心某些HTML语法中的错误。

HTML：

       $('#data').change(function() {
         $('.hideShowTr').css('display','none');
         $('tr#' + $(this).val()).css('display','block');
      });

    <select id="data">
        <option value="#">select</option>
        <option value="fiat">FIAT</option>
        <option value="gm">GM</option>
        <option value="mitsubishi">Mitsubishi</option>

        </select></td>
	    <td colspan="5" class="escreve">
			
      <table width="650" border="1">
        <tr>
         <td> Requisito de Pintura </td>
         <td> Aplicação do Teste</td>
         <td> Quantidade Amostras por Teste</td>
         <td> Laboratório a ser realizados os testes</td>
        </tr>
         <tr class="hideShowTr" id="fiat" style="display: none;">
         <td>Teste realizado em e-coat </td>
         <td>Roda</td>  
         <td>xxxxxxxxxxxxxxxxxxx</td>
         <td>xxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr class="hideShowTr" id="gm" style="display: none;">
         <td>xxxxxxxxxxxxxxxxxxxxxxx</td>
         <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
         <td>XXXXX</td>
        </tr>
       <tr class="hideShowTr" id="mitsubishi" style="display: none;">
        <td> xxxxxxxxxx</td>
        <td>xxxxxxxxxxx</td>
        <td>xxxxxxxx<br>xxxxxxxx</td>
        <td>xxxxxxx</td>
       </tr></td>
    </table>

由于

Answer 1

您的HTML格式不正确。使用此：

<select id="data">
  <option value="#">select</option>
  <option value="fiat">FIAT</option>
  <option value="gm">GM</option>
  <option value="mitsubishi">Mitsubishi</option>
</select>

<table width="650" border="1">
  <tr>
    <td> Requisito de Pintura </td>
    <td> Aplicação do Teste</td>
    <td> Quantidade Amostras por Teste</td>
    <td> Laboratório a ser realizados os testes</td>
  </tr>
  <tr class="hideShowTr" id="fiat" style="display: none;">
    <td>Teste realizado em e-coat </td>
    <td>Roda</td>
    <td>xxxxxxxxxxxxxxxxxxx</td>
    <td>xxxxxxxxxxxxxxxxxxxxxxx</td>
  </tr>
  <tr class="hideShowTr" id="gm" style="display: none;">
    <td>xxxxxxxxxxxxxxxxxxxxxxx</td>
    <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
    <td>XXXXX</td>
    <td></td>
  </tr>
  <tr class="hideShowTr" id="mitsubishi" style="display: none;">
    <td> xxxxxxxxxx</td>
    <td>xxxxxxxxxxx</td>
    <td>xxxxxxxx xxxxxxxx</td>
    <td>xxxxxxx</td>
  </tr>
</table>

同样适用于tr你应该使用display: table-row，否则单元格不会排队：

$('#data').change(function() {
  $('.hideShowTr').css('display', 'none');
  $('tr#' + $(this).val()).css('display', 'table-row');
});

<强> https://jsfiddle.net/L1mtuc5m/1/

Answer 2

你在jQuery上遇到错误，修复如下：

  $('#data').change(function() {
     $('.hideShowTr').css('display','none');
     $('#' + $(this).val()).css('display','block');
  });

Answer 3

HTML格式不正确且必须声明JS块稍有变化才能生效。显示不应该更改为tmp_file = File.new('name', "w+") tmp_file.path(Pathname.new("/public/word_tempate"))。只是取消它（空白）应该这样做。

block

$('#data').change(function() {
     $('.hideShowTr').css('display', 'none');
     $('tr#' + $(this).val()).css('display', '');
   });

我的代码出了什么问题？ - HTML / JS

3 个答案: