Question

我在python应用程序中使用下面的脚本，通过单击“添加行”按钮生成表单字段行。但是我只能在至少有一个空白行的情况下才能这样做，我可以获得一些帮助来改变下面的脚本，以便可以添加新行而不会有任何空白行。另外，我需要在同一行中有一个timepicker字段

$(function() {
    $("div[data-toggle=fieldset]").each(function() {


    var $this = $(this);
    //alert($this)
    //Add new entry
    $this.find("button[data-toggle=fieldset-add-row]").click(function() {
    var target = $($(this).data("target"))
    console.log(target);

    var oldrow = target.find("tr[data-toggle=fieldset-entry]:last");

    var row = oldrow.clone(true, true);
    console.log(row.find(":input")[0]);
    var elem_id = row.find(":input")[0].id;

    var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1;
    row.attr('data-id', elem_num);

    row.find(":input").each(function() {
    console.log(this);
    var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + (elem_num) + '-');
    $(this).attr('name', id).attr('id', id).val('').removeAttr("checked");
    });
    oldrow.after(row);
    }); //End add new entry

    //Remove row
    $this.find("button[data-toggle=fieldset-remove-row]").click(function() {

    if($this.find("tr[data-toggle=fieldset-entry]").length > -1) {

    var thisRow = $(this).closest("tr[data-toggle=fieldset-entry]");
    thisRow.remove();
    }
    });

 //End remove row
   });
});



HTML used as below

<div class="form-group">
    <div data-toggle="fieldset" id="dimdetail-fieldset">
    <div class="col-sm-5">
    <button type="button" class="btn btn-primary pull-left" data-toggle="fieldset-add-row" data-target="#dimdetail-fieldset" id="add_time"> + Time</button>
    </div>
    <br>
    <br>
    <br>
    <div class="col-md-12">
    <div class ="table-responsive">
    <table id="table_id" class="table table-bordered">
    <tr>
    <th>Total Hours</th>
    <th>Inspector</th>
    <th>Inspection</th>
    <th>Remarks</th>
    <th></th>
    </tr>
    <tr data-toggle="fieldset-entry">
    <td><input class="form-control" id="timesheet_time_details-0-total_hours" name="timesheet_time_details-0-total_hours" size="12" type="text" value="">
    </td>
    <td><input class="form-control" id="timesheet_time_details-0-inspector" name="timesheet_time_details-0-inspector" size="12" type="text" value="">
    </td>
    <td><select class="form-control" id="timesheet_time_details-0-testmethod" name="timesheet_time_details-0-testmethod"><option value="1">Test Method</option><option value="2">UT Test</option></select>

    </td>
    <td><textarea class="form-control" id="timesheet_time_details-0-remarks" name="timesheet_time_details-0-remarks" rows="3"></textarea>

    </td>
    <td><button type="button" data-toggle="fieldset-remove-row" id="dimdetail-0-remove">-</button></td>
    </tr>
    </table>
    </div>
    </div>
    </div>
</div>

谢谢， prasobhraj

Answer 1

            $(function() {
       // $("div[data-toggle=fieldset]").each(function() {


        var $this = $(this);
        //alert($this)
        //Add new entry
        $this.find("button[data-toggle=fieldset-add-row]").click(function() {

        var target = $($(this).data("target"))
        console.log(target);

        var oldrow = target.find("tr[data-toggle=fieldset-entry]:last");

        var row = oldrow.clone(true, true);
        console.log(row.find(":input")[0]);
        var elem_id = row.find(":input")[0].id;

        var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1;
        row.attr('data-id', elem_num);

        row.find(":input").each(function() {
        console.log(this);
        var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + (elem_num) + '-');
        $(this).attr('name', id).attr('id', id).val('').removeAttr("checked");
        });
        oldrow.after(row);
        }); //End add new entry

        //Remove row
        $this.find("button[data-toggle=fieldset-remove-row]").on('click',function() {

        if($this.find("tr[data-toggle=fieldset-entry]").length > -1) {

        var thisRow = $(this).closest("tr[data-toggle=fieldset-entry]");
        thisRow.remove();
        }
        });
    });

试试这个工作..

动态生成表单字段的问题

1 个答案: