在循环中创建新元素

Question

我有一个主要问题，我想通过在 ajax 的帮助下添加多个输入元素，将一些数据添加到特定 td 上的 table 行。我也可以这样做，但我的问题是当我在 table 上有多行时，我将它添加的元素添加到 table 的第一行，但我只想在此处添加到该行我想做什么。

我正在使用的代码

<script type="text/javascript" src="assets/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
var counter = 1;
function dep()
{
    if(counter>9){
        alert("Only 10 textboxes allow");
        return false;
    }   
    var newTextBoxDiv = jQuery(document.createElement('div'))
        .attr("id", 'dependent' + counter);
    newTextBoxDiv.after().html( '<input type="text" class="form-control" name="checklistname[]' + counter +  '"  placeholder="Add Checklist" required>');
    newTextBoxDiv.appendTo("#dependent");
    counter++;
}
function depdel()
{
    if(counter==1){
       alert("No more textbox to remove");
        return false;
    }  
    counter--;
    jQuery("#dependent" + counter).remove();
}
</script>
<table>
    <thead>
        <tr class="myrows">
            <th>Project </th>
            <th>Action</th>
        </tr>
    </thead>
    <tr>
        <?php for($i=0;$i<=2;$i++) { ?>
            <td>my project<?php echo $i;?></td>
            <td> <form action="" method="post" id="form">
                <div id="dependent" class="newclass">
                </div>
                <input type="submit" id="mybutton" value="Save"  title="Save">
                <a href="#" class="action" title="Add" onClick="dep();"> Add </a>
                <a href="#" class="action" title="Delete" onClick="depdel();">delete </a>
            </td>
        <?php }?>
    </tr>
</table>

请查看屏幕截图，html 是为了展示我正在尝试做的事情。谢谢

Answer 1

在 HTML 中：

<a href="#" class="action" title="Add" onClick="dep(this);"> Add </a>

在javaScript中：

var counter = 1;
function dep(obj)
{
   var myDependent= $(obj).closest('tr').find("#dependent");
if(counter>9){
alert("Only 10 textboxes allow");
return false;
}   
var newTextBoxDiv = jQuery(document.createElement('div'))
.attr("id", 'dependent' + counter);
newTextBoxDiv.html( '<input type="text" class="form-control" name="checklistname[]' + counter +  '"  placeholder="Add Checklist" required>');
newTextBoxDiv.appendTo(myDependent);
counter++;
}

Answer 2

您的代码中的问题是您在一个页面上只能有一个 ID。当你有多个 JavaScript 时，总是取第一个。

当您使用 jQuery 监听器时，您可以使用父函数获取要添加输入的 td。您甚至不需要计数器变量，因为当您使用 jQuery 选择器，您可以直接从 jQuery.

获取该项目的编号

您可以使用类似下面的代码。

在HTML中使用

<a href="#" class="action add" title="Add"> Add </a>
<a href="#" class="action depdel" title="Delete" >delete </a>

在Javascript中使用

jQuery(document).ready(function() {
    jQuery('.add').click(function() {
        if (jQuery('.dependent', $(this).parent()).length > 9) {
            alert("Only 10 textboxes allow");
            return false;
        }
        jQuery('#dependent', $(this).parent()).append('<div class="dependent"><input type="text" class="form-control" name="checklistname[]"  placeholder="Add Checklist" required></div>');

    })
    jQuery('.depdel').click(function() {

        if (jQuery('.dependent', $(this).parent()).length == 0) {
            alert("No more textbox to remove");
            return false;
        }
        jQuery(" .dependent", $(this).parent()).last().remove();
    })
})

在循环中创建新元素

Create new Element in a loop

php

jquery

for-loop