jquery的replaceWith用法求详解，代码改进！

大张 2014-01-25 03:02:38
我增加的行中有多个input select,希望在删除时能保持内容不变，可是在replaceWith时遇到问题！
如何能简洁的更新相关的id,name,value?

以下是重点代码


//删除<tr/>

    var deltr =function(index)

    {

        var _len = $("#tab tr").length;

       $("tr[id='"+index+"']").remove();//删除当前行

        for(var i=index+1,j=_len;i<j;i++)

        {

           //var nextTxtVal = $("#desc"+i).val();

		   var nextTxtVal = $("#desc"+i).html();

		   var nextIndex = $("#desc"+i).get(0).selectedIndex; 

           $("tr[id=\'"+i+"\']")

               .replaceWith("<tr id="+(i-1)+" align='center'>"

                               +"<td>"+(i-1)+"</td>"

                               +"<td><select name=ColorName"+(i-1)+" id='desc"+(i-1)+"' style=width:auto;>"+nextTxtVal+"</select></td>"

                               +"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>删除</a></td>"

                           +"</tr>");

			   $("#desc"+(i-1)).get(0).selectedIndex = nextIndex; //index为索引值

       }

以下是全文代码




<!-- include file="public/isuser.asp" -->



<html>

<head>

<link href="style.css" rel="stylesheet" type="text/css" media="all" />

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<title></title>

<script>

    $(document).ready(function(){

        //<tr/>居中

        $("#tab tr").attr("align","center");

       

       //增加<tr/>

      $("#but").click(function(){

          var _len = $("#tab tr").length; 

		  //alert(_len);       

           $("#tab").append("<tr id="+_len+" align='center'>"

                               +"<td>"+_len+"</td>"

                               +"<td><select name=ColorName"+_len+" id='desc"+_len+"' style=width:auto;><option value=黑色 >黑色</option><option value=紫色 >紫色</option><option value=绿色 >绿色</option></select></td>"

							   

                               +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S90_"+_len+"' id='D_90"+_len+"' /></td>"

							   

                               +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S100_"+_len+"' id='D_100"+_len+"' /></td>"

							   

                               +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S110_"+_len+"' id='D_110"+_len+"' /></td>"

							   

                               +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S120_"+_len+"' id='D_120"+_len+"' /></td>"

							   

                               +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S130_"+_len+"' id='D_130"+_len+"' /></td>"

							   

                               +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S140_"+_len+"' id='D_140"+_len+"' /></td>"

							   

                                +"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删除</a></td>"

                          +"</tr>");             

       })    

    })



    //删除<tr/>

    var deltr =function(index)

    {

        var _len = $("#tab tr").length;

       $("tr[id='"+index+"']").remove();//删除当前行

        for(var i=index+1,j=_len;i<j;i++)

        {

           //var nextTxtVal = $("#desc"+i).val();

		   var nextTxtVal = $("#desc"+i).html();

		   var nextIndex = $("#desc"+i).get(0).selectedIndex; 

           $("tr[id=\'"+i+"\']")

               .replaceWith("<tr id="+(i-1)+" align='center'>"

                               +"<td>"+(i-1)+"</td>"

                               +"<td><select name=ColorName"+(i-1)+" id='desc"+(i-1)+"' style=width:auto;>"+nextTxtVal+"</select></td>"

                               +"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>删除</a></td>"

                           +"</tr>");

			   $("#desc"+(i-1)).get(0).selectedIndex = nextIndex; //index为索引值

       }    

        

    }

</script>

</head>

<body>

<div id="inner-table-hpzl">

<form action="" method="get">

  <table id="tab" border="1" width="60%" align="center" style="margin-top:20px">

    <tr>

<th width=30 align=center>序号</th>

<th width=110 align=center>颜色</th>

<th width=50 align=center>90</th><th width=50 align=center>100</th><th width=50 align=center>110</th><th width=50 align=center>120</th><th width=50 align=center>130</th><th width=50 align=center>140</th>

<th width=28 align=center>操作</th>

</tr>

  </table>

  <div style="border:2px;border-color:#00CC00;margin-left:20%;margin-top:20px">

    <input type="button" id="but" value="增加"/>

  </div>

</form>

  </div>

  <input name="" type="text" maxlength='6'>

    <input name="" type="submit"/> intK<input  name=intK> intS<input  name=intS>

</body>

</html>


我找到了原文里只有一个input,好理解，多个input就遇到问题了。
这是原文


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<title></title>

<script>

    $(document).ready(function(){

        //<tr/>居中

        $("#tab tr").attr("align","center");

       

       //增加<tr/>

      $("#but").click(function(){

          var _len = $("#tab tr").length;        

           $("#tab").append("<tr id="+_len+" align='center'>"

                               +"<td>"+_len+"</td>"

                               +"<td>Dynamic TR"+_len+"</td>"

                               +"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"

                                +"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删除</a></td>"

                          +"</tr>");            

       })    

    })

   

    //删除<tr/>

    var deltr =function(index)

    {

        var _len = $("#tab tr").length;

       $("tr[id='"+index+"']").remove();//删除当前行

        for(var i=index+1,j=_len;i<j;i++)

        {

           var nextTxtVal = $("#desc"+i).val();

           $("tr[id=\'"+i+"\']")

               .replaceWith("<tr id="+(i-1)+" align='center'>"

                               +"<td>"+(i-1)+"</td>"

                                +"<td>Dynamic TR"+(i-1)+"</td>"

                               +"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"

                                +"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>删除</a></td>"

                           +"</tr>");

       }    

        

    }

</script>

</head>

<body>

<form action="" method="get">

  <input name="" type="submit" />

  <table id="tab" border="1" width="60%" align="center" style="margin-top:20px">

    <tr>

      <td width="20%">序号</td>

      <td>标题</td>

      <td>描述</td>

      <td>操作</td>

    </tr>

  </table>

  <div style="border:2px;border-color:#00CC00;margin-left:20%;margin-top:20px">

    <input type="button" id="but" value="增加"/>

  </div>

</form>

</body>

</html>

这是原文地址http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html
...全文
224 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
Hello World, 2014-01-26
  • 打赏
  • 举报
 回复
ASP处理多个同名的表单元素是没有问题的，遍历即可，没有必要在前台改变。 另外如果要在前台改变在提交前重新命名一次即可，不用每次删除行的时候改来改去
大张 2014-01-25
  • 打赏
  • 举报
 回复
不好意思，刚才停电了。 ----------------------------------------------------
引用 9 楼 net_lover 的回复:
name只是前后台传递数据用，跟数据、跟显示、跟存入数据库没有任何关系，你为何非要 input控件name及value自动更正？？
因为我的后台程序要根据同一行的各name的值综合查询该条（行）记录是否符合要求。 例如 出货单 里要对每一行的商品进行库存验证。 ---------------------------------------------------- 谢谢 crying_boy 老师，您的代码好标准，正在努力学习吸收中！！
孟子E章 2014-01-25
  • 打赏
  • 举报
 回复
name只是前后台传递数据用，跟数据、跟显示、跟存入数据库没有任何关系，你为何非要 input控件name及value自动更正？？
泡泡鱼_ 2014-01-25
  • 打赏
  • 举报
 回复
不多说了,直接上代码,里面有注释 
<!-- include file="public/isuser.asp" -->
  
<html> 
<head> 
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>  
<script type="text/javascript"> 
var   idx     =   1;//全局保存序号，初始值为1

$(document).ready(function(){ 

    $("#tab tr").attr("align","center"); 
     
    $("#but").click(function(){
      var html  =   "<tr id={0} align='center'>" 
                    +"<td>{0}</td>" 
                    +"<td><select name=ColorName{0} id='desc{0}' style=width:auto;><option value=黑色 >黑色</option><option value=紫色 >紫色</option><option value=绿色 >绿色</option></select></td>" 
                    +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S90_{0}' id='D_90{0}' /></td>" 
                    +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S100_{0}' id='D_100{0}' /></td>" 
                    +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S110_{0}' id='D_110{0}' /></td>" 
                    +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S120_{0}' id='D_120{0}' /></td>" 
                    +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S130_{0}' id='D_130{0}' /></td>" 
                    +"<td><input type='text' class='number' size='6' maxlength='6' value='0' name='S140_{0}' id='D_140{0}' /></td>" 
                    +"<td><a href=\'#\' onclick=\'deltr({0})\'>删除</a></td>" 
                    +"</tr>";  
       html    =   html.replace(/\{0\}/g,idx++);//自增序号，且替换掉模板中的值     
       $("#tab").append(html);//追加行              
    });
}) 

//删除<tr/> 
var deltr =function(index){ 
    $("tr[id='"+index+"']").remove();//删除当前行
    
    var size =  $("#tab tr").size();//当前行数

    //除开表头。从第二行开始遍历所有tr
    $("#tab tr:gt(0)").each(function(i,n){
        var index   =   i+1,//当前行新的序号
            tr      =   $(this),//当前行
            id      =   tr.attr("id");//当前行ID
        
        //更新第一列的内容：：序号
        tr.find('td')
            .eq(0)
            .text(index);
            
        //更新select的name和id    
        tr.find('#desc'+id)
            .attr('name','ColorName'+index)
            .attr('id','desc'+index);
            
        /*
            更新尺码的name和id
            这里是以你例子中数据，直接指定了[90,100,110,120,130,140]
            如果不是固定的，可以用类似于下面的方法去动态获取
            var th  =   $("#tab tr:first th"),
                arr =   [];
            for(var i=2;i<th.size()-1;i++){
                arr.push(th.eq(i).text())
            }
        */    
        $.each([90,100,110,120,130,140],function(j,n){
            tr.find('#D_'+ n + id)
                .attr('name','S'+ n +'_' + index)
                .attr('id','D_'+ n +'' + index);
        });
        
        //更新当前行ID
        tr.attr('id',index);
    });
    //重置全局序号
    idx = size;
 } 

</script> 
</head> 
<body> 
<div id="inner-table-hpzl"> 
<form action="" method="get"> 
  <table id="tab" border="1" width="60%" align="center" style="margin-top:20px"> 
    <tr> 
<th width=30 align=center>序号</th> 
<th width=110 align=center>颜色</th> 
<th width=50 align=center>90</th><th width=50 align=center>100</th><th width=50 align=center>110</th><th width=50 align=center>120</th><th width=50 align=center>130</th><th width=50 align=center>140</th> 
<th width=28 align=center>操作</th> 
</tr> 
  </table> 
  <div style="border:2px;border-color:#00CC00;margin-left:20%;margin-top:20px"> 
    <input type="button" id="but" value="增加"/> 
  </div> 
</form> 
  </div> 
  <input name="" type="text" maxlength='6'> 
    <input name="" type="submit"/> intK<input  name=intK> intS<input  name=intS> 
</body> 
</html>
大张 2014-01-25
  • 打赏
  • 举报
 回复
删除后，要保证被删除行的下一行（后几行）input控件name及value自动更正 例如： 列1 列2 name1 namess1 name2 namess2 name3 namess3 name4 namess4 假设第二行被删除， 则原来的第三，第四行，name自动减1， 原来第三行< input name = "color3">,现在变成<input name = "color2">
蝶恋花雨 2014-01-25
  • 打赏
  • 举报
 回复
//删除<tr/> var deltr =function(index) { var _len = $("#tab tr").length; $("tr[id='"+index+"']").remove();//删除当前行 } 直接这样不就把整个行删除了。你想要什么效果。
大张 2014-01-25
  • 打赏
  • 举报
 回复
此方法基本上没改进我的JS 我还是想要个改进的JS,因为我的提交的表格内容太复杂，太多了。前台出错后台校正的思路与我想法相背。
孟子E章 2014-01-25
  • 打赏
  • 举报
 回复
思路大致这样的 var allNameIndex //用来保存你增加的编号，删除的时候，从里面删除 var i = 0；增加的数目，只进行增加 如 var allNameIndex = ","; 增加一行 i++ allNameIndex += i + "," 真实增加的代码 删除一行，你只需记住删除的需要，比如5， allNameIndex = allNameIndex.replace("," + r + ",",",") 你把allNameIndex放在隐藏域中提交，注意最好删除开始和结束的“,” 后台 Dim allNameIndex allNameIndex = Split(Request("allNameIndex"),",") For i =LBound(allNameIndex ) to UBound(allNameIndex ) Request.Form("表单名称" + i) 即可
大张 2014-01-25
  • 打赏
  • 举报
 回复
而且必须保证表格中同一列的input 的 name 值是 连续的 例如： 列1 列2 name1 namess1 name2 namess2 name3 namess3 name4 namess4
大张 2014-01-25
  • 打赏
  • 举报
 回复
我的ASP程序在提交时要求name不能有重命名的， 因为要根据name再select Where 不同数据！所以必须用js保证他的name的唯一性。 对于在删除时遍历该行的ipnut的name时进行更新， 求net_lover 版主给示例改进下，小弟的确很迷茫！
孟子E章 2014-01-25
  • 打赏
  • 举报
 回复
删除的时候你可以不理会id的值，在提交的时候遍历处理就可以了
jQuery的replaceWith()函数用法详解
replaceWith() 方法将选择的元素的内容替换为其他内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <...
jquery之replaceAll(),replaceWith()方法详解
replaceAll()函数用于使用当前匹配元素替换掉所有的目标元素。 该函数属于jQuery对象(实例)。 语法 jQuery 1.2 新增该函数。 jQueryObject.replaceAll( target ) 参数 参数描述 target String/...
jquery dom解析html,详解jQuery中的DOM操作
jQuery中的DOM操作看看DOM操作都有哪些逐一来看先写一份HTML代码，后面的代码将操作这份HTML代码你最喜欢的水果？苹果橘子菠萝查找节点1、查找元素节点查找节点可以用各种各样的选择器来查找$('ul li');2、查找属性...
jQuery详解
jQuery一、概述二、基本使用三、jquery选择器四、样式操作五、操作元素类名六、属性操作七、内容文本操作八、元素操作九、事件绑定十、获取元素的尺寸、位置 一、概述 1、什么是jQuery jQuery是一个快速、小型且功能...
jquery dom解析html,jQuery操作DOM元素详解
jQuery操作DOM元素详细方法总结。一、属性操作1.使用attr()获取:对象.attr(“属性名”)//返回当前属性值，底层使用的是getAttribute注意：此种方式不能获取value属性的实时...使用prop()使用方法同attr()一致，底...
JavaScript

87,921

社区成员

224,619

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章