如何使用 Javascript 或 JQuery 在父级中显示子记录数

Question

<html>
<head>
    <script src="some.js" type="text/javascript"></script>
    <script type="text/javascript">
        //javascript-jquery code
    </script>
</head>
<body>
    <table>
        <tr id="parent_1">
            <td>Parent 1</td>
        </tr>
        <tr class="child">
            <td>Child 1</td>
        </tr>
        <tr class="child">
            <td>Child 2</td>
        </tr>
        <tr id="parent_2">
            <td>Parent2</td>
        </tr>
    </table>
</body>
</html>

我希望“Parent 1”文本更改为“Parent 1(2)”，其中“2”是使用 Javascript 或 Jquery 的给定父级的子级数。 这怎么可能？

Answer 1

嗯。 艰难的一个。 :) 不过，这应该可以：

$(function() {
    $("tr[id^='parent_']").each(function() {
        var count = 0;
        $(this).nextAll('tr').each(function() {
            if($(this).hasClass('child')) {
                count++;
            } else {
                return false;
            }
        });
        $(this).find('td').append(' (' + count + ')');
    });
});

测试和工作。

尽管上述方法有效，但效率并不高。 我还想花一点时间建议您稍微更改一下 HTML 的格式。 你想让你的代码在语义上尽可能与它所包含的内容相关。 拥有一张巨大的桌子来混合父母和孩子并不是实现这一目标的最佳方式。 我不确定你的用例是什么，但考虑做这样的事情：

<ul>
  <li id="parent_1">
    <span>Parent 1</span>
    <ul>
      <li>Children 1</li> 
      <li>Children 2</li>
      <li>Children 3</li>
    </ul>
  </li>
  <li id="parent_2">
    <span>Parent 2</span>
    <ul>
      <li>Children 1</li> 
    </ul>
  </li>
  <li id="parent_3">
    <span>Parent 3</span>
    <ul>
      <li>Children 1</li> 
      <li>Children 2</li>
    </ul>
  </li>
</ul>

您仍然可以设置它的样式，但是您想赋予它您想要的外观，尽管如果您真的要显示有关父母和孩子的表格数据，这可能并不那么容易。

但是，使用该代码，您可以使用更有效的方式简化上述内容：

$('ul > li').each(function() {
    var count = $(this).find('li').length;
    $('span', this).append(' (' + count + ')');
});

如果不可能/不希望将代码从表更改为列表，但您可以访问可能生成此表的服务器端代码，那么您至少可以通过为所有孩子提供一个具有 ID 的类来使事情变得更容易的父母，并给所有的父母一个共同的类：

<table>
    <tr id="parent_1" class="parent">
        <td>Parent 1</td>
    </tr>
    <tr class="child parent-1">
        <td>Child 1</td>
    </tr>
    <tr class="child parent-1">
        <td>Child 2</td>
    </tr>
    <tr id="parent_2" class="parent">
        <td>Parent2</td>
    </tr>
    <tr class="child parent-2">
        <td>Child 1</td>
    </tr>
    <tr id="parent_3" class="parent">
        <td>Parent3</td>
    </tr>
    <tr class="child parent-3">
        <td>Child 1</td>
    </tr>
    <tr class="child parent-3">
        <td>Child 2</td>
    </tr>
    <tr class="child parent-3">
        <td>Child 3</td>
    </tr>
</table>

这将允许您执行此操作，比原始解决方案快得多：

$('tr.parent').each(function() {
    var id = $(this).attr('id').split('_').pop();
    var count = $('tr.parent-' + id).length;
    $(this).find('td').append(' (' + count + ')');
});

Answer 2

给父母一个“父母”类，让它更容易一些。

$('tr.parent').each(function() {
  var next = $(this).next();
  var count = 1;
  while (next = $(next).next() && $(next).hasClass('child')) {
    count++;
  }
  $(this).find('td').append(' (' + count + ')');
});

Answer 3

因为您的 html 实际上并没有在标记中将子节点放在父节点下方，所以最简单的方法是循环遍历所有 TR 并为每个父节点计算 class="child" 。 Paolo 的代码应该为你做这件事。

最好将子节点定义为父 td 的实际子节点，然后 jquery 可以为您简化事情。 如果你有能力像这样重构你的表：

<table>
<tr id="parent_1">
<td>Parent 1
<table>
<tr class="child">
<td>Child 1</td>
</tr>
<tr class="child">
<td>Child 2</td>
</tr>
</table>
</td>
</tr>
<tr id="parent_2">
<td>Parent2</td>
</tr>
</table>

那么你可以编写更简单的jquery，如：

$("td").each(function(){$(this).val($(this).val() + "(" + $(this).find("td").length + ")"); });

Answer 4

我发现复杂的 jQuery 选择器和循环非常有趣，因为 DOM 已经有一个非常好的 'rowIndex' 属性，您可以使用它来简单且更有效地获取子项的数量：

var p1= document.getElementById('parent_1');
var p2= document.getElementById('parent_2');

var childn= p2.rowIndex-p1.rowIndex-1;
p1.cells[0].firstChild.data+= ' ('+childn+')';

如何使用 Javascript 或 JQuery 在父级中显示子记录数

问题描述

4 个解决方案

解决方案1
7 2009-04-17 17:30:21

解决方案2
1 2009-04-17 17:34:25

解决方案3
0 2009-04-17 17:38:18

解决方案4
0 2009-04-18 04:27:01

如何使用 Javascript 或 JQuery 在父级中显示子记录数

问题描述

4 个解决方案

解决方案1 7 2009-04-17 17:30:21

解决方案2 1 2009-04-17 17:34:25

解决方案3 0 2009-04-17 17:38:18

解决方案4 0 2009-04-18 04:27:01

解决方案1
7 2009-04-17 17:30:21

解决方案2
1 2009-04-17 17:34:25

解决方案3
0 2009-04-17 17:38:18

解决方案4
0 2009-04-18 04:27:01