使用 jQuery 进行 HTML 表格操作答案

【问题标题】：HTML table manipulation using jQuery使用 jQuery 进行 HTML 表格操作
【发布时间】：2011-01-28 15:40:42
【问题描述】：

我正在使用 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 很陌生，做过一些小事，但没有什么高级的（主要是复制/粘贴）。

有人可以帮忙吗？

【问题讨论】：

标签： jquery html forms cakephp html-table

【解决方案1】：

我已经为 jQuery 创建了一个插件，它可能会对您有所帮助，它使用起来很简单。 http://boriscy.github.com/grider/

【讨论】：

您好，谢谢您-您的文档有点混乱，但是我可以正常使用，所以谢谢。 PS，您在网站上的链接无效，我必须自己导航到github.com/boriscy/grider 才能找到下载。

【解决方案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;

  });

【讨论】：

谢谢你，但我无法让它工作，可能是我自己的错，但是仍然需要学习很多关于 jquery 的知识。

【解决方案3】：

编写一个返回 HTML 的函数（作为字符串或 DOM 树），但给它一个索引参数。

【讨论】：

【解决方案4】：

这应该可行。如果每次用户单击添加按钮时执行以下操作。但不能保证（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()));
})

【讨论】：