如何使用jQuery变量隐藏HTML表格行

时间:2018-08-10 06:43:51

标签: javascript jquery html

我正在尝试隐藏 tr ,其中任何 td 的值为 Value1

下面的代码工作正常。但是,当我使用变量而不是值时,代码不起作用。

我希望它可以使用变量工作。

<input type='button' value='hide/show' />
<table id="mytable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value1</td>
            <td>Value2</td>
            <td>Value3</td>
        </tr>
        <tr>
            <td>Value4</td>
            <td>Value5</td>
            <td>Value6</td>
        </tr>
    </tbody>
</table>    

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
var this_value = "Value1";
$('input').click(function()
{
    // Working Fine with Value
    $('td:contains("Value1")').parent().toggle();

    // Not Working with Variable
    // $('td:contains(this_value)').parent().toggle();
});
</script>

3 个答案:

答案 0 :(得分:1)

尝试

df['status'] = np.where(df['code'].isin(["US","UK"]), df['status'], 'N')

答案 1 :(得分:1)

您需要像$('td:contains("'+this_value+'")')那样连接该值:

var this_value = "Value1";
$('input').click(function() {
  // Working Fine with Value
  $('td:contains("'+this_value+'")').parent().toggle();

  // Not Working with Variable
  // $('td:contains(this_value)').parent().toggle();
});
<input type='button' value='hide/show' />
<table id="mytable">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value3</td>
    </tr>
    <tr>
      <td>Value4</td>
      <td>Value5</td>
      <td>Value6</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>

答案 2 :(得分:0)

您的代码存在的问题是'td:contains(this_value)'是一个字符串,而解析器不知道this_value是一个变量。它只是注册为字符串的一部分。

正如其他人提到的那样,您需要通过串联或使用模板文字将变量与字符串分开。

ES5串联:

'td:contains('+this_value+')'

ES6模板文字

`td:contains(${this_value})`