Работа с таблицами HTML с использованием jQuery

Question

Я создаю сайт с использованием CakePHP и в настоящее время работаю над добавлением данных в две отдельные таблицы одновременно ... не проблема.

Проблема, с которой я столкнулся, заключается в том, что я стремлюсь динамически изменять форму, которая принимает входные значения, позволяя щелкнуть по кнопке / ссылке, чтобы добавить дополнительную строку полей формы.

На данный момент у меня есть таблица, которая выглядит примерно так:

<table>
<thead>
    <tr>
        <th>Campus</th>
        <th>Code</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <select id="FulltimeCourseCampusCode0CampusId" name="data[FulltimeCourseCampusCode][0][campus_id]">
                <option value=""></option>
                <option value="1">Evesham</option>
                <option value="2">Malvern</option>
            </select>
        </td>
        <td>
            <input type="text" id="FulltimeCourseCampusCode0CourseCode" name="data[FulltimeCourseCampusCode][0][course_code]">
        </td>
    </tr>
</tbody>

Мне нужно для репликации строки в теге tbody с небольшим изменением увеличения всех нулей (например, здесь

FulltimeCourseCampusCode0CampusId

и здесь

data[FulltimeCourseCampusCode][0][campus_id]

).

Я очень новичок в jQuery, сделав несколько незначительных изменений, но ничего сложного (в основном, просто копирование / вставка).

Кто-нибудь может помочь?

Answer 1

Я создал плагин для jQuery, который может вам помочь, он прост в использовании. http://boriscy.github.com/grider/

Answer 2

Это будет работать:

$('#add').click(function() {

    var index = $('table tbody tr').last().index() + 1;
    var tr = $('table tbody tr').first().clone();

    tr.find('select')
      .attr('id', 'FulltimeCourseCampusCode' + index + 'CampusId')
      .attr('name', 'data[FulltimeCourseCampusCode][' + index + '][campus_id]');
    tr.find('input')
      .attr('id', 'FulltimeCourseCampusCode0CourseCode')
      .attr('name', 'data[FulltimeCourseCampusCode][' + index + '][course_code]');

    $('table tbody').append(tr);

    return false;

  });

Answer 3

Это должно работать. Если вы выполняете следующее каждый раз, когда пользователь нажимает кнопку добавления. Но нет гарантии (не проверено написано в 1 мин)

var rows = $("table tbody tr");
var first rows.eq(0);
first.clone().appendTo($("table tbody")).find("*[id^=FulltimeCourseCampusCode]").each(function() {
  var $this = $(this);
  $this.attr("id", $this.attr("id").replace("0", rows.size()));
  $this.attr("name", $this.attr("name").replace("0", rows.size()));
})

Answer 4

Напишите функцию, которая возвращает HTML (в виде строки или дерева DOM), но дает ему параметр для индекса.