从列 html 表中隐藏多个跨度元素（span_0_1、span_1_1、span_2_1）

Question

从一个列 html 表中隐藏多个 span 元素（span_0_1、span_1_1、span_2_1）

<table id="mytable">
<thead>
<th>S.No<th>
<th>Data 1<th>
<th>Data 2<th>
</thead>
<tbody>
<tr><td><span id='span_0_0'>1</span></td><td><span id='span_0_1'>my Data 1</span></td><td><span id='span_0_2'>my Data 2</span></td></tr>
<tr><td><span id='span_1_0'>2</span></td><td><span id='span_1_1'>my Data 1</span></td><td><span id='span_1_2'>my Data 2</span></td></tr>
<tr><td><span id='span_2_0'>3</span></td><td><span id='span_2_1'>my Data 1</span></td><td><span id='span_2_2'>my Data 2</span></td></tr>
<tr><td><span id='span_3_0'>4</span></td><td><span id='span_3_1'>my Data 1</span></td><td><span id='span_3_2'>my Data 2</span></td></tr>
</tbody>
</table>

Answer 1

您的问题是，您所有的跨度都以span_ 开头。因此，$('[id^="span_"]').hide() 将隐藏所有这些。 您可能只使用span_1 隐藏所有跨度，如下所示： $('[id^="span_1"]').hide()

$(function() {
  $('#span1').click(function() {
    $('span').show();
    $('[id^="span_"]').hide();
  });
  $('#span2').click(function() {
    $('span').show();
    $('[id^="span_1"]').hide();
  });
  $('#span3').click(function() {
    $('span').show();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <thead>
    <th>S.No</th>th>
    <th>Data 1</th>th>
    <th>Data 2
    </th>th>
  </thead>
  <tbody>
    <tr>
      <td><span id='span_0_0'>1</span></td>
      <td><span id='span_0_1'>my Data 1</span></td>
      <td><span id='span_0_2'>my Data 2</span></td>
    </tr>
    <tr>
      <td><span id='span_1_0'>2</span></td>
      <td><span id='span_1_1'>my Data 1</span></td>
      <td><span id='span_1_2'>my Data 2</span></td>
    </tr>
    <tr>
      <td><span id='span_2_0'>3</span></td>
      <td><span id='span_2_1'>my Data 1</span></td>
      <td><span id='span_2_2'>my Data 2</span></td>
    </tr>
    <tr>
      <td><span id='span_3_0'>4</span></td>
      <td><span id='span_3_1'>my Data 1</span></td>
      <td><span id='span_3_2'>my Data 2</span></td>
    </tr>
  </tbody>
</table>
<span>some other span</span>
<br />
<span id="nospan_0_0">span with other id</span>
<br />
<button id="span1">Hide "span_"</button>
<button id="span2">Hide "span_1"</button>
<button id="span3">show all</button>

Answer 2

你的代码应该是

$("#spanitem_1_1").hide() ;

您可以通过逗号分隔多个元素来指定它们。

$("#spanitem_1_1, #spanitem_3_1").hide() ;

或

$("span[id='spanitem_1_1']").hide() ;
$("span[id='spanitem_1_1'], span[id='spanitem_3_1']").hide() ;