jquery html操作CURD-阿里云开发者社区

jquery html操作CURD

2016-05-12 1193

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

clone() .insertBefore, insertAfter 交换html

   Java代码  
    
  
var arr = new Array();  
arr.push('<div>');  
arr.push('html test');  
arr.push('</div>');  
alert(arr.join(''));  

优点不需要与后台交互，缺点用js处理临时数据时，不能刷心页面，否则数据会丢失

页面

   Java代码  
    
  
<input type="button" name="a" value="添加" onclick="addCardDetail()" class="button">  
<div id="details_1" class="explain-col">                  
    <label for="prefix_1">前缀:</label>  
    <input type="text" name="detail[1][prefix]" id='prefix_1' size="5" class="input-text">  
    <label for="begin_1">开始编号:</label>        
    <input type="text" name="detail[1][start_sn]" id='begin_1' size="5" class="input-text">  
    <label for="end_1">结束编号:</label>  
    <input type="text" name="detail[1][end_sn]" id='end_1' size="5" class="input-text">   
    <input type="button" value="删除" onclick="deletePurchaseDetail(1)" class="button">     
</div>       

   Java代码  
    
  
<script>  
    function addCardDetail() {  
        lastIdAttr = $("div[id^='details_']").last().attr('id');    //最后一行的id的值  
  
        strIndex = lastIdAttr.lastIndexOf('_') + 1; //取得id中数字的位置号  
        index = parseInt(lastIdAttr.substring(strIndex)) + 1;//待增加的序号  
  
        total = $("div[id^='details_']").size();  
        if (total < 10) {  
            var html = [  
                '<div id="details_' + index + '" class="explain-col">',  
                '<label for="prefix_' + index + '">前缀:</label>',  
                '<input type="text" name="detail[' + index + '][prefix]" id="prefix_' + index + '" size="5" class="input-text">',  
                '<label for="begin_' + index + '">开始编号:</label>',  
                '<input type="text" name="detail[' + index + '][start_sn]" id="begin_' + index + '" size="5" class="input-text">',  
                '<label for="end_' + index + '">结束编号:</label>',  
                '<input type="text" name="detail[' + index + '][end_sn]" id="end_' + index + '" size="5" class="input-text">',  
                '<input type="button" value="删除" onclick="deletePurchaseDetail(' + index + ')" class="button">',  
                '</div>'  
            ].join('');  
            $(html).insertAfter("#" + lastIdAttr);  
        }  
    }  
  
    function deletePurchaseDetail(i) {  
        len = $("div[id^='details_']").size();  
        if (len > 1 && window.confirm("确认删除本行")) {  
            $("#details_" + i).remove();  
        } else {  
            alert('明细信息必须保留一行');  
        }  
    }  
</script>  

jquery html操作CURD

热门文章

最新文章

相关课程

相关电子书

相关实验场景