在循环中创建新元素答案

【问题标题】：Create new Element in a loop在循环中创建新元素
【发布时间】：2015-03-22 10:48:17
【问题描述】：

我有一个主要问题，我想通过在 ajax 的帮助下添加多个输入元素来将一些数据添加到特定 td 上的表行。我也可以这样做，但我的问题是当我在表格上有多行并且我添加它在表格的第一行添加的元素但我只想在这里添加我想要做的事情时添加到该行。@987654321 @

我正在使用的代码

<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 是为了显示我正在尝试做的事情。谢谢

【问题讨论】：

标签： php jquery for-loop

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

【讨论】：

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

【讨论】：