datatable 相关问题

在 Vuetify 数据表中排序时省略项目

我想在对数据表的averageScore 列进行排序时过滤掉空值。 目前，在对averageScore列进行排序时，空值被视为最低值，因此它们...

Flutter DataTable headerRowColor 使用 WidgetStateColor 无法正常工作

代码：我构建了一个 DataTable 小部件，我想通过以下方式更改表的标题颜色： headerRowColor: WidgetStateColor.resolveWith((状态) { 如果（说明。

v-data-table 中的动态项目模板槽，带有自定义组件和助手

假设我有一个自定义组件，其中使用 Vuetify 的 v-data-table。 在此组件中，还有多个其他自定义组件，例如加载器和用于显示的特定基于列的组件...

如何删除 Power Apps 数据表中的多行

我有一个 Power Apps 数据表，此数据表检索我的 SharePoint 列表 [假期预算] 记录。我已经使用RemoveIf函数库删除了数据表中的多条记录...

不循环更新数据表中的多行

我有两个具有应用程序条件的数据表，并且希望对多行进行一些处理以更新列值。 例如： 我的 datatable1 有 10000 行。我想按数据过滤行...

如何修复数据表或常规表向下滚动时的标题？

我在代码中使用了数据表，但我正在尝试修复标头。 我也尝试过使用数据表的 fixHeader 功能，但无法正常工作。 <... 我在代码中使用了数据表，但我正在尝试修复标头。 我也尝试过使用数据表的fixHeader功能，但没有正常工作。 <div class="table-responsive"> <table class="temp1 table table-striped mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid" aria-describedby="user-list-page-info" id="user-list-table"> <thead class='headertbl'> <tr class="ligth" style="margin-left: 2px;"> <th>&nbsp;</th> <th>Id_No</th> <th>updated_date</th> <th>estimated_date</th> <th>product_id</th> <th>product_name</th> <th>box_no</th> <th>color_code</th> <th>color_name</th> <th>size_code</th> <th>size_name</th> <th>childe_color</th> <th>remark</th> <th>arrival_date</th> <th>units</th> <th>quantity</th> <th>unit_price</th> <th>currency</th> <th>excahnge</th> <th>current_currency(JPY)</th> <th>Amount</th> <th>Insurance_cost</th> <th>Shipping costs</th> <th>custom rate</th> <th>Tariffs</th> <th>Purchase price</th> <th>&nbsp;</th> </tr> </thead> <tbody> <!-- first row --> <tr class="table-info" id="row2" > <td><input type="checkbox" class="checkbox-input"></td> <td>10001</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="num1" value="1,00,000" onfocusout="change()"></td> <td><input type="text" class="form-control form-control-sm" id="num2" value="3,00,000" onfocusout="change()"></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="num3" value="10,000" onfocusout="change()"></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">update</button> <button type="button" class="btn btn-primary btn-sm">cancel</button> <button type="button" class="btn btn-primary btn-sm">confirm</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100310</td> <td></td> <td>A1</td> <td>IEB-010A</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>3</td> <td><span id="test1">50</span></td> <td><span id="test2">120</span></td> <td>USD</td> <td><input type="text" class="form-control form-control-sm" id="test4" onfocusout="change()" value="105"></td> <td><span id="test3">6,30,000</span></td> <td><span id="per">94%</span></td> <td><span id="ans">93,750</span> </td> <td><span id="ans11">2,81,250</span></td> <td>3.80%</td> <td><span id="ans33">9612</span> </td> <td><span id="ans55">18,417</span></td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100310</td> <td>15</td> <td>IEB011</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>1</td> <td><span id="test5">10</span></td> <td><span id="test6">40</span></td> <td>USD</td> <td><input type="text" class="form-control form-control-sm" id="test7" onfocusout="change()" value="105"></td> <td><span id="test8">42,000</span></td> <td><span id="per2">6%</span></td> <td><span id="ans2">6,250</span></td> <td><span id="ans22">18,750</span></td> <td>2.30%</td> <td><span id="ans44">388</span></td> <td><span id="ans66">6,114</span></td> <td></td> </tr> <!-- second row --> <tr class="table-info" id="row2" > <td><input type="checkbox" class="checkbox-input"></td> <td>10001</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="num11" value="0" onfocusout="change2()"></td> <td><input type="text" class="form-control form-control-sm" id="num22" value="0" onfocusout="change2()"></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="num33" value="0" onfocusout="change2()"></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">update</button> <button type="button" class="btn btn-primary btn-sm">cancel</button> <button type="button" class="btn btn-primary btn-sm">confirm</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100310</td> <td></td> <td>A1</td> <td>IEB-010A(HB)</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>3</td> <td><span id="test01">50</span></td> <td><span id="test02">120</span></td> <td>USD</td> <td><input type="text" class="form-control form-control-sm" id="test04" onfocusout="change2()" value="105"></td> <td><span id="test03">6,30,000</span></td> <td><span id="per01">100%</span></td> <td><span id="ans01">0</span> </td> <td><span id="ans011">0</span></td> <td>3.80%</td> <td><span id="ans033">0</span> </td> <td><span id="ans055">12,600</span></td> <td></td> </tr> <!-- third row --> <tr class="table-info" id="row2" > <td><input type="checkbox" class="checkbox-input"></td> <td>10003</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="no11" value="100000" onfocusout="onchange1()"></td> <td><input type="text" class="form-control form-control-sm" id="no22" value="0" disabled></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="no33" value="0" style="visibility: hidden;"></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">cancel</button> <button type="button" class="btn btn-primary btn-sm">confirm</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100311</td> <td></td> <td>A1</td> <td>IEB-010A(HB)</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>3</td> <td><span id="test11">50</span></td> <td><span id="test22">120</span></td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" id="test44" onfocusout="onchange1()" value="1" disabled></td> <td><span id="test33">6,000</span></td> <td><span id="per11">94%</span></td> <td><span id="ans112">93,750</span> </td> <td><span id="ans111">0</span></td> <td>0</td> <td><span id="ans333">0</span> </td> <td><span id="ans555">120</span></td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100311</td> <td>15</td> <td>IEB00011</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/15</td> <td>1</td> <td><span id="test55">10</span></td> <td><span id="test66">40</span></td> <td>USD</td> <td><input type="text" class="form-control form-control-sm" id="test77" onfocusout="onchange1()" value="1" disabled></td> <td><span id="test88">400</span></td> <td><span id="per22">6%</span></td> <td><span id="ans221">6,250</span></td> <td><span id="ans222">0</span></td> <td>0</td> <td><span id="ans444">0</span></td> <td><span id="ans666">40</span></td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td></td> <td>A1</td> <td>IEB-010ARTY</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>3</td> <td>25</td> <td>100</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>2,500</td> <td>86%</td> <td>43,103</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>100</td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td>15</td> <td>IEB011</td> <td>Wanda</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>1</td> <td>10</td> <td>40</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>400</td> <td>14%</td> <td>6,897</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>40</td> <td></td> </tr> <tr class="table-info" id="row2" > <td><input type="checkbox" class="checkbox-input"></td> <td>10004</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td> <td><input type="text" class="form-control form-control-sm" value="0" disabled></td> <td></td> <td></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">cancel</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td></td> <td>A1</td> <td>IEB-010ATYU</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>3</td> <td>25</td> <td>100</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>2,500</td> <td>86%</td> <td>43,103</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>100</td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td>15</td> <td>IEB011</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>1</td> <td>10</td> <td>40</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>400</td> <td>14%</td> <td>6,897</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>40</td> <td></td> </tr> <tr class="table-info" id="row2" > <td><input type="checkbox" class="checkbox-input"></td> <td>10004</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td> <td><input type="text" class="form-control form-control-sm" value="0" disabled></td> <td></td> <td></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">cancel</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td></td> <td>A1</td> <td>IEB-010AJKA</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>3</td> <td>25</td> <td>100</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>2,500</td> <td>86%</td> <td>43,103</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>100</td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td>15</td> <td>IEB011</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>1</td> <td>10</td> <td>40</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>400</td> <td>14%</td> <td>6,897</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>40</td> <td></td> </tr> <tr class="table-info" id="row2" > <td><input type="checkbox" class="checkbox-input"></td> <td>10004</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td> <td><input type="text" class="form-control form-control-sm" value="0" disabled></td> <td></td> <td></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">cancel</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td></td> <td>A1</td> <td>IEB-00010AKSLS</td> <td>abc</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>3</td> <td>25</td> <td>100</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>2,500</td> <td>86%</td> <td>43,103</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>100</td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td>15</td> <td>IEB011</td> <td>Wanda</td> <td>S</td> <td>BR</td> <td>brown</td> <td></td> <td>2021/04/20</td> <td>1</td> <td>10</td> <td>40</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>400</td> <td>14%</td> <td>6,897</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>40</td> <td></td> </tr> </tbody> </table> <style> .table-responsive>.fixed-column { position: absolute; display: inline-block; width: auto; padding: 0px 27px !important; /* border: hidden; */ margin-left: -27px; white-space: nowrap; /* border-right: 1px solid #ddd; */ } .table-responsive>.fixed-column th, td { padding: 15px 20px !important; /* border-bottom: 1px solid white !important; */ text-align: center; white-space: nowrap; size: auto; } table.dataTable thead th { text-align: center; white-space: nowrap; } table.dataTable th, td { width: 100%; margin: 0px 8px; /* clear: both; */ /* border-collapse: separate; */ /* border-spacing: 0; */ white-space: nowrap; size: auto; text-align: center; table-layout: fixed; } </style> 上面是我用过的html代码表。 我还根据需要修复了前 4 列。 下面的js代码用于固定列 // fixed column var $table = $('.temp1'); var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column'); $fixedColumn.find('th:not(:nth-child(-n+4)),td:not(:nth-child(-n+4))').remove(); $fixedColumn.find('tr').each(function (i, elem) { $(this).height($table.find('tr:eq(' + i + ')').height()); }); $table.addClass('original_table'); 现在在这段代码中我尝试了数据表的js。 $('.original_table').DataTable( { fixedHeader: true } ); 还尝试了其他解决方案，但不适用于标头修复。 你能告诉我们如何修复带有数据表功能或不带有数据表功能的标题吗？ 需要表格布局输出，如下面的屏幕图像。 这有效。 您必须再次使用相应的表头调整您的值。 $('.temp1').DataTable({ fixedHeader: true }); .table-responsive>.fixed-column { position: absolute; display: inline-block; width: auto; padding: 0px 27px !important; /* border: hidden; */ margin-left: -27px; white-space: nowrap; /* border-right: 1px solid #ddd; */ } .table-responsive>.fixed-column th, td { padding: 15px 20px !important; /* border-bottom: 1px solid white !important; */ text-align: center; white-space: nowrap; size: auto; } table.dataTable thead th { text-align: center; white-space: nowrap; } table.dataTable th, td { width: 100%; margin: 0px 8px; /* clear: both; */ /* border-collapse: separate; */ /* border-spacing: 0; */ white-space: nowrap; size: auto; text-align: center; table-layout: fixed; } <link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script> <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/> <div class="table-responsive"> <table class="temp1 table table-striped mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid" aria-describedby="user-list-page-info" id="user-list-table"> <thead class='headertbl'> <tr class="ligth" style="margin-left: 2px;"> <th>&nbsp;</th> <th>Id_No</th> <th>updated_date</th> <th>estimated_date</th> <th>product_id</th> <th>product_name</th> <th>box_no</th> <th>color_code</th> <th>color_name</th> <th>size_code</th> <th>size_name</th> <th>childe_color</th> <th>remark</th> <th>arrival_date</th> <th>units</th> <th>quantity</th> <th>unit_price</th> <th>currency</th> <th>excahnge</th> <th>current_currency(JPY)</th> <th>Amount</th> <th>Insurance_cost</th> <th>Shipping costs</th> <th>custom rate</th> <th>Tariffs</th> <th>Purchase price</th> <th>&nbsp;</th> </tr> </thead> <tbody> <!-- first row --> <tr class="table-info" id="row2"> <td><input type="checkbox" class="checkbox-input"></td> <td>10001</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="num1" value="1,00,000" onfocusout="change()"></td> <td><input type="text" class="form-control form-control-sm" id="num2" value="3,00,000" onfocusout="change()"></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="num3" value="10,000" onfocusout="change()"></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">update</button> <button type="button" class="btn btn-primary btn-sm">cancel</button> <button type="button" class="btn btn-primary btn-sm">confirm</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100310</td> <td></td> <td>A1</td> <td>IEB-010A(HB) + IEB-011B(CBX)</td> <td>Wanda</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>3</td> <td><span id="test1">50</span></td> <td><span id="test2">120</span></td> <td>USD</td> <td><input type="text" class="form-control form-control-sm" id="test4" onfocusout="change()" value="105"></td> <td><span id="test3">6,30,000</span></td> <td><span id="per">94%</span></td> <td><span id="ans">93,750</span> </td> <td><span id="ans11">2,81,250</span></td> <td>3.80%</td> <td><span id="ans33">9612</span> </td> <td><span id="ans55">18,417</span></td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100310</td> <td>15</td> <td>IEB011</td> <td>Wanda(すのこ)</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>1</td> <td><span id="test5">10</span></td> <td><span id="test6">40</span></td> <td>USD</td> <td><input type="text" class="form-control form-control-sm" id="test7" onfocusout="change()" value="105"></td> <td><span id="test8">42,000</span></td> <td><span id="per2">6%</span></td> <td><span id="ans2">6,250</span></td> <td><span id="ans22">18,750</span></td> <td>2.30%</td> <td><span id="ans44">388</span></td> <td><span id="ans66">6,114</span></td> <td></td> </tr> <!-- second row --> <tr class="table-info" id="row2"> <td><input type="checkbox" class="checkbox-input"></td> <td>10001</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="num11" value="0" onfocusout="change2()"></td> <td><input type="text" class="form-control form-control-sm" id="num22" value="0" onfocusout="change2()"></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="num33" value="0" onfocusout="change2()"></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">update</button> <button type="button" class="btn btn-primary btn-sm">cancel</button> <button type="button" class="btn btn-primary btn-sm">confirm</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100310</td> <td></td> <td>A1</td> <td>IEB-010A(HB) + IEB-011B(CBX)</td> <td>Wanda</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>3</td> <td><span id="test01">50</span></td> <td><span id="test02">120</span></td> <td>USD</td> <td><input type="text" class="form-control form-control-sm" id="test04" onfocusout="change2()" value="105"></td> <td><span id="test03">6,30,000</span></td> <td><span id="per01">100%</span></td> <td><span id="ans01">0</span> </td> <td><span id="ans011">0</span></td> <td>3.80%</td> <td><span id="ans033">0</span> </td> <td><span id="ans055">12,600</span></td> <td></td> </tr> <!-- third row --> <tr class="table-info" id="row2"> <td><input type="checkbox" class="checkbox-input"></td> <td>10003</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="no11" value="100000" onfocusout="onchange1()"></td> <td><input type="text" class="form-control form-control-sm" id="no22" value="0" disabled></td> <td></td> <td><input type="text" class="form-control form-control-sm" id="no33" value="0" style="visibility: hidden;"></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">cancel</button> <button type="button" class="btn btn-primary btn-sm">confirm</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100311</td> <td></td> <td>A1</td> <td>IEB-010A(HB) + IEB-011B(CBX)</td> <td>Wanda</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>3</td> <td><span id="test11">50</span></td> <td><span id="test22">120</span></td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" id="test44" onfocusout="onchange1()" value="1" disabled></td> <td><span id="test33">6,000</span></td> <td><span id="per11">94%</span></td> <td><span id="ans112">93,750</span> </td> <td><span id="ans111">0</span></td> <td>0</td> <td><span id="ans333">0</span> </td> <td><span id="ans555">120</span></td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100311</td> <td>15</td> <td>IEB011</td> <td>Wanda(すのこ)</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/15</td> <td>1</td> <td><span id="test55">10</span></td> <td><span id="test66">40</span></td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" id="test77" onfocusout="onchange1()" value="1" disabled></td> <td><span id="test88">400</span></td> <td><span id="per22">6%</span></td> <td><span id="ans221">6,250</span></td> <td><span id="ans222">0</span></td> <td>0</td> <td><span id="ans444">0</span></td> <td><span id="ans666">40</span></td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td></td> <td>A1</td> <td>IEB-010A(HB) + IEB-011B(CBX)</td> <td>Wanda</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>3</td> <td>25</td> <td>100</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>2,500</td> <td>86%</td> <td>43,103</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>100</td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td>15</td> <td>IEB011</td> <td>Wanda(すのこ)</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>1</td> <td>10</td> <td>40</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>400</td> <td>14%</td> <td>6,897</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>40</td> <td></td> </tr> <tr class="table-info" id="row2"> <td><input type="checkbox" class="checkbox-input"></td> <td>10004</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td> <td><input type="text" class="form-control form-control-sm" value="0" disabled></td> <td></td> <td></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">cancel</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td></td> <td>A1</td> <td>IEB-010A(HB) + IEB-011B(CBX)</td> <td>Wanda</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>3</td> <td>25</td> <td>100</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>2,500</td> <td>86%</td> <td>43,103</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>100</td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td>15</td> <td>IEB011</td> <td>Wanda(すのこ)</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>1</td> <td>10</td> <td>40</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>400</td> <td>14%</td> <td>6,897</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>40</td> <td></td> </tr> <tr class="table-info" id="row2"> <td><input type="checkbox" class="checkbox-input"></td> <td>10004</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td> <td><input type="text" class="form-control form-control-sm" value="0" disabled></td> <td></td> <td></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">cancel</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td></td> <td>A1</td> <td>IEB-010A(HB) + IEB-011B(CBX)</td> <td>Wanda</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>3</td> <td>25</td> <td>100</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>2,500</td> <td>86%</td> <td>43,103</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>100</td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td>15</td> <td>IEB011</td> <td>Wanda(すのこ)</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>1</td> <td>10</td> <td>40</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>400</td> <td>14%</td> <td>6,897</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>40</td> <td></td> </tr> <tr class="table-info" id="row2"> <td><input type="checkbox" class="checkbox-input"></td> <td>10004</td> <td>2021/04/10</td> <td>2021/04/20</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td> <td><input type="text" class="form-control form-control-sm" value="0" disabled></td> <td></td> <td></td> <td></td> <td> <button type="button" class="btn btn-primary btn-sm">cancel</button> </td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td></td> <td>A1</td> <td>IEB-010A(HB) + IEB-011B(CBX)</td> <td>Wanda</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>3</td> <td>25</td> <td>100</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>2,500</td> <td>86%</td> <td>43,103</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>100</td> <td></td> </tr> <tr class="ligth" style="background-color: white;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td>36100312</td> <td>15</td> <td>IEB011</td> <td>Wanda(すのこ)</td> <td>S</td> <td>BR</td> <td>ブラウン</td> <td></td> <td>2021/04/20</td> <td>1</td> <td>10</td> <td>40</td> <td>JPY</td> <td><input type="text" class="form-control form-control-sm" value="1" disabled></td> <td>400</td> <td>14%</td> <td>6,897</td> <td>0</td> <td>0.0%</td> <td>0</td> <td>40</td> <td></td> </tr> </tbody> </table> </div> 从一个简单的 DataTable 开始，它的两个功能都可以正常工作：固定列和固定标题： $(document).ready(function() { var table = $('#example').DataTable( { "fixedHeader": true, "scrollX": true, "fixedColumns": { leftColumns: 1 }, "paging": false } ); } ); <head> <meta charset="UTF-8"> <title>Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css"> <!-- fixed headings --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.min.js"></script> <!-- fixed columns --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.3.2/css/fixedColumns.dataTables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script> </head> <body> <div style="margin: 20px;"> <table id="example" class="display dataTable cell-border" style="width:150%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office in Country</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> <tr> <td>Jena Gaines</td> <td>Office Manager</td> <td>London</td> <td>30</td> <td>2008/12/19</td> <td>$90,560</td> </tr> <tr> <td>Quinn Flynn</td> <td>Support Lead</td> <td>Edinburgh</td> <td>22</td> <td>2013/03/03</td> <td>$342,000</td> </tr> <tr> <td>Charde Marshall</td> <td>Regional Director</td> <td>San Francisco</td> <td>36</td> <td>2008/10/16</td> <td>$470,600</td> </tr> <tr> <td>Haley Kennedy</td> <td>Senior Marketing Designer</td> <td>London</td> <td>43</td> <td>2012/12/18</td> <td>$313,500</td> </tr> <tr> <td>Tatyana Fitzpatrick</td> <td>Regional Director</td> <td>London</td> <td>19</td> <td>2010/03/17</td> <td>$385,750</td> </tr> <tr> <td>Michael Silva</td> <td>Marketing Designer</td> <td>London</td> <td>66</td> <td>2012/11/27</td> <td>$198,500</td> </tr> <tr> <td>Paul Byrd</td> <td>Chief Financial Officer (CFO)</td> <td>New York</td> <td>64</td> <td>2010/06/09</td> <td>$725,000</td> </tr> <tr> <td>Gloria Little</td> <td>Systems Administrator</td> <td>New York</td> <td>59</td> <td>2009/04/10</td> <td>$237,500</td> </tr> <tr> <td>Bradley Greer</td> <td>Software Engineer</td> <td>London</td> <td>41</td> <td>2012/10/13</td> <td>$132,000</td> </tr> <tr> <td>Dai Rios</td> <td>Personnel Lead</td> <td>Edinburgh</td> <td>35</td> <td>2012/09/26</td> <td>$217,500</td> </tr> <tr> <td>Jenette Caldwell</td> <td>Development Lead</td> <td>New York</td> <td>30</td> <td>2011/09/03</td> <td>$345,000</td> </tr> <tr> <td>Yuri Berry</td> <td>Chief Marketing Officer (CMO)</td> <td>New York</td> <td>40</td> <td>2009/06/25</td> <td>$675,000</td> </tr> <tr> <td>Caesar Vance</td> <td>Pre-Sales Support</td> <td>New York</td> <td>21</td> <td>2011/12/12</td> <td>$106,450</td> </tr> <tr> <td>Doris Wilder</td> <td>Sales Assistant</td> <td>Sydney</td> <td>23</td> <td>2010/09/20</td> <td>$85,600</td> </tr> <tr> <td>Angelica Ramos</td> <td>Chief Executive Officer (CEO)</td> <td>London</td> <td>47</td> <td>2009/10/09</td> <td>$1,200,000</td> </tr> <tr> <td>Gavin Joyce</td> <td>Developer</td> <td>Edinburgh</td> <td>42</td> <td>2010/12/22</td> <td>$92,575</td> </tr> </tbody> </table> </div> </body> </html> 然后逐一添加您的自定义设置。如果自定义破坏了表格，那么您可以重新考虑。或者针对该特定问题提出一个新的特定问题。 您还可以访问下载页面，自定义您要使用的资源。 据我所知，fixedHeader和fixedColumns不能一起工作，但至少对于fixedHeader来说，有一个更简单的解决方案应该始终有效： 对于数据表本身，设置scrollY:false（不过我建议设置scrollcollapse:true）并且不要使用fixedHeader插件。 如果您的数据表没有父级 div，请创建一个并设置overflow-y:scroll。 然后为父 div id（或类，如果有很多）设置以下 css： .parentdivclass th { position:sticky; top:0px; background-color:white; /* or whatever color it should be */ } 位置粘性将始终将所选元素相对于其直接的可滚动父元素“粘住”。您必须定义顶部、左侧、右侧、底部之一来告诉它应该粘在父项的哪一侧（因此这也适用于水平滚动）。 需要背景颜色，否则你会看到正文内容在标题后面滚动。 因此，这应该始终适用于任何数据表标头，包括特殊的标头，例如搜索过滤器等，如果父 div 在视口中可拖动，它甚至可以工作。

我只需将项目描述列文本分配为 Power Automate Desktop 中的变量

SQL查询信息 我可以使用 %queryresult[0]% 将整行指定为描述变量，但我想仅提取项目描述下的信息作为描述。不知道我会怎样

动态生成数据表和列时，单元格编辑不起作用

我有一个使用 Primefaces 12 的 Web 应用程序。当我在 xhtml 文件中使用 dataTable 时，如果我填充其中一列并转到另一列，则可以正常工作。但是当我使用动态生成的dataTable时

如何限制数据表中的行数？

我生成一个 DataTable（来自非 SQL 数据），然后使用 DataView 来过滤记录。 我想限制最终记录集中的记录数，但在生成 DataTa 时无法做到这一点...

如何使用 WordPress 中的 WPDataTables 插件跟踪每个用户的导出操作？

我目前正在评估 WordPress 项目的 WPDataTables 插件。具体来说，我需要跟踪每个用户从表中导出数据的次数。此功能对于我们的项目至关重要...

数据表中的滚动问题

我正在使用 Datatable 为 HTML 中的表格提供样式，并且我必须启用 ScrollY。 虽然它有效，但它有一个我正在努力解决的风格问题。 当您调整窗口大小时，为了一些重新...

Laravel Livewire Rappasoft - 隐藏 ID 列，但将其传递到操作列

如果我包含 Column::make("ID", "id")，代码可以正常工作并且 ID 在操作列中传递，但是我不想在 dataT 中显示每个用户的 ID ...

从c#中的网页中抓取表格

构建将网页上的 html 表抓取到变量中的函数的最佳方法是什么。 我希望能够向它传递一些唯一的标识符（例如表 ID 或其他东西），它会返回...

Datatables jQuery 事件在第二页上工作，而不是在其余页面上工作

我制作了以下 jQuery 事件，当您在第二页上分页时，该事件实际上起作用。 但是，它不会在第三页和其余页面上触发，没有 console.log 错误。 问题很明显...

PrimeVue 数据表更改分页器图标

我的 Vue 3 组合 API 应用程序中有一个 PrimeVue 数据表。我正在使用无样式模式和 Lara 预设。 我已将分页器设置为 true 并且工作正常。 但是，我想使用不同的图标......

如何修复 Laravel 8 Yajra 数据表中的“order 子句中的列 'created_at' 不明确”

我在 Laravel 项目中使用了 Yajra 数据表，但是在排序（也搜索）数据表时出现问题。 order 子句中的列“created_at”不明确 我知道这个错误是因为...

使用fixedColumn的数据表滚动x问题

我使用带有固定列的 jquery 数据表。一切正常，但我在滚动 x 时遇到问题。 正如你所看到的，我无法从固定列中删除滚动 x。有什么想法可以解决这个问题吗？

Jquery 数据表着色文本和背景的 RowCallBack 函数，使用 ajax 从 mysql 返回的值

需要在所附屏幕截图中了解此问题。如果我输入固定颜色值（即字体和行背景的#ffffff），它会很好地工作。 但是，我想使用从

如何用 JS 中另一个数组匹配的对象自动填充数组中对象的空值？

我一直在尝试创建一个表格，根据之前提供的信息自动填充空字段，但我不知道如何实现，你有什么想法吗？ 这是一个......的例子

在VB.NET和SQL中过滤大数据并限制结果

我很难在文本更改事件上实现基于许多字段（如文本框）的多达 500,000 条记录的大数据搜索表单。 我尝试了两种解决方案，但没有得到满意的结果。 冷杉...