使用 jquery 遍历表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9132347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iterating through table cells using jquery
提问by hughesdan
I have a table containing a variable number of columns. I wrote a function to iterate through each cell in each row to do the following:
我有一个包含可变列数的表。我编写了一个函数来遍历每一行中的每个单元格以执行以下操作：
- Check for the presence of an input
- Retrieve the value of the input
- Append a pie chart to any cell where condition #1 evaluates to true
- 检查输入是否存在
- 检索输入的值
- 将饼图附加到条件 #1 评估为真的任何单元格
Here's my code:
这是我的代码：
function addPieCharts() {
var htmlPre = "<span class='inlinesparkline' values='";
var htmlPost = "'></span>"
var colors = ["red", "blue"];
$("#MarketsTable tr").each(function () {
$('td').each(function () {
var value = $(this).find(":input").val();
var values = 100 - value + ', ' + value;
if (value > 0) {
$(this).append(htmlPre + values + htmlPost);
}
})
})
$('.inlinesparkline').sparkline('html', { type: 'pie', sliceColors: colors });
}
Steps 1-3 are basically working as described. When this runs the pie charts are added to the correct cells displaying the correct values. My problem is that I'm expecting just one pie chart per cell where there exists an input. However, I have n pie charts per cell where n is equal to the number of columns in the table. I suspect I'm using jQuery's each() method incorrectly. Can someone tell me what I've done wrong?
步骤 1-3 基本上按照描述进行。运行时，饼图会添加到显示正确值的正确单元格中。我的问题是，我期望每个存在输入的单元格只有一个饼图。但是，我每个单元格有 n 个饼图，其中 n 等于表中的列数。我怀疑我错误地使用了 jQuery 的 each() 方法。有人能告诉我我做错了什么吗？
回答by ShankarSangoli
When you select tdpass the context as tr(this) so that it will look for tdonly in the current tr. Try this.
当您选择td将上下文作为 tr( this)传递时，它将td仅在当前tr. 尝试这个。
$("#MarketsTable tr").each(function () {
$('td', this).each(function () {
var value = $(this).find(":input").val();
var values = 100 - value + ', ' + value;
if (value > 0) {
$(this).append(htmlPre + values + htmlPost);
}
})
})
回答by Didier Ghys
Here is how I would modify you code:
以下是我将如何修改您的代码：
#MarketsTable td:has(:input): this selector will find TD that has at leats one INPUT element insideno need to store your parts of html in variables IMO, just create the element when needed and append it to the TD
#MarketsTable td:has(:input): 这个选择器会找到里面至少有一个 INPUT 元素的 TD无需将您的 html 部分存储在变量 IMO 中，只需在需要时创建元素并将其附加到 TD
Here's the modified code:
这是修改后的代码：
function addPieCharts() {
var colors = ["red", "blue"];
// directly select the TD with an INPUT element inside
$('#MarketsTable td:has(:input)').each(function() {
var value = $(this).find(":input").val();
if (value > 0) {
// only make the values string if necessary, when value > 0
var valStr = (100 - value).toString() + ', ' + value;
// create your span tag and append it to 'this' (the TD in this case)
$('<span class="inlinesparkline" values="' + valStr + '"></span>').appendTo(this);
}
});
$('.inlinesparkline').sparkline('html', {
type: 'pie',
sliceColors: colors
});
}
