Question

在this fiddle中，您会看到一个带有选择字段的表格，您应该在其中选择一个名称。下面有5个输入字段，其中一个可以输入一些文本，另外三个输入字段设置为只读。

我想询问是否有办法在点击按钮时动态添加表格单元格。结果应该是this fiddle。 id应该增加i +。我尝试克隆代码，但无法弄清楚如何增加克隆输入字段的id。我不想克隆的唯一输入字段是只读输入字段。

您有推荐的示例代码或链接吗？启动提示也很有帮助。

我已经在网上搜索，但找不到东西。

Answer 1

以下是您要求的代码（我在按钮中添加id以便轻松定位）

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

    $(this)
        .closest('table')
        .find('tr td:first-child:not(:has([readonly]))')
        .each(function(){
            var $this = $(this);
            $this
                .clone()
                .each(function(){
                    var $inp = $(':input',this);
                    var id = $inp.attr('id');
                    var idwithoutnum = id.replace(/([0-9]+)$/,'');
                    var maxId = $(':input[id^='+idwithoutnum+']:last').attr('id');
                    var idnum = parseInt(/([0-9]+)$/.exec(maxId)) + 1;
                    var newid = id.replace(/([0-9]+)$/,idnum);
                    $inp.attr('id', newid);
                    alert(newid); // remove this line
                })
                .insertAfter($this
                             .closest('tr')
                             .find('td:last')
                            );
    });
});

示例http://jsfiddle.net/fMZDd/7/

Answer 2

我会选择不使用表格进行dom操作。无论哪种方式，你都可以这样做。

添加表格单元格

var td = document.createElement("td")
var idVals = prevId.match(/^([a-z_]*)([0-9]+)$/)
td.innerHTML = "<input type='text' id='"+ idVals[1] + (parseInt(idVals[2]) + 1) +">";
tr.appendChild(td)

希望这有帮助。

是否可以动态添加表格单元格并为它们提供不同的ID？

2 个答案: