1

テーブルに行を動的に追加しています。その後、次の 2 つのことを行う必要があります。

  1. 値をクリアする

  2. 新しく作成されたリンクのクリックをシミュレートします (リンクはセルの 1 つにあります)。

テーブルに行を追加するコードは次のとおりです (正常に動作しています)。

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 の値をクリアするにはどうすればよいですか?

では、2つ目の質問です。セレクター「a.edit」にリンクされたイベントをトリガーするために、リンク「edit」のクリックをシミュレートする必要があります (このイベントは、ページ）。としてボタンを取得できますvar editbtn = $("td:last", row)。実行中のリンクを非表示にすることはできますeditbtn.hide()が、実行してeditbtn.click()も期待どおりにイベントがトリガーされません。

クリックを取得する必要があるハンドラーは次のとおりです$(document).on('click', 'a.edit', function(e) {。これは、他の行の他のリンクを処理しています。

何か案は？

4

3 に答える 3

4

このように横切ることができます

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/

于 2012-10-23T19:25:19.223 に答える
0

これであなたの両方の質問に答えられると思います：

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/

于 2012-10-23T19:43:17.323 に答える
-1

を使用して最後の追加行を見つけることができます: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..
})
于 2012-10-23T19:13:21.540 に答える