Question

目前，此代码可以动态创建新列。我希望能够为属于母列的所有单元格赋予唯一的名称.BN：母列是最高的所有列，总共有三列列数少的任何东西都是小孩。因此，第一组中的所有单元格和内容必须具有唯一的名称标识符，例如name =＆＃34; Bx_1name＆＃34;从下一个母亲的内容（BX_2名称）中识别出来;

    <table id="datble" class="form" border="1">
   <tbody>
    <tr>
        <td><a href="#" onclick="addColumn(this);">Add 1</a></td>
        <td>
            <label>Name</label>
            <input type="text" required="required" name="BX_NAME[]" />
        </td>
    </tr>
    <tr>
        <td><a href="#" onclick="addColumn(this);">Add 2</a></td>
        <td>
            <label>Name</label>
            <input type="text" required="required" name="BX_NAME[]" />
        </td>
    </tr>
    <tr>
        <td><a href="#" onclick="addColumn(this);">Add 3</a></td>
        <td>
            <label>Name</label>
            <input type="text" required="required" name="BX_NAME[]" />
        </td>
    </tr>
</tbody>
</table>
<script type="text/javascript">
   function addColumn(element) {
var tr = $(element).closest("tr")[0];
var allTrs = $(tr).closest("table").find("tr");
var found = false;
allTrs.each(function(index, item) { 
    if (item == tr) {
        found = true;
        }
        var td = document.createElement("td");
        if (found) {

        td.innerHTML = '<label>Name</label>';
            td.innerHTML += '<input type="text" required="required" name="BX_NAME[]" />';
    }
    item.appendChild(td);
});
}
</script>

Javascript也很受欢迎。功能不能改变。必须像这样; jsfiddle

Answer 1

如果符合您的需要，请尝试此操作。

JSFIDDLE

var counter =0;
function addColumn(element) {
    var tr = $(element).closest("tr")[0];
    var allTrs = $(tr).closest("table").find("tr");
    var found = false;
    allTrs.each(function(index, item) { 
        if (item == tr) {
            found = true;
        }
        var td = document.createElement("td");
        if (found) {

            td.innerHTML = '<label>Name</label>';
            td.innerHTML += '<input type="text" required="required" name="BX_NAME['+counter+']" value="BX_NAME['+counter+']"/>';
            counter++;
        }
        item.appendChild(td);
    });
}

我使用全局计数器在每次制作单元格时递增。

Answer 2

这只是一个提示，你可以实现这个目标。首先为所有输入字段分配相同的类名

 <table id="datble" class="form" border="1">
   <tbody>
    <tr>
        <td><a href="#" onclick="addColumn(this);">Add 1</a></td>
        <td>
            <label>Name</label>
            <input type="text" required="required" name="BX_NAME[]"  class="text" />
        </td>
    </tr>
    <tr>
        <td><a href="#" onclick="addColumn(this);">Add 2</a></td>
        <td>
            <label>Name</label>
            <input type="text" required="required" name="BX_NAME[]" class="text" />
        </td>
    </tr>
    <tr>
        <td><a href="#" onclick="addColumn(this);">Add 3</a></td>
        <td>
            <label>Name</label>
            <input type="text" required="required" name="BX_NAME[]" class="text"/>
        </td>
    </tr>
</tbody>
</table>

然后使用jquery分配不同的id，如下面的

 <script type="text/javascript">  
$(document).ready(function (event) {
              var IDCount = 1;
            $('.text').each(function () {
                $(this).attr('id', IDCount);
                IDCount++;
});
</script>

希望这会有所帮助

如何动态地为新表列单元格指定名称

2 个答案: