Question

我在网页上有不同的表，但是只想在特定的表上触发Ajax（在这种情况下，更新表的列）。

实际上，学习将动作应用于“除了X类之外的所有事物”的方法，就像找出如何将动作“仅应用于X类”一样好。

示例代码：

<table class="currtable1">
<thead>
<td colspan="5">
Table 1
<SELECT name="menu">
        <option value="eur">EUR</option>
        <option value="thb">THB</option>
        <option value="btc">BTC</option>
        <option value="eth">ETH</option>
        <option value="xmr">XMR</option>
        </SELECT>
</td> 
</thead>
<tbody>
    <tr>
       <td>column EUR</td>
       <td style="display:none;">column THB</td>
       <td style="display:none;">column BTC</td>
       <td style="display:none;">column ETH</td>
       <td style="display:none;">column XMR</td>
    </tr>
        <tr>
       <td>column EUR</td>
       <td style="display:none;">column THB</td>
       <td style="display:none;">column BTC</td>
       <td style="display:none;">column ETH</td>
       <td style="display:none;">column XMR</td>
    </tr>
    </tbody>
</table>
<hr>
<table class="currtable2">
<thead>
<td colspan="5">
Table 2
</td> 
</thead>
<tbody>
    <tr>
       <td>column EUR</td>
       <td style="display:none;">column THB</td>
       <td style="display:none;">column BTC</td>
       <td style="display:none;">column ETH</td>
       <td style="display:none;">column XMR</td>
    </tr>
        <tr>
       <td>column EUR</td>
       <td style="display:none;">column THB</td>
       <td style="display:none;">column BTC</td>
       <td style="display:none;">column ETH</td>
       <td style="display:none;">column XMR</td>
    </tr>
    </tbody>
</table>

Javascript（当选择更改时，我尝试仅更新“currtable2”，但它不起作用）：

$(document).on('change', "table.currtable2 thead select", function() {

  var index = $('option:selected',this).index()+1;

  console.log(index)
  $('table tbody tr').each(function() {
      $(this).find("td").hide();
       $(this).find("td:nth-child("+index+")").show();
  });

});

JsFiddle：https://jsfiddle.net/jsrookey/z8pj7dns/2/

Answer 1

通过添加课程

来更改选择

例如：

<SELECT name="menu" class="menu">
        <option value="eur">EUR</option>
        <option value="thb">THB</option>
        <option value="btc">BTC</option>
        <option value="eth">ETH</option>
        <option value="xmr">XMR</option>
        </SELECT>
</td>

在javascript中

$( document ).ready(function() {
     $(".menu").change(function(){
            // your logic here
    });
});

Answer 2

只更新两个表中的一个的正确方法：

$(document).on('change', 'table thead select', function() {

  var index = $('option:selected',this).index()+1;

  $('table.currtable1 tbody tr').each(function() {
      $(this).find("td").hide();
      $(this).find("td:nth-child("+index+")").show();
  });
});

Ajax操作仅针对特定类

2 个答案: