根据复选框切换数据表行答案

【问题标题】：Toggle datatable row based on checkbox根据复选框切换数据表行
【发布时间】：2018-12-14 11:01:15
【问题描述】：

这是我的 HTML..

<table class="table table-striped table-bordered table-hover dataTable no-footer" id="datatable_ajax" style=" padding: 15px;" role="grid" aria-describedby="datatable_ajax_info">
    <thead>
        <tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="datatable_ajax" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Date: activate to sort column descending">Date</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Time">Time</th>
            <th class="sorting" tabindex="0" aria-controls="datatable_ajax" rowspan="1" colspan="1" aria-label="Transaction ID: activate to sort column ascending">Transaction ID</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Step">Step</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Step Type">Step Type</th>
            <th class="sorting" tabindex="0" aria-controls="datatable_ajax" rowspan="1" colspan="1" aria-label="User ID: activate to sort column ascending">User ID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable_ajax" rowspan="1" colspan="1" aria-label="User: activate to sort column ascending">User</th>
            <th class="sorting" tabindex="0" aria-controls="datatable_ajax" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending">Type</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Side">Side</th>
            <th class="sorting" tabindex="0" aria-controls="datatable_ajax" rowspan="1" colspan="1" aria-label="Coin: activate to sort column ascending">Coin</th>
            <th class="sorting" tabindex="0" aria-controls="datatable_ajax" rowspan="1" colspan="1" aria-label="Wallet: activate to sort column ascending">Wallet</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Price">Price</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Quantity">Quantity</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Fee">Fee</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Fee USD">Fee USD</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Vendor Value">Vendor Value</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Vendor Fee">Vendor Fee</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Vendor Fee %">Vendor Fee %</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Vendor Fee USD">Vendor Fee USD</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Fee Castle X">Fee Castle X</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Fee Castle X %">Fee Castle X %</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Fee Castle X USD">Fee Castle X USD</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Net Qty">Net Qty</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Value USD">Value USD</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Net Value USD">Net Value USD</th>
        </tr>
        <tr role="row" class="filter">
            <td rowspan="1" colspan="1">
                <input type="text" class="form-control form-filter input-sm datetimepicker" name="time_from" placeholder="Starting Time">
                <input type="text" class="form-control form-filter input-sm datetimepicker" name="time_to" placeholder="Ending Time">
            </td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1">
                <input type="text" class="form-control form-filter input-sm" name="id">
            </td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1">
                <input type="text" class="form-control form-filter input-sm" name="user_id">
            </td>
            <td rowspan="1" colspan="1">
                <input type="text" class="form-control form-filter input-sm" name="name">
            </td>
            <td rowspan="1" colspan="1">
                <input type="text" class="form-control form-filter input-sm" name="type">
            </td>
            <td rowspan="1" colspan="1">
            </td>
            <td rowspan="1" colspan="1">
                <input type="text" class="form-control form-filter input-sm" name="coin">
            </td>
            <td rowspan="1" colspan="1">
                <input type="text" class="form-control form-filter input-sm" name="wallet">
            </td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
            <td rowspan="1" colspan="1"></td>
        </tr>
    </thead>
    <tbody>
        <tr role="row" class="odd">
            <td class="sorting_1">12-12-2018</td>
            <td>09:23:56</td>
            <td>100000100</td>
            <td></td>
            <td></td>
            <td>100001</td>
            <td>Najam Masood</td>
            <td>MANUAL_DEPOSIT</td>
            <td></td>
            <td></td>
            <td>USD</td>
            <td>1.00000000</td>
            <td>25.00000000</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>1.00000000</td>
            <td>4.00</td>
            <td>1.00</td>
            <td>24.00000000</td>
            <td>25.00</td>
            <td>24.00</td>
        </tr>
        <tr role="row" class="even">
            <td class="sorting_1">12-12-2018</td>
            <td>09:53:43</td>
            <td>100000101</td>
            <td>1</td>
            <td></td>
            <td>100001</td>
            <td>Najam Masood</td>
            <td>MARKET</td>
            <td>BUY</td>
            <td>ADA</td>
            <td>USDT</td>
            <td>0.02991</td>
            <td>534.8</td>
            <td></td>
            <td></td>
            <td>3.25097967</td>
            <td>0.00243789</td>
            <td>0.074989</td>
            <td>0.01198198</td>
            <td>2.67400000 ADA</td>
            <td>0.5</td>
            <td>0.07997934</td>
            <td>532.126</td>
            <td>15.995868</td>
            <td>15.91588866</td>
        </tr>
        <tr role="row" class="odd">
            <td class="sorting_1">12-12-2018</td>
            <td>09:54:47</td>
            <td>100000102</td>
            <td>1</td>
            <td></td>
            <td>100001</td>
            <td>Najam Masood</td>
            <td>MARKET</td>
            <td>SELL</td>
            <td>ADA</td>
            <td>USDT</td>
            <td>0.02989</td>
            <td>532.1</td>
            <td></td>
            <td></td>
            <td>3.23878225</td>
            <td>0.00243238</td>
            <td>0.075101</td>
            <td>0.01195174</td>
            <td>0.07952234 USDT</td>
            <td>0.5</td>
            <td>0.07952234</td>
            <td>532.1</td>
            <td>15.904469</td>
            <td>15.82494666</td>
        </tr>
        <tr role="row" class="even">
            <td class="sorting_1">12-12-2018</td>
            <td>09:55:47</td>
            <td>100000103</td>
            <td>1</td>
            <td></td>
            <td>100001</td>
            <td>Najam Masood</td>
            <td>MARKET</td>
            <td>BUY</td>
            <td>BTC</td>
            <td>USDT</td>
            <td>3405.15</td>
            <td>0.0047</td>
            <td></td>
            <td></td>
            <td>3.24967157</td>
            <td>0.00243725</td>
            <td>0.074999</td>
            <td>0.01199151</td>
            <td>0.00002350 BTC</td>
            <td>0.5</td>
            <td>0.08002102</td>
            <td>0.0046765</td>
            <td>16.004205</td>
            <td>15.92418398</td>
        </tr>
        <tr role="row" class="odd">
            <td class="sorting_1">12-12-2018</td>
            <td>09:56:57</td>
            <td>100000104</td>
            <td>1</td>
            <td></td>
            <td>100001</td>
            <td>Najam Masood</td>
            <td>MARKET</td>
            <td>SELL</td>
            <td>BTC</td>
            <td>USDT</td>
            <td>3404.19</td>
            <td>0.004676</td>
            <td></td>
            <td></td>
            <td>3.23718402</td>
            <td>0.00242676</td>
            <td>0.074965</td>
            <td>0.01190811</td>
            <td>0.07958996 USDT</td>
            <td>0.5</td>
            <td>0.07958996</td>
            <td>0.004676</td>
            <td>15.91799244</td>
            <td>15.83840248</td>
        </tr>
        <tr role="row" class="even">
            <td class="sorting_1">12-12-2018</td>
            <td>10:32:05</td>
            <td>100000105</td>
            <td></td>
            <td></td>
            <td>100013</td>
            <td>Salim Shah</td>
            <td>DEPOSIT</td>
            <td></td>
            <td></td>
            <td>GBP</td>
            <td>1.27529060</td>
            <td>39.21</td>
            <td></td>
            <td></td>
            <td></td>
            <td>1.34</td>
            <td></td>
            <td>1.7088894</td>
            <td>1.9605</td>
            <td>5.00</td>
            <td>2.50</td>
            <td>37.24950000</td>
            <td>50.00</td>
            <td>47.50</td>
        </tr>
        <tr role="row" class="odd">
            <td class="sorting_1">12-12-2018</td>
            <td>10:32:18</td>
            <td>100000106</td>
            <td></td>
            <td></td>
            <td>100013</td>
            <td>Salim Shah</td>
            <td>DEPOSIT</td>
            <td></td>
            <td></td>
            <td>GBP</td>
            <td>1.27529060</td>
            <td>45.48</td>
            <td></td>
            <td></td>
            <td></td>
            <td>1.52</td>
            <td></td>
            <td>1.93844171</td>
            <td>2.274</td>
            <td>5.00</td>
            <td>2.90</td>
            <td>43.20600000</td>
            <td>58.00</td>
            <td>55.10</td>
        </tr>
        <tr role="row" class="even">
            <td class="sorting_1">12-12-2018</td>
            <td>10:32:35</td>
            <td>100000107</td>
            <td></td>
            <td></td>
            <td>100013</td>
            <td>Salim Shah</td>
            <td>DEPOSIT</td>
            <td></td>
            <td></td>
            <td>GBP</td>
            <td>1.27529060</td>
            <td>31.37</td>
            <td></td>
            <td></td>
            <td></td>
            <td>1.11</td>
            <td></td>
            <td>1.41557256</td>
            <td>1.5685</td>
            <td>5.00</td>
            <td>2.00</td>
            <td>29.80150000</td>
            <td>40.00</td>
            <td>38.00</td>
        </tr>
        <tr role="row" class="odd">
            <td class="sorting_1">12-12-2018</td>
            <td>10:36:16</td>
            <td>100000108</td>
            <td></td>
            <td></td>
            <td>100013</td>
            <td>Salim Shah</td>
            <td>DEPOSIT</td>
            <td></td>
            <td></td>
            <td>GBP</td>
            <td>1.27529060</td>
            <td>39.21</td>
            <td></td>
            <td></td>
            <td></td>
            <td>1.34</td>
            <td></td>
            <td>1.7088894</td>
            <td>1.9605</td>
            <td>5.00</td>
            <td>2.50</td>
            <td>37.24950000</td>
            <td>50.00</td>
            <td>47.50</td>
        </tr>
        <tr role="row" class="even">
            <td class="sorting_1">12-12-2018</td>
            <td>10:36:30</td>
            <td>100000109</td>
            <td></td>
            <td></td>
            <td>100013</td>
            <td>Salim Shah</td>
            <td>DEPOSIT</td>
            <td></td>
            <td></td>
            <td>GBP</td>
            <td>1.27529060</td>
            <td>31.37</td>
            <td></td>
            <td></td>
            <td></td>
            <td>1.11</td>
            <td></td>
            <td>1.41557256</td>
            <td>1.5685</td>
            <td>5.00</td>
            <td>2.00</td>
            <td>29.80150000</td>
            <td>40.00</td>
            <td>38.00</td>
        </tr>
    </tbody>
