使用 JQuery 用动态加载的 HTML 表上的单元格替换空格答案

【问题标题】：Replacing void spaces by cells on dynamically loaded HTML table using JQuery使用 JQuery 用动态加载的 HTML 表上的单元格替换空格
【发布时间】：2012-01-20 16:05:06
【问题描述】：

我有这个表，我动态加载它，然后为 Well[#] 添加相应的列标题。当我加载数据时，我不知道我从多少口井中获取数据。所以我不知道这张桌子会有多大。

这里的问题是这样的，我有一张桌子是这样的：

如您所见，我有空白空间填充不是 4 Wells 长的行（用红色表示），我想用蓝色表示的单元格填充这些空间。我正在使用萤火虫分析表格，寻找一些表明根本没有单元格的字符串，但根本没有字符串可以替换。

我有对象myTable()，有什么方法可以让我做我上面描述的事情吗？

【问题讨论】：

您能否在jsfiddle.net 中发布您的 HTML 示例？
必须发布表格的结构才能以 100% 的准确率回答这个问题。

标签： jquery html html-table cell

【解决方案1】：

这个问题最好在表的生成过程中解决，而不是事后修补。有没有办法让您在开始写出表格之前确定最大列数？如果有，你应该这样做。

如果由于某种原因无法实现，您可以实现：

var TRs = $('table tr');
var maxTD = Math.max.apply(Math,        // this is a generic solution, 
    $.map(TRs, function(tr, i) {        // for your case, you may just get the
        return $(tr).find('td').length; // length of the 2nd row
    }));

TRs.each(function(tr, i) {
    var addTD = maxTD - $(tr).find('td').length;
    $(tr).append(new Array(addTD + (1)).join('<td>&nbsp;</td>');
});

【讨论】：

【解决方案2】：

//cache the table element and find the number of columns
var $table       = $('table'),
    column_count = $table.find('tr').eq(1).children('td').length;

//iterate through each row
$table.find('tr').each(function () {

    //cache this row and it's children columns
    var $this = $(this),
        $tds  = $this.children('td');

    //check if the number of columns in this row is less than the number of columns in the header
    if ($tds.length < column_count) {

        //add the difference of the needed columns and the current columns to the row
        for (var i = 0, len = (column_count - $tds.length); i < len; i++) {
            $this.append('<td>&nbps;</td>');
        }
    }
});

这是一个演示：http://jsfiddle.net/AEjTZ/

请注意，这会查看表格中的第二行以查看有多少列（我试图定位屏幕截图中的绿色行）。您可能需要更改它以定位正确的行（屏幕截图中的绿色行）。

【讨论】：

我认为这行不通，因为您假设第一行包含与问题行相同数量的 td。然而，他似乎在使用 colspans，所以数字实际上并不相等。
@mrtsherman 我在回答中说过，但这不是大问题。您只需将.eq(1) 更改为问题屏幕截图中绿色行所在的行。基本上是一行包含所有列并且可以作为目标。如果需要动态定位，您可以遍历行并找到表中最大的列数。
哎呀，我从来没有看过代码。如果他可以轻松识别他的数据行，那么这是一个很好的解决方案。我认为这似乎是合理的。
非常感谢，这对我帮助很大。我只需要为行添加条件，因此它会跳过标题和子标题（绿色）

【解决方案3】：

我不知道您是如何动态构建此表的，但是当我过去遇到此问题时，我正在构建它作为我正在循环的 SQL 查询的结果。如果这就是你这样做的方式，那么问题很可能是这些值组合（那个特定的井和基因型）根本没有记录。我使用的解决方案是以这样一种方式更改数据库查询，即总是为每个组合返回一行（在这种情况下是井和基因型）。您可以通过基表之间的“开放”（也称为笛卡尔）联接来做到这一点。然后，将外部联接返回到包含要在其中显示的数据的表。如果您提供一些 SQL，我可以协助构建查询。

【讨论】：