介绍
这篇文章给大家介绍使用jQuery怎么动态操作表单,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
具体如下:
& lt; html> & lt; head> & lt;才能title> jquery表格操作& lt;/title> & lt;才能https://www.yisu.com/zixun/script src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "> 脚本> <风格type=" text/css "> 表格 { 边界:黑色固体1 px; border-collapse:崩溃; } 道明 { 边界:黑色固体1 px; 填充:3 px; } .td_Num { 宽度:60 px; text-align:中心; } .td_Item { 宽度:160 px; text-align:中心; } .td_Oper { 宽度:120 px; text-align:中心; } .td_Oper跨度 { 光标:指针; }> 风格 >头 身体<> <表>表> <表id="内容"> 表> var currentStep=0; var max_line_num=0;//添加新记录 函数add_line () { max_line_num=$(“#内容tr:胎”)定格(td) . html (); 如果(max_line_num==null) { max_line_num=1; } 其他{ max_line_num=方法(max_line_num); max_line_num +=1; } $(" #内容”).append ( “ 序号 道明> 步骤名称 道明> 步骤描述 道明> 相关操作添加> 道明> “+ “ "); }//删除选择记录 函数remove_line(指数){ 如果(指数!=null) { .parent currentStep=$(指数).parent()();(“道明:第一个孩子”). html (); } 如果(currentStep==0) { alert('请选择一项!”); 返回错误; } 如果确认(“确定要删除改记录吗?”)){ $(" #内容tr”)。每个(函数(){ var seq=方法($()定格(td) . html ()); 如果(seq==currentStep) {$ () .remove ();} 如果(seq> currentStep){$()定格(“td”)。每个(函数(我){如果美元(i==0)(这个)。html (seq - 1);});} }); } }//上移 函数up_exchange_line(指数){ 如果(指数!=null) { .parent currentStep=$(指数).parent()();(“道明:第一个孩子”). html (); } 如果(currentStep==0) { alert('请选择一项!”); 返回错误; } 如果(currentStep <=1) { alert('已经是最顶项了!”); 返回错误; } var upStep=currentStep - 1;//修改序号 $(' #线+ upStep +“td:第一个孩子”). html (currentStep); $(' #线+ currentStep +“td:第一个孩子”). html (upStep);//取得两行的内容 var upContent=$(' #线+ upStep) . html (); var currentContent=$(' #线+ currentStep) . html (); $(' #线+ upStep) . html (currentContent);//交换当前行与上一行内容 $(' #线+ currentStep) . html (upContent); $(" #内容tr”)。每个(函数(){$ ()。css(“背景颜色”,“# ffffff”);}); $(" #线' + upStep)。css(“背景颜色”,“黄色”); event.stopPropagation ();//阻止事件冒泡 }//下移 函数down_exchange_line(指数){ 如果(指数!=null) { .parent currentStep=$(指数).parent()();(“道明:第一个孩子”). html (); } 如果(currentStep==0) { alert('请选择一项!”); 返回错误; } 如果(currentStep>=max_line_num) { alert('已经是最后一项了!”); 返回错误; } var nextStep=方法(currentStep) + 1;//修改序号 $(' #线+ nextStep +“td:第一个孩子”). html (currentStep); $(' #线+ currentStep +“td:第一个孩子”). html (nextStep);//取得两行的内容 var nextContent=$(' #线+ nextStep) . html (); var currentContent=$(' #线+ currentStep) . html ();//交换当前行与上一行内容 $(' #线+ nextStep) . html (currentContent); $(' #线+ currentStep) . html (nextContent); $(" #内容tr”)。每个(函数(){$ ()。css(“背景颜色”,“# ffffff”);}); $(" #线' + nextStep)。css(“背景颜色”,“黄色”); event.stopPropagation ();//阻止事件冒泡 }//保存数据 函数SaveData () { var data=?根>”; $(" #内容tr”)。每个(函数(){ 数据+=?item>”; var stepName=$(这);(“道明:eq(1)”);(“输入”).val (); var stepDescription=$(这);(“道明:eq(2)”);(“输入”).val (); 数据+="”+ max_line_num + +“ ” “输入> " + “" + “ ”+ “上移 " + “下移 " + “删除 " + " " + "使用jQuery怎么动态操作表单