Question

我需要知道如何将表中的多行关联在一起。我会尽力解释。

我们有一个页面，客户在表格中输入产品，描述和规格列表。此页面由类似于富文本编辑器的CMS管理。布局将是这样的。

<h1>Toyota - TR - H1</h1>
<h2>Toyota Landcruiser - TR - H2</h2>
<h3>Toyota Landcruiser Tray - TR - H3  Description(td2) specifications(td3)</h3>

TR - 表行 TD - 表栏

现在，H1是公司名称，H2是部分，H3是实际产品。一个部门下面会有很多产品，公司下面可能会有很多部门，并且会有多个公司。客户端将无法添加类或ID。它们只会在现有表中创建一个新行并将转储数据。我必须将此文件中的内容加载到主站点。我如何将所有产品（H3）与其母公司（H2）和母公司（H1）联系起来？无法使用RegEx，因为无法保证产品名称将以公司名称为前缀。最终结果应如下所示。我要求客户使用H1，H2，H3来区分产品，部门和公司。

http://imageupload.org/?d=3E55009E1

Answer 1

尝试使用jQuery的nextUntil。

描述：获取每个元素的所有兄弟姐妹，但不是包括由选择器，DOM节点或jQuery匹配的元素对象通过了。

http://jsfiddle.net/WF4mt/2/

//first add a class to each row containing an h1 tag so that
//we can identify blocks of rows
$('h1').each( function(index) {
    //add a class to each h1 tag
    $(this).closest('tr').addClass('h1row');
});

//then for each h1 row find subsequent rows that are 'children'
$('tr.h1row').each( function(index) {
    var rows = $(this).nextUntil('tr.h1row');
    rows.addClass('y' + index);
});

Answer 2

我会捅你所问的东西，希望我做对了。

如果你在jQuery中这样做，

$('h1')

将提取所有h1标签的列表，因此根据您的文本，应找到所有记录。

如果你想处理所有的h1并找到它们相应的h2和h3，它会是这样的

$('h1').each(function(index)
{
    var h1 = $(this);

    // since we now have the index for this h1 in the page, use it to find the h2 and h3 elements
    var h2 = $('h2:eq(' + index + ')'),
        h3 = $('h3:eq(' + index + ')');

    // now we can get the text for each item and we have our company, section and product.
    var company = h1.text(),
        section = h2.text(),
        product = h3.text();
});

然后你可以根据需要操纵或获取h2和h3。

我希望能回答你所问的问题。

Answer 3

问题是所有元素都在同一级别，并且没有父子关系。简而言之，我想在与特定公司相关的所有行中添加类或ID。我想的逻辑是从一个h1开始，然后在该行和它下面的所有行中添加一个类，直到它到达另一个h1。对所有行重复此过程。

好的，如下所示，选择所有h1，h2和h3元素并循环遍历它们，注意multiple selector syntax按文档顺序返回元素：

function assignIds() {
   var currentH1 = 0,
       currentH2 = 0,
       currentH3 = 0;
   $("h1,h2,h3").each(function() {
      var $current = $(this);
      switch(this.tagName.toLowerCase()){
         case "h1":
            currentH1++;
            currentH2 = 0;
            currentH3 = 0;
            $current.attr("id", currentH1)
                    .data("companyId", currentH1);
            break;
         case "h2":
            currentH2++;
            currentH3 = 0;
            $current.attr("id", currentH1 + "_" + currentH2)
                    .data({"companyId" : currentH1,
                           "sectionId" : currentH2});
            break;
         case "h3":
            currentH3++;
            $current.attr("id", currentH1 + "_" + currentH2 + "_" + currentH3)
                    .data({"companyId" : currentH1,
                           "sectionId" : currentH2,
                           "productId" : currentH3});
            break;
      }
   });
);

上面指定data attributes并且还显示了一种生成唯一ID的方法。（例如，对于h3元素，id的格式为“companyId_sectionId_productId”，其中“2_4_9”将是第二个公司的第四部分的第九个产品。）显然，您可以以不同的方式设置它们或分配类或其他任何内容。

关联表中的行

3 个答案: