如何从 javascript 填充表中提取数据？答案

【问题标题】：How do I pull data from a javascript populated table?如何从 javascript 填充表中提取数据？
【发布时间】：2010-07-13 18:09:50
【问题描述】：

我正在尝试从填充的 javascript 表中提取数据。如何从 javascript 行中提取值？我正在使用

            for (var i = 0; i < rowCount; i++) { 
            var row = table.rows[i]; 
            //This is where I am having trouble 
               var chkboxIndicator = row.cells[0].childNodes[1]; 
               alert(chkboxIndicator);
            //
            if (chkboxIndicator == indicator && Checkbox.checked == false) { 
                table.deleteRow(i); 
                rowCount--; 
                i--; 
            } 
        }

其中有“未定义”的警报消息。我也尝试了 .value 和 .text ，但没有任何进展。如何从 childNodes 获取文本？

【问题讨论】：

标签： c# .net asp.net javascript jquery

【解决方案1】：

既然您声称使用 jQuery，为什么不使用它来获取复选框并简化您的生活？

$("#mytableid tr").each(function() {
    // find the checkbox (assuming you have only one; if not, use :eq(n))
    var $checkbox = $("input:checkbox", this);
    // if it's checked, delete this row
    if ($checkbox.is(":checked"))
        $(this).remove();
});

有更疯狂的方法可以做到这一点，但我认为这个例子可以说明问题。 :)

【讨论】：

【解决方案2】：

您确定chkboxIndicator 不是null？

如果它为 null，它将警告为未定义。

试试

for (var i = 0; i < rowCount; i++) 
{ 
    var row = table.rows[i]; 
    // Add null check for row
    if (row != null)
    {
        //This is where I am having trouble 

        // Add null check for cell
        if (row.cells[0] != null)
        {
            var chkboxIndicator = row.cells[0].childNodes[1];

            // Added null check for chkboxIndicator
            if (chkboxIndicator != null)
            {
                alert(chkboxIndicator);


                if (chkboxIndicator == indicator && Checkbox.checked == false) 
                { 
                    table.deleteRow(i); 
                    rowCount--; 
                    i--; 
                }
            }
            else
            {
                alert('chkboxIndicator is NULL');
            }       
        }
    }
}

【讨论】：

childNodes 值为 null。如何从中获取文本/值？
你的 html 是什么样的？您可以通过调用 innerText 或 innerHTML 从单元格中获取文本

【解决方案3】：

取决于您的 DOM 的实际外观。

我怀疑你的问题是 childNodes[1] 可能是一个文本节点。

您可能想在单元格上使用选择器，例如：

$(row.cells[0]).find("input[type='checkbox']");

【讨论】：

【解决方案4】：

如果您也希望它更快，请使用 jOrder (http://github.com/danstocker/jorder)。

使用您的数据创建一个 jOrder 表。确保在其中使用真或假值“检查”了一个字段，并在该列和 ID 上放置一个索引：

var table = jOrder(data)
    .index('id', ['ID'])
    .index('checked', ['checked'], { grouped: true });

然后，您可以使用table.where([{ 'checked': true }]) 作为源删除未选中的行来重建您的网格。

但首先，使用 jOrder 表中的数据填充您的网格。使用table.flat() 获取平面表。构建网格时，将记录 ID 绑定到复选框，例如通过$('#elem').data()。当一个复选框被（取消）选中时，更新表中的“选中”值：

var before = table.where([{ 'ID': 5 }])[0];
var after = table.where([{ 'ID': 5 }])[0];
after.checked = true;
table.update(before, after);

请注意，您不应该在“(un)check all”事件中为每个项目执行此操作。在这种情况下，只需简单地传递 table.flat() 或在它返回的缓冲区中设置“已检查”值，然后发出 table.reindex() 然后调用 table.where(...)。

【讨论】：

看起来很有趣！您是否有一些示例代码或有关如何使用 jOrder 和 HTML 表的内容？让它们保持同步？
目前还没有快速的方法，但很快就会有。现在，即使是最轻微的更改，您也必须重新构建表。关注 jOrder 博客jorder.wordpress.com，我会尽可能多地发布新闻、计划和示例代码。

【解决方案5】：

我缺少的代码块如下

var row = table.rows.item(i).cells;
var cellLength = row.length;
var cellVal = row.item(5).innerHTML;

感谢你带领我走向正确的方向

【讨论】：