Question

所以这是我的代码：

      <div>
          <a class="button" data-value="lt">lt</a>
      </div> 
     <div>
          <a class="button" data-value="en">en</a>
      </div>

    <table>
        <tr>
            <th>ID</th>
            <th class="lt">Code lt</th>
            <th style="display:none;" class="en">Code en</th>
            <th class="lt">Value lt</th>
            <th style="display:none;" class="en">Value en</th>
        </tr>
            <tr>
                <td>ID</td>
                <td class="lt">code1_lt</td>
                <td style="display:none;" class="en">code2_en</td>
                <td class="lt">value1_lt</td>
                <td style="display:none;" class="lt">value2_en</td>
            </tr>
    </table>

所以例如当我点击第一个按钮时我想用en隐藏列（所以它的第3个和第5个）并使用其他按钮隐藏lt列

Nvm自己解决了这个问题。谢谢所有帮助过的人我是这样做的：

jQuery(document).on('click', '.button', function(e) {
      var value = jQuery(this).attr('data-value');

      if(value == 'lt')
      {
          jQuery('.lt').show();
          jQuery('.en').hide();
      }

      if(value == 'en')
      {
          jQuery('.en').show();
          jQuery('.lt').hide();
      }


  });

Answer 1

这样做，这将隐藏第2列

  $('#btnid').click(function() {
    $('td:nth-child(2),th:nth-child(2)').hide();
  })

或者你可以这样做，将cal。。和.lt分配给列并隐藏它

      $('#btnlt').click(function() {
        $('.lt').hide();
      })

      $('#btnen').click(function() {
        $('.en').hide();
      })

  <table>
        <tr>
            <th>ID</th>
            <th class='lt'>Code lt</th>
            <th class='en'>Code en</th>
            <th class='lt'>Value lt</th>
            <th class='en'>Value en</th>
        </tr>
            <tr>
                <td><?php echo $row->id; ?></td>
                <td class='lt'><?php echo $row->code_lt; ?></td>
                <td class='en'><?php echo $row->code_en; ?></td>
                <td class='lt'><?php echo $row->value_lt; ?></td>
                <td class='en'><?php echo $row->value_en; ?></td>
            </tr>
    </table>

Answer 2

您可以class使用index来隐藏列。

＆＃13;

$(".button").on("click", function() {
 $('td').removeClass('ab');
 $('th').removeClass('ab');
  var btn = $(this).val();
  $('table tr th').each(function(index, element) {
    var str = $(this).text();

    if (str.indexOf(btn) !== -1) {
      $(this).addClass('ab');
      $("td:nth-child(" + index + ")").addClass('ab');
    }
  });

});

＆＃13;

.ab {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='button' value="lt" class="button" />
</div>
<div>
  <input type='button' value='en' class="button" />
</div>
<table>
  <tr>
    <th>ID</th>
    <th>Code lt</th>
    <th>Code en</th>
    <th>Value lt</th>
    <th>Value en</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

＆＃13;

如何使用jquery隐藏按钮单击时的特定表列？

2 个答案: