Question

我有一个主要问题，我希望通过在ajax的帮助下添加多个输入元素，将某些数据添加到特定td的表行。我也能够做到这一点，但我的问题是当我在桌子上有多行时，我在表格的第一行添加它添加的元素，但我想在这里添加到那行我试图做什么。{{ 0}}

我正在使用的代码

<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 listner时，你可以使用parent函数来获取你想要添加输入的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();
    })
})

在循环中创建新元素

2 个答案: