jq如何在新增行时复制上一行内容? 20C

想要在点击新增后,自动复制上一行内容到新增行内,请问该如何实现?

 <%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>test管理</title>
    <meta name="decorator" content="default"/>
    <script type="text/javascript">
        $(document).ready(function() {
            //$("#name").focus();
            $("#inputForm").validate({
                submitHandler: function(form){
                    loading('正在提交,请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    $("#messageBox").text("输入有误,请先更正。");
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });
        function addRow(list, idx, tpl, row){
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row
            }));
            $(list+idx).find("select").each(function(){
                $(this).val($(this).attr("data-value"));
            });
            $(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
                var ss = $(this).attr("data-value").split(',');
                for (var i=0; i<ss.length; i++){
                    if($(this).val() == ss[i]){
                        $(this).attr("checked","checked");
                    }
                }
            });
        }
        function delRow(obj, prefix){
            var id = $(prefix+"_id");
            var delFlag = $(prefix+"_delFlag");
            if (id.val() == ""){
                $(obj).parent().parent().remove();
            }else if(delFlag.val() == "0"){
                delFlag.val("1");
                $(obj).html("&divide;").attr("title", "撤销删除");
                $(obj).parent().parent().addClass("error");
            }else if(delFlag.val() == "1"){
                delFlag.val("0");
                $(obj).html("&times;").attr("title", "删除");
                $(obj).parent().parent().removeClass("error");
            }
        }
    </script>
