添加新字段时生成动态值

时间:2016-08-03 06:02:08

标签: php jquery

我正在使用jquery动态添加新表行。它成功添加,现在我想根据下拉值动态拉动每个记录并显示多个div。如果表行只有一个,那么一切正常,但是当我使用jquery添加新行时,由于这一点,当我从seconf行中选择下拉值时,它不会提供计数器值,它不会对它进行记录。

    function add_allowance() {

    var click = 2;
    jQuery("#addrows").click(function(){
        jQuery('#maintable tr:last').after('<tr class="tablechild"><td><select name="empallownacename" id="allowancename" class="select2_category form-control"><option value="none" selected="selected">-Select-</option></select></td><td><input type="text" name="empmount" value="" class="form-control"  /></td><td><input type="text" name="empdescription" value="" class="form-control"  /></td><td><a style="cursor: pointer;" value="Remove" class="minusbtn" id="remove"><i class="fa fa-trash-o"></i></a></td></tr>');
    });
    click++;
}



    <tr class="tablechild">
    <td>
        <select name="allowancename<?php echo $counter; ?>" id="allowancename" class="select2_category form-control">
            <option>-Select-</option>
            <?php foreach($allowances as $allowance):?>
            <option value="<?php echo $allowance['id']; ?>"><?php echo $allowance['name'];?></option>
               <?php $counter; ?>
             <?php endforeach; ?>
        </select>
    </td>
    <td><input type="text" id="allowanceamount" name="allowanceamount" value="" class="form-control"  /></td>
    <td><input type="text" id="allowancedesc" name="allowancedesc" value="" class="form-control"  /></td>
    <td>
        <a style="cursor: pointer;" value="Remove" class="minusbtn" id="remove"><i class="fa fa-trash-o"></i></a>
    </td>
</tr>

1 个答案:

答案 0 :(得分:0)

单击时,将调用该方法,并始终将变量初始化为2。这不是好习惯。你可以这样做:  function add_allowance(){

    var click;
    jQuery("#addrows").click(function(){
        jQuery('#maintable tr:last').after('<tr class="tablechild"><td><select name="empallownacename" id="allowancename" class="select2_category form-control"><option value="none" selected="selected">-Select-</option></select></td><td><input type="text" name="empmount" value="" class="form-control"  /></td><td><input type="text" name="empdescription" value="" class="form-control"  /></td><td><a style="cursor: pointer;" value="Remove" class="minusbtn" id="remove"><i class="fa fa-trash-o"></i></a></td></tr>');
    });
    click=$('table tr).length; // It will count number of rows in the table and return integer value no of rows
}