如何使用 Javascript 或 JQuery 在父级中显示子记录数
[英]How to display count of child record in parent using Javascript or JQuery
问题描述
<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>
I wanted "Parent 1" text to change to "Parent 1(2)" where '2' is the number of children for the given parent using Javascript or Jquery.
我希望“Parent 1”文本更改为“Parent 1(2)”，其中“2”是使用 Javascript 或 Jquery 的给定父级的子级数。 How is this possible?这怎么可能？
4 个解决方案
解决方案1
7 2009-04-17 17:30:21
Mmm.嗯。 Tough one.艰难的一个。 :) This should do it, though: :) 不过，这应该可以：
$(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 + ')');
});
});
Although the above works, it is not very efficient.尽管上述方法有效，但效率并不高。 I also want to take a second to suggest you change the format of your HTML a little bit.我还想花一点时间建议您稍微更改一下 HTML 的格式。 You want to make your code be as semantically relevant to the content it holds as possible.你想让你的代码在语义上尽可能与它所包含的内容相关。 Having one huge table mixing parents and childs is not the optimal way of achieving this.拥有一张巨大的桌子来混合父母和孩子并不是实现这一目标的最佳方式。 I am not sure what your use case is here, but consider doing something like this:我不确定你的用例是什么，但考虑做这样的事情：
<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>
You could still style this however you want to give it the appearance you want, although it may not be as easy if you really are displaying tabular data about the parents and children.您仍然可以设置它的样式，但是您想赋予它您想要的外观，尽管如果您真的要显示有关父母和孩子的表格数据，这可能并不那么容易。
With that code, however, you could then simplify the above with a much more efficient:但是，使用该代码，您可以使用更有效的方式简化上述内容：
$('ul > li').each(function() {
var count = $(this).find('li').length;
$('span', this).append(' (' + count + ')');
});
If changing the code from a table to a list is not possible/desired, but you have access to the server-side code that presumably generates this table, you could at least make things easier then by giving all the children a class with the ID of the parent, and giving all the parents a common class:如果不可能/不希望将代码从表更改为列表，但您可以访问可能生成此表的服务器端代码，那么您至少可以通过为所有孩子提供一个具有 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>
Which would then allow you to do this, much faster than the original solution:这将允许您执行此操作，比原始解决方案快得多：
$('tr.parent').each(function() {
var id = $(this).attr('id').split('_').pop();
var count = $('tr.parent-' + id).length;
$(this).find('td').append(' (' + count + ')');
});
解决方案2
1 2009-04-17 17:34:25
Give the parents a class of "parent" to make it a bit easier.给父母一个“父母”类，让它更容易一些。
$('tr.parent').each(function() {
var next = $(this).next();
var count = 1;
while (next = $(next).next() && $(next).hasClass('child')) {
count++;
}
$(this).find('td').append(' (' + count + ')');
});
解决方案3
0 2009-04-17 17:38:18
Because your html doesn't actually place the child nodes below the parent nodes in markup, the easiest way to do this will be to loop through all the TR's and count up class="child" for each parent.因为您的 html 实际上并没有在标记中将子节点放在父节点下方，所以最简单的方法是循环遍历所有 TR 并为每个父节点计算 class="child" 。 Paolo's code should do this for you. Paolo 的代码应该为你做这件事。
Better would be to have the child nodes defined as actually children of the parent td, then jquery can simplify things for you.最好将子节点定义为父 td 的实际子节点，然后 jquery 可以为您简化事情。 If you can afford to refactor your table like this:如果你有能力像这样重构你的表：
<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>
then you can write simpler jquery like:那么你可以编写更简单的jquery，如：
$("td").each(function(){$(this).val($(this).val() + "(" + $(this).find("td").length + ")"); });
解决方案4
0 2009-04-18 04:27:01
I'm finding the complex jQuery selectors and loops quite amusing, given that the DOM already has a perfectly good 'rowIndex' property you can use to grab the number of children simply and much more efficiently:我发现复杂的 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+')';
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.