我在一张表中有4列和10行左右。我正在尝试让一个onclick
事件搜索被单击的行并从该行中删除"T“,但现在它正在搜索并删除表中的所有"T”,而不仅仅是单击的行。我该换什么?
$('#table_output tbody').on('click', 'tr', function() {
console.log(table.row(this).data());
$(':contains("T")').each(function(){
$(this).html($this).html().split("T").join(""));
});
alert(JSON.stringify(table.row(this).data()));
})
发布于 2022-08-31 04:43:17
:contains("T")
会找到每个包含'T‘的元素。我用$(this).find(':contains("T")')
代替了它,它只搜索被单击的<tr>
的子级。
还有一些我修复的字体,还有一些未知的变量,比如table
,我已经将其注释掉了。
$('#table_output tbody').on('click', 'tr', function() {
//console.log(table.row(this).data());
$(this).find(':contains("T")').each(function(){
//$(this).html($(this).html().split("T").join(""));
$(this).html($(this).html().split("T").join(""))
});
//alert(JSON.stringify(table.row(this).data()));
})
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<table id="table_output">
<tbody>
<tr>
<td>Total</td>
<td>Tee Time</td>
<td>Food for Thought</td>
</tr>
<tr>
<td>Total</td>
<td>Tee Time</td>
<td>Food for Thought</td>
</tr>
<tr>
<td>Total</td>
<td>Tee Time</td>
<td>Food for Thought</td>
</tr>
</tbody>
</table>
发布于 2022-08-31 06:06:22
这是另一个关于脚本的看法。我选择只对实际的文本节点(this.nodeType===Node.TEXT_NODE
)进行操作。这将可靠地避免在过程中混淆html标记。在我的示例中,我将所有小写"t“替换为空字符串("")。将.replaceAll("t","")
直接应用于包含"t“的元素的innerHTML字符串将使第二行的内表结构混乱。通过限制文本节点上的操作,只有所有内容仍然保持不变:
$('#table_output tbody').on('click', 'tr', function() {
const repl="t";
$(`:contains(${repl})`,this).contents().each(function(){
if (this.nodeType===Node.TEXT_NODE && this.textContent.includes(repl))
this.textContent=this.textContent.replaceAll(repl,"");
});
})
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<table id="table_output">
<tbody>
<tr>
<td>Total</td>
<td>Tea time</td>
<td>Food for thought</td>
</tr>
<tr>
<td>total</td>
<td>tea time
<TABLE>
<tr><TD>attitude</TD><TD>beta</TD></tr>
<tr><TD>gamma</TD><TD>delta</TD></tr>
</TABLE>
</td>
<td>Food for thought</td>
</tr>
<tr>
<td>Total</td>
<td>tea time</td>
<td>Food for Thought</td>
</tr>
</tbody>
</table>
出于兴趣,我寻找一种无需使用jQuery就能找到元素的文本节点的方法。有这样一种方法:
function getTextNodesIn(elem, opt_fnFilter) {
var textNodes = [];
elem && [...elem.childNodes].forEach(n=>{
if (n.nodeType == 3 && (!opt_fn()Filter || opt_fnFilter(n, elem))) textNodes.push(n);
else if ([1,9,11].includes(n.nodeType)) textNodes = textNodes.concat(getTextNodesIn(n, opt_fnFilter));
});
return textNodes;
}
我从克里斯·韦斯特的博客那里得到了这个--以稍长的形式。
https://stackoverflow.com/questions/73550868
复制相似问题