Добавить новую строку элементов ввода и строк таблицы, используя JQuery - PullRequest
Новая
       14

Добавить новую строку элементов ввода и строк таблицы, используя JQuery

0 голосов
/ 21 сентября 2011

У меня есть следующий код: 

<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>

Как мне получить его, чтобы очистить поля после их добавления и, возможно, добавить такой эффект, как постепенное увеличение или скольжение вниз и т. Д. Кроме того, мне бы хотелось, чтобы, если какой-либо элемент формы в последнем ряду был сфокусирован, он будет добавить новую строку автоматически, но не могу понять, как получить доступ к элементам формы последней строки ...: \

1 Ответ

0 голосов
/ 21 сентября 2011

Вы можете перебирать новые значения с помощью поиска, например, так. Проверьте это скрипка 

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

Если вы хотите, чтобы новая строка отображалась в фокусе последней строки, вам придется делегировать фокус на первый ввод последней строки. Вы хотите использовать делегат, потому что строки добавляются динамически. Вы также можете добавить эффект затухания после вставки клонированной строки. Вот скрипка для этого 

$("#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('');
    });
});
...