这是我使用的标记
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr class="tr-head">
<th>Amount Owed</th>
<th>Amount Paid</th>
<th>Check / Cash / Online</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="row0">
<td>$10 <input type="text" name="amount_owed" id="amount_owed" value="10" style="display: none; width: 40px;" /></td>
<td>$20 <input type="text" name="amount_paid" id="amount_paid" value="20" style="display: none; width: 40px;" /></td>
<td>$30 <input type="text" name="check_cash_online" id="check_cash_online" value="30" style="display: none; width: 40px;" /></td>
<td><a href="javascript:void(0);" class="edit-row" title="row0">Edit</a></td>
</tr>
<tr class="row1">
<td>$10 <input type="text" name="amount_owed" id="amount_owed" value="10" style="display: none; width: 40px;" /></td>
<td>$20 <input type="text" name="amount_paid" id="amount_paid" value="20" style="display: none; width: 40px;" /></td>
<td>$30 <input type="text" name="check_cash_online" id="check_cash_online" value="30" style="display: none; width: 40px;" /></td>
<td><a href="javascript:void(0);" class="edit-row" title="row1">Edit</a></td>
</tr>
</tbody>
</table>
当我点击特定行的编辑时,我想删除除td
元素之外的前三个子单元格input
文本(即$ 10,$ 20 ....)。输入类型应显示隐藏单元格文本后。请帮助我如何使用jquery脚本。感谢
我尝试过一些脚本来做这件事,即
$(document).ready(function(){
$('.edit-row').click(function(){
var title = $(this).attr('title');
$('.'+title+' td').text('');
});
});
但是上面的脚本使单元格为空。
答案 0 :(得分:3)
此代码适用于您:
$('.edit-row').click(function() {
$(this).closest('tr').find('td').not(':last')
.contents().filter(
function() {
return this.nodeType == 3;
}).remove();
});
经过测试here。
Zachary Kniebel用 .contents()方法点击它
抱歉,我忘记了显示输入元素的部分:
$('.edit-row').click(function() {
$(this).closest('tr').find('td').not(':last').contents()
.filter(
function() {
return this.nodeType != 3;
})
.show().parent().contents()
.filter(
function() {
return this.nodeType == 3;
}).remove();
});
经过测试和工作。
答案 1 :(得分:1)
查找jQuery的.contents()
方法。它将返回调用元素/集合的所有text,element和content节点。你想要做的是创建一个过滤方法,如下所示:
var filterNodes = function() {
return this.nodeType === 1 || this.nodeType === 3;
}
将返回所有元素和文本节点。从那里,选择要从中删除文本的元素节点,然后删除文本节点。
注意:.contents()
方法返回CHILDREN而不是DESCENDANTS
修改强>
我重读了你的问题,我觉得这更适合你:
td
运行以下过滤方法,仅获取文本节点:
var filterNodes = function () {
return this.nodeType == 3;
}
像这样调用过滤器方法:
var firstThreeTDs = ....
var nodeSet = firstThreeTDS.contents().filter(filterNodes).toArray();
for (var i = 0; i < nodeSet.length; i++) {
nodeSet[i].parentNode.removeChild(nodeSet[i]);`
}
使用.show()
方法,.css()
方法或效果方法(淡入淡出,幻灯片等)来显示输入框
编辑2:
有另一种解决方案,但它不是最好的,它未经测试,并且需要大量的调试时间(特别是因为您可能会丢失一些属性/属性,基于您的实现):您可以使用jQuery的{ {1}}方法,复制每个clone()
中的输入元素,然后使用td
方法将.html()
的内部HTML设置为该重复的输入元素。这不是一个好的解决方案,它是更多的开销,而且它更新手,但是如果你对手动操作DOM感到不舒服它会起作用。
如果您需要更多帮助/澄清,请与我们联系。祝好运! :)
答案 2 :(得分:0)
$('.row0 #amount_owed,.row0 #amount_paid,row0 #check_cash_online').remove();
答案 3 :(得分:0)
$('.edit-row').click(function(){
$(this).parents("tr").find('td').not(":last").hide().html("");
});