jquery - 如何对齐两个 html 表之间的列？

Question

我有以下由 ASP.net GridView 控件生成的表格:

<!-- TOP TABLE WITH DROPDOWNS -->
<table class="taskGridView">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<!-- BOTTOM DATA TABLE -->
<table id="yourTasksGV">
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

显示这个:

如您所见，第一个表格(带有下拉列表)未与底部表格对齐。

我的 windows.load() 事件中有以下代码来匹配两个表之间的每一列:

var firstCol = $("#yourTasksGV").find("tr > td:first").width();
$(".taskGridView").find("tr > td:first").width(firstCol + "px");

var secondCol = $("#yourTasksGV").find("tr > td:second").width();
$(".taskGridView").find("tr > td:second").width(secondCol + "px");

var thirdCol = $("#yourTasksGV").find("tr > td:third").width();
$(".taskGridView").find("tr > td:third").width(thirdCol + "px");

var fourthCol = $("#yourTasksGV").find("tr > td:fourth").width();
$(".taskGridView").find("tr > td:fourth").width(fourthCol + "px");

var fifthCol = $("#yourTasksGV").find("tr > td:fifth").width();
$(".taskGridView").find("tr > td:fifth").width(fifthCol + "px");

var sixthCol = $("#yourTasksGV").find("tr > td:sixth").width();
$(".taskGridView").find("tr > td:sixth").width(sixthCol + "px");

var seventhCol = $("#yourTasksGV").find("tr > td:seventh").width();
$(".taskGridView").find("tr > td:seventh").width(seventhCol + "px");

var eighthCol = $("#yourTasksGV").find("tr > td:eighth").width();
$(".taskGridView").find("tr > td:eighth").width(eighthCol + "px");

var ninthCol = $("#yourTasksGV").find("tr > td:ninth").width();
$(".taskGridView").find("tr > td:ninth").width(ninthCol + "px");

当页面加载时，列仍然没有对齐。

我如何修改/添加到我现有的代码以获得与两个表对齐的预期结果？另外，我如何对其进行编码，以便如果任一表中的任何列发生变化，从下拉选择中选择一个选项，两个表中的列都会调整？

Answer 1

让两个表完全匹配绝非易事。可以做到，但您必须跟踪其中任何一个的变化，并在发生变化时将它们应用到另一个。这将是一场失败的战斗。

我会通过以下两种方式之一完成此任务:

1) 使用一个插件，它可以为您提供您似乎正在寻找的所有功能，这将节省您的时间和心痛，而且由于前端数据模型，它的运行速度比后端过滤快得多。我的首选是 jQuery Datatables。 Here's an example that does column filtering with inputs at the bottom -- 但如果需要，很容易将搜索附加到顶部而不是底部。这种方法的美妙之处在于它与后端无关，因此它可以通过 php、java、.net 等运行。

2) 如果您想通过另一种更手动的方法(我不推荐这种方法)进行所有过滤，只需制作一个表格，然后将您的过滤器设置到一行中，您可以使用自己的类来设置样式。