Question

我有一个表单，我决定拆分成标签（基于引导程序），以便更容易管理由于表单的长度（想象每个标签作为一个步骤，但它本身不是一个向导，因为我我并不真的对构建它的向导感兴趣，每个选项卡都包含表单的特定信息，在6个选项卡中的2个中，我有一个表（每个选项卡中有不同的表），其中有一个按钮我正在克隆第一个“具有jquery函数的“tbody”标签的子项，并删除（如果需要，任何元素“但是”第一个孩子。

<script>
// function to clone last child in the nearest table.
$('.cloneLastChild').click(function() {
    var parentControl = $('#' + $(this).closest('.table').attr('id'));
    var counter = parentControl.children('tbody').size();
    //console.log(counter);
    parentControl.children('tbody:first').clone().appendTo(parentControl);
return false;
});
// function to delete the last child of a table, but always leave 1.
$('.removeLastChild').click(function() {
var parentControl = $('#' + $(this).closest('.table').attr('id'));
parentControl.children('tbody').not(':first').last().remove();
return false;
});

因为我正在使用表格，所以我将它专门添加到“this”元素的最近表中。

我正在使用CakePHP来构建这个项目，由于客户的要求，元素的命名就是出现问题的地方。

这是特定标签的代码，它给我“命名操作”问题。

<!-- paso 3.2 -->
<div class="tab-pane fade in" id="paso3-2">
    <!-- fieldset -->
    <fieldset>
        <legend class="h5">3.2. Actividades Generales a Realizar</legend>
        <h4 class="h4">Duración del Proyecto:</h4>
        <!-- form-group -->
        <div class="form-group">
            <label for="fecha_inicio" class="col-md-2 control-label">Fecha de Inicio:</label> 
            <!-- col-md-10 -->
            <div class="col-md-4">
                <input type="text" class="form-control datepicker" name="data[Proyecto][fecha_inicio]" id="fecha_inicio" placeholder="Fecha de Inicio">
            </div><!-- ./cold-md-10 -->
            <label for="fecha_final" class="col-md-2 control-label datepicker">Fecha de Culminaci&oacute;n:</label> 
            <!-- col-md-10 -->
            <div class="col-md-4">
                <input type="text" class="form-control datepicker" name="data[Proyecto][fecha_final]" id="fecha_final" placeholder="Fecha de Culminaci&oacute;n">
            </div><!-- ./cold-md-10 -->
        </div><!-- ./form-group -->
        <h4>Se&ntilde;ale las actividades generales a realizar especificando los meses de ejecuci&oacute;n</h4>
        <br><br>
        <table class="table table-bordered" id="tablaAtividadesLista">
            <thead>
                <tr>
                    <th class="col-md-1" rowspan="2">N#</th>
                    <th class="col-md-10" rowspan="2">Actividades a desarrollar</th>
                    <th colspan="12"><h4>Meses de Inicio y Culminaci&oacute;n de Actividades</h4></th>
                    <th rowspan="2"><a href="javascript:;" class="cloneLastChild"><span class="glyphicon glyphicon-plus-sign"></span></a><a href="javascript:;" class="removeLastChild"><span class="glyphicon glyphicon-minus-sign"></span></a></th>
                </tr>
                <tr>
                    <th>Ene</th>
                    <th>Feb</th>
                    <th>Mar</th>
                    <th>Abr</th>
                    <th>May</th>
                    <th>Jun</th>
                    <th>Jul</th>
                    <th>Ago</th>
                    <th>Sep</th>
                    <th>Oct</th>
                    <th>Nov</th>
                    <th>Dic</th>
                </tr>
            </thead>
            <tbody>

