jquery - 从一行中清除值并模拟点击它

Question

我正在向表中动态添加一行，之后我需要做两件事：

1. 清除值

2. 模拟单击新创建的链接（链接位于其中一个单元格中）。

这是将行添加到表中的代码（工作正常）：

var row = $('.records_table tbody>tr:last').clone(true);
row.insertAfter('.records_table tbody>tr:last');

我的行 html 代码如下所示：

<tr class=​"odd">​
   <td class=​"name">​name_0</td>​
   <td class=​"type">​type_0​&lt;/td>​
   <td class=​"value">​value_0</td>​
   <td class=​"edit">​
       <a href=​"edit" class=​"edit">​edit​&lt;/a>​
   </td>​
</tr>​

所以，我的第一个问题：如何清除值 name_0、type_0 和 value_0？

现在，第二个问题。我需要模拟单击链接“编辑”以触发链接到选择器“a.edit”的事件（对于加载了其他行中的预先存在的编辑链接，此事件被正确触发页）。我能够将按钮设置为var editbtn = $("td:last", row). 我可以隐藏链接 doing editbtn.hide()，但 doingeditbtn.click()并没有按预期触发事件。

应该获得点击的处理程序是: $(document).on('click', 'a.edit', function(e) {，它再次处理其他行中的其他链接。

有任何想法吗？

Answer 1

你可以像这样遍历它

var row = $('.records_table tbody>tr:last').clone(true);
row.insertAfter('.records_table tbody>tr:last');
$('.records_table tbody>tr:last') // gets last tr
    .find('td') // gets all td
    .not('.edit') // not the td with class=edit
    .text('') // make all text empty
    .end() // go back to first selector
    .find('a.edit').click(); // find anchor within tr and trigger click 

http://jsfiddle.net/59hyL/1/

如果你想点击最后一个 td 而不是锚点..你可以这样做

$('button').click(function() {
    var row = $('.records_table tbody>tr:last').clone(true);
    row.insertAfter('.records_table tbody>tr:last');
    $('.records_table tbody>tr:last')
        .find('td')
        .not('.edit')
        .text('');        
    $('tbody td:last').click();
});

$('.records_table').on('click', 'td.edit', function(e) {
    e.preventDefault();
    console.log("anchor number " + $('td.edit').index(this) + 'clicked');
});​

http://jsfiddle.net/hEP5q/

Answer 2

我相信这将回答您的两个问题：

HTML：

<button id="btn">Add row</button>
<table class="records_table">
    <thead><tr><th>Head</th></tr></thead>
    <tbody><tr><td>*</td></tr></tbody>
</table>

Javascript：

//simple function to repeat a string num times
String.prototype.repeat = function( num )
{
    return new Array( num + 1 ).join( this );
}


var i = 2;
var char = '*';

var lastRowSelector = '.records_table tbody tr:last';
//click handler for the cell
$(lastRowSelector + ' td').click(function() {
    alert($(this).text());
});

$('#btn').click(function(){
    var lastRow = $(lastRowSelector);
    //clone the row (note that handler will be cloned as well)
    var newRow = lastRow.clone(true);
    //obtain the only 'td' cell in the row
    var cell = newRow.find('td');
    //clear text of the cell by replacing it with new text. You could call cell.text('') to just clear it
    cell.text(char.repeat(i++));
    //insert the row to the end of the table
    newRow.insertAfter(lastRowSelector);
    //simulate click
    newRow.click();
});

http://jsfiddle.net/pr5jr/1/

Answer 3

您可以使用找到最后一个附加行:last

var row = $('.records_table tbody>tr:last').clone(true);
row.insertAfter('.records_table tbody>tr:last');
// Recently added row..
var recentRow = $('.records_table tbody>tr:last');

recentRow.find('td').each(function(){
    $(this).text('');  // Will clear the values..
})