</table>

我有一个复选框，我想根据第 4 列 Step 切换行。基本上我想要的是，如果该列有 Checkbox 被勾选，它应该显示那些具有 Step 的 innerHTML 的行，如果未选中，我们将隐藏那些 innerHTML 为 1 或 2 的行。

我无法遍历所有 tr 和 td。我们将忽略第一行，因为它没有数据。到目前为止，我已经尝试过这个

$('#datatable_ajax tr td:nth-child(4)').each(function(){
    $(this).find('td').each(function(){
        console.log($(this));
    })
})

但我似乎无法从中提取 innerHTML。有什么帮助吗？

【问题讨论】：

我在 HTML 中看不到任何复选框！！！
我没有添加。我只需要得到它的逻辑。这对我来说很好。
我们确实需要看一个完整的例子，你尝试了什么，它是代码，然后我们可以尝试为你解决它。
但这不是试图在第一个 jQuery 选择器中找到的 td 元素中找到每个 td 吗？你还记录 $(this).find('td') 之前的元素怎么样？
不知何故返回了 11 个 tds，这就是我所需要的，但我需要过滤除第一个之外的所有内容

标签： javascript jquery datatable datatables

【解决方案1】：

假设您要获取表中每条记录中第 4 列的值

var i = 0;
$('#datatable_ajax tr').each(function(){
    if(i != 0)
    {
        console.log($(this).find('td:eq(3)').html());
    }
    i++;
})

假设要获取表的每条记录中每一列的值

var i = 0;
$('#datatable_ajax tr').each(function(){
    if(i != 0)
    {
        $(this).find('td').each(function(){
            console.log($(this).html());
        });
    }
    i++;
})

注意：

这里 i != 0 用于跳过第一个 tr（包含标题）
在 jquery 中索引将从 '0' 开始，所以如果你想要第 4 个 td，你需要使用索引 3

【讨论】：