这是第一个孩子

                <tr>
                    <td>
                        <!-- form-group -->
                        <div class="form-group">
                            <label for="ActividadProyectosOrden" class="col-md-1 control-label"></label> 
                            <!-- col-md-10 -->
                            <div class="col-md-10">
                                <?php echo $this->form->input('ActividadProyectos.0.orden', array('div' => false, 'label' => false, 'class' => 'form-control', 'placeholder' => '#')); ?>
                            </div><!-- ./cold-md-10 -->
                        </div><!-- ./form-group -->
                    </td>

                    <td>
                        <!-- form-group -->
                        <div class="form-group">
                            <label for="ActividadProyectosDescripcion" class="col-md-1 control-label"></label> 
                            <!-- col-md-10 -->
                            <div class="col-md-10">
                                <?php echo $this->form->input('ActividadProyectos.0.descripcion', array('div' => false, 'label' => false, 'class' => 'form-control', 'placeholder' => '#')); ?>
                            </div><!-- ./cold-md-10 -->
                        </div><!-- ./form-group -->
                    </td>
                    <?php
                        for($i = 1; $i <= 12; $i++){ ?>
                    <td>
                        <?php echo $this->form->input('ActividadProyectos.0.duracion.'.$i.'', array('div' => false, 'label' => false, 'type' => 'checkbox', 'id' => 'ActividadProyectos.duracion.'.$i.'')); ?>
                    </td>
                    <?php } ?>
                </tr>

上面结束了第一个孩子并继续其余的标签代码。

            </tbody>
        </table>
        <!-- form-group -->
        <div class="form-group">
            <label for="telf2" class="col-md-1 control-label">Direcci&oacute;n del evento:</label> 
            <!-- col-md-10 -->
            <div class="col-md-11">
                <textarea rows="3" class="form-control textarea" id="address" placeholder="Direcci&oacute;n del evento"></textarea>
            </div><!-- ./cold-md-10 -->
        </div><!-- ./form-group -->
        <!-- form-group -->
        <div class="form-group">
            <label for="pais" class="col-md-1 control-label">Pa&iacute;s:</label> 
            <!-- col-md-10 -->
            <div class="col-md-3">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div><!-- ./cold-md-10 -->
            <label for="estado" class="col-md-1 control-label">Estado:</label> 
            <!-- col-md-10 -->
            <div class="col-md-3">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div><!-- ./cold-md-10 -->
            <label for="ciudad" class="col-md-1 control-label">Ciudad:</label> 
            <!-- col-md-10 -->
            <div class="col-md-3">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div><!-- ./cold-md-10 -->
        </div><!-- ./form-group -->
    </fieldset><!-- ./fieldset -->
</div><!-- ./paso 3.2 -->

当我克隆最后一个孩子时，我面临的问题是，我有几个表单元素，我需要将名称更改为“Modelname.NEXTROW.fieldname”，第一个孩子名为“Modelname.0.fieldname” “，我怎么能做到，所以每个克隆的元素，将名称从[Modelname] .0。[fieldname]更改为[Modelname] .1 / 2/3/4/5/6等等。[fieldname] as每一行都被克隆，

我有一个计数器变量集并按预期工作，如果我添加2个新子节点，它会在取消注释时打印我在控制台中的任何位置，如果我删除2，但是添加1，它会打印当前计数，所以我就在那里。

我遇到问题的领域是第一批孩子的领域，正如你所看到的，他们被命名为：

ActividadProyectos.0.fieldname

如果你在代码中注意到，我在一个表中有一个for循环，重复一个表示“月”的复选框，我需要在单个数组中的那些值，0和1，用逗号分隔，其中1表示月活动，0表示非活动，其他模块访问和处理数据

我需要的是，简而言之，每个克隆的孩子都应该将ActividadProyectos.0.fieldname更改为ActividadProyectos.counter.fieldname。

非常感谢任何帮助！

Answer 1

只需获取CakePHP在HTML输出中生成的行数：

http://api.jquery.com/length/

var rowCount = $("#table tr").length
// in your loop:
rowCount++;

从那里开始，在向表中添加副本时从此值进行迭代。

操作克隆表行jquery中的表单字段

1 个答案: