2

我是 javascript 的新手，所以让我先说一下。

我经常访问的网站有 50 个左右的项目，并在表格中包含有关该项目的详细信息。每个表格行包含几个 td 单元格。有些行具有相似的事物类型，例如 USB 驱动器或其他。我想捕获每一行，以便我可以对它们进行分组和重新排序以适应我的口味。

我有这个对象：

function vnlItemOnPage(){
  this.Category = "unknown";
  this.ItemClass = "vnlDefaultClass";
  this.ItemBlock = {};
}

这代表一排。

我一直想弄清楚的是如何捕获 html 块< tr>stuff< /tr>并将其保存到this.ItemBlock.

这部分很简单：

vnlItemOnPage.ItemBlock = element.getElementByClassName('className')[0]

?

这似乎很简单。我错过了什么吗？

这部分我被卡住了：

将有 50 个，所以我需要一个 vnlItemOnPage 数组？

vnlAllItems = ???

var vnlAllItems = [vnlItemOnPage]?

而且，我将如何添加到数组并从数组中删除？如果这很复杂，我可能不会从数组中删除，不要打扰它。

一旦我捕获了 < tr> html，我就可以将它附加到一个表格元素中，如下所示：

myTable.appendChild(vnlAllItems[0].ItemBlock);

正确的？

如果您认为我从错误的方向处理这个问题，我愿意接受任何建议。性能不是一个大问题——至少现在是这样。稍后我可能会尝试将几页合并为几百个项目。

感谢你的协助！

[编辑]

也许问题的第二部分太基础了，很难相信我不知道答案。

该数组可以是：var vnlAllItems = []

然后就是： var row1 = new vnlItemOnPage; vnlAllItems.push(row1); var row2 = 新的 vnlItemOnPage; row2.ItemBlock = element.getElementByClassName('className')[0];

我想结束这个问题，但我讨厌在没有处理数组的情况下这样做。

4

2 回答 2

1

不确定它是否是您要查找的内容，但如果我想操作表行，我会存储：

  • 行的整个 html<td>1</td>...<td>n</td>作为字符串，所以我可以快速重建行
  • 对于每一行存储实际的单元格值[1, ..., n]，所以我可以对值进行一些操作（排序）

要将行作为 html 获取，您可以使用：

var rowHtml = element.getElementByClassName('className')[0].innerHTML;

要获取单元格值数组，您可以使用：

var cells = [];
var cellElements = element.getElementByClassName('className')[0].cells;
for(var i=0;i<cellElements.length;i++) {
    cells.push(cellElements[i].innerText);
}

所以存储所有这些的对象看起来像：

function vnlItemOnPage(){
  this.Category = "unknown";
  this.ItemClass = "vnlDefaultClass";
  this.RowHtml = "";
  this.RowCells = [];
}
于 2011-05-20T22:29:56.273 回答
1

JQuery是你的朋友。

这将为您提供所需表格正文中第一行的内部 HTML：

var rowHtml = $('table#id-of-desired-table tbody tr:first').html() ;

要获取外部 HTML，您需要一个 jQuery 扩展方法：

jQuery.fn.outerHTML = function() {
  return $('<div>').append( this.eq(0).clone() ).html();
};

用法很简单：

var rowHtml = $('table#id-of-desired-table tbody tr:first').outerHtml() ;

享受！

于 2011-05-20T20:50:04.133 回答