</head>
<body>
    <ul class="nav nav-tabs">
        <li><a href="${ctx}/testaa/testA/">test列表</a></li>
        <li class="active"><a href="${ctx}/testaa/testA/form?id=${testA.id}">test<shiro:hasPermission name="testaa:testA:edit">${not empty testA.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="testaa:testA:edit">查看</shiro:lacksPermission></a></li>
    </ul><br/>
    <form:form id="inputForm" modelAttribute="testA" action="${ctx}/testaa/testA/save" method="post" class="form-horizontal">
        <form:hidden path="id"/>
        <sys:message content="${message}"/>     
        <div class="control-group">
            <label class="control-label">name:</label>
            <div class="controls">
                <form:input path="name" htmlEscape="false" maxlength="255" class="input-xlarge "/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">addtime:</label>
            <div class="controls">
                <input name="addtime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate "
                    value="<fmt:formatDate value="${testA.addtime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
                    onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">sex:</label>
            <div class="controls">
    <!--        <sys:treeselect url="/storagewarehouse/tWarehouseFacility/treeData" id="deviceid" value="${tWarehouseFacility.id} "   labelName="sex"  labelValue=""
            title="分类"  name="" ></sys:treeselect>
             -->
                <sys:newtreeselect  id="sex" name="sex" value="${TWarehouseFacility.deviceid} "  labelName="TWarehouseFacility.name" labelValue="${TWarehouseFacility.name}"
                 title="选择"  url="/storagewarehouse/tWarehouseFacility/treeData?type=1" cssClass="required" notAllowSelectParent="true"></sys:newtreeselect>
            </div>
        </div>
            <div class="control-group">
                <label class="control-label">test_b:</label>
                <div class="controls">
                    <table id="contentTable" class="table table-striped table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th class="hide"></th>
                                <th>添加时间</th>
                                <th>name</th>
                                <th>tes</th>
                                <shiro:hasPermission name="testaa:testA:edit"><th width="10">&nbsp;</th></shiro:hasPermission>
                            </tr>
                        </thead>
                        <tbody id="testBList">
                        </tbody>
                        <shiro:hasPermission name="testaa:testA:edit"><tfoot>
                            <tr><td colspan="5"><a href="javascript:" onclick="addRow('#testBList', testBRowIdx, testBTpl);testBRowIdx = testBRowIdx + 1;" class="btn">新增</a></td></tr>
                        </tfoot></shiro:hasPermission>
                    </table>
                    <script type="text/template" id="testBTpl">//<!--
                        <tr id="testBList{{idx}}">
                            <td class="hide">
                                <input id="testBList{{idx}}_id" name="testBList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
                                <input id="testBList{{idx}}_delFlag" name="testBList[{{idx}}].delFlag" type="hidden" value="0"/>
                            </td>
                            <td>
                                <input id="testBList{{idx}}_TestA" name="testBList[{{idx}}].TestA.addtime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate required"
                                        value="<fmt:formatDate value="${testA.addtime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
                                    onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
                            </td>
                            <td>
                                <input id="testBList{{idx}}_TestA" name="testBList[{{idx}}].TestA.name" type="text" value="${testA.name}" maxlength="255" class="input-small required"/>
                            </td>
                            <td>
                                <input id="testBList{{idx}}_tes" name="testBList[{{idx}}].tes" type="text" value="{{row.tes}}" maxlength="255" class="input-small "/>
                            </td>
                            <shiro:hasPermission name="testaa:testA:edit"><td class="text-center" width="10">
                                {{#delBtn}}<span class="close" onclick="delRow(this, '#testBList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
                            </td></shiro:hasPermission>
                        </tr>//-->
                    </script>
                    <script type="text/javascript">
                        var testBRowIdx = 0, testBTpl = $("#testBTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                        $(document).ready(function() {
                            var data = ${fns:toJson(testA.testBList)};
                            for (var i=0; i<data.length; i++){
                                addRow('#testBList', testBRowIdx, testBTpl, data[i]);
                                testBRowIdx = testBRowIdx + 1;
                            }
                        });
                    </script>
                </div>
            </div>
        <div class="form-actions">
            <shiro:hasPermission name="testaa:testA:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
            <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
        </div>
    </form:form>
</body>
</html>
        $(document).ready(function() {
            var _catch_value;
            //$("#name").focus();
            $("#inputForm").validate({
                submitHandler: function(form){
                    loading('正在提交,请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    $("#messageBox").text("输入有误,请先更正。");
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });


                function addRow(list, idx, tpl, row){
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row
            }));
            $(list+idx).find("select").each(function(){
                $(this).val($(this).attr("data-value"));
            });
            var n_idx = idx.toString();
            _catch_value = $(list+(idx-1)).val();
            $('#n_idx').val(_catch_value);

            $(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
                var ss = $(this).attr("data-value").split(',');
                for (var i=0; i<ss.length; i++){
                    if($(this).val() == ss[i]){
                        $(this).attr("checked","checked");
                    }
                }
            });

        }

5个回答

新增时, 拿当前最后一行内容呗 ,依次类推

在 $(document).ready(function() { 下面加一行 var _catch_value;

然後在 addRow() 中加入下面幾行
var n_idx = toString(id);
_catch_value = $(list+(idx-1)).val();
$('#n_idx').val(_catch_value);

這樣就 ok 了!

更精準的寫法

 var n_idx = idx.toString();  // 更正成  .toString();
_catch_value = ($(list+(idx-1)).val() == 'undefined')? 0 :   // $(list+(idx-1)).val();  避免預到首行沒有前一行的 value
$('#n_idx').val(_catch_value);
qq_35649402
你们让我起个名啊 你好,我测试了下,没有报错,但是也没有起到作用,你可以看下我重现编译问后更新的代码片段,是因为我位置放错了吗?
2 年多之前 回复
qq_35649402
你们让我起个名啊 我测试一下~
2 年多之前 回复

如果只有新增按钮所在的行,直接插入模板(?),否则,复制最后一行插入到表格最后。

 function addRow(list, idx, tpl, row){
     var $list = $(list),
                 $item = $list.children();
    if ($item.length <= 1 ) {
        $list.append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row
        }));
    } else {
        $list.append( $item.last().clone() );
    }
        ......
}

kingdoop? 好熟悉的代码

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问