添加使用JQuery

投入要素和錶行的新行我有以下代碼：添加使用JQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#add, .check ").click(function() { 
      $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); 
      return false; 
     }); 
    }); 
</script>

隨着由身體下面：

<form action='demo.php' method='post'> 
<a id="add">+</a></td> 
    <table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2"> 
    <tbody> 
    <tr> 
     <td>Name</td> 
    </tr> 
    <tr class="person"> 
     <td><input type="text" name="name[]" class='check' /></td> 
    </tr> 
    </tbody> 
    </table> 
    <input type='submit' /> 
</form>

我怎樣才能得到它清除場添加它們後，可能會添加一個效果，如淡入或向下滑動等等。另外，我希望如果最後一行中的任何表單元素被聚焦，它會自動添加一個新行，但無法弄清楚如何訪問最後一行的表單元素...：\

來源

2011-09-21 Dawson Irvine

我已經降落在這個頁面上，同時尋找一種方式來添加一個表格，已經存在的表格。我懷疑你的標題不完全準確，看來你的表單已經存在沒有jQuery。這是真的？如果是這樣，你會考慮改變標題嗎？ – Tass

您可以使用像這樣的查找遍歷新值。看看這個fiddle

$("#add, .check ").click(function() { 
$('#mytable tbody>tr:last') 
    .clone(true) 
    .insertAfter('#mytable tbody>tr:last').find('input').each(function(){ 
     $(this).val(''); 
    }); 
});

如果你想在新行出現在最後一排的焦點，你必須委託集中在最後一排的第一個輸入。你想使用委託，因爲行是動態添加的。插入克隆行後，您還可以添加淡入淡出效果。這裏是一個fiddle for this

$("#mytable").delegate(' tbody>tr:last input:first','focus',function(){ 
    $('#mytable tbody>tr:last') 
    .clone(true) 
    .insertAfter('#mytable tbody>tr:last').hide().fadeIn().find('input').each(function(){ 
     $(this).val(''); 
    }); 
});

來源

2011-09-21 04:45:14

但似乎並非所有的時間（我使用FireFox 3.6）。它開始似乎中斷，但它不會引發錯誤，並防止'$（'＃add'）'也起作用。 –

淡入淡出效果需要在執行新行之前完成。如果你選擇得太快，它會克隆/綁定有趣和破壞。你可以修改它不這樣做，例如只有當行已經淡入時綁定焦點。這是一個沒有效果的小提琴，它看起來像它的作品http://jsfiddle.net/zGe8W/3/ –

添加使用JQuery

回答

相關問題