jquery表格插入第一行.docx
《jquery表格插入第一行.docx》由会员分享，可在线阅读，更多相关《jquery表格插入第一行.docx（7页珍藏版）》请在冰豆网上搜索。
jquery表格插入第一行
竭诚为您提供优质文档/双击可除
jquery,表格插入第一行
篇一：
基于jquery的实现简单的表格中增加或删除下一行
代码如下：
html代码如下:
jquery代码如下:
篇二：
jquery可拖曳动态添加表格、动态排序
@authorwen
@time20xx-05-18
这个是模型代码，领会思想就够
√1、3行2列，可以拖动调整位置
√2、第1列为名字，超长支持...（用css控制）
√3、第2列固定宽度，第1列显示剩下的（用css控制）
√4、第2列提供“上移”、“下移”操作
√5、第2列提供“删除”操作
√6、提供“添加行”操作，弹出div输入名字添加行
√7、提供“修改行”操作，弹出div输入名字修改行
文件：
movetable.html
src="
//启动加载
$（function（）{
//varobj={a:
1};
//varar=[{b:
1},{c:
2}];
//alert（0）;
//alert（$.tojson（obj））;
//alert（ar[0].b）;
resert（）;
//拖动排序
$（"#sortable"）.sortable（{
items:
tr,
//handle:
tr,
//handle:
.portlet-header,
//cursor:
move,
stop:
function（）{
resert（）;
}
}）;
$（"#sortable"）.disableselection（）;
}）
//up
$（"a.up"）.live（"click",function（）{
varonthis=$（this）.parent（"td"）.parent（"tr"）;
vargetup=$（this）.parent（"td"）.parent（"tr"）.prev（）;
$（getup）.before（onthis）;
resert（）;
}）
//down
$（"a.down"）.live（"click",function（）{
varonthis=$（this）.parent（"td"）.parent（"tr"）;
vargetup=$（this）.parent（"td"）.parent（"tr"）.next（）;
$（getup）.after（onthis）;
resert（）;
}）
//del
$（"a.del"）.live（"click",function（）{type="text/javascript"
varonthis=$（this）.parent（"td"）.parent（"tr"）;
onthis.remove（）;
}）
//openadd
$（"input[name=addnewtr]"）.live（"click",function（）{
$（"input[name=name1]"）.attr（"value",""）;
$（"input[name=name2]"）.attr（"value",""）;
$（".box3"）.hide（）;
$（".box2"）.show（）;
}）;
$（"input[name=nameadd]"）.live（"click",function（）{
addnew（）;
$（".box2"）.hide（）;
}）;
//openupdate
functionopenupdate（a）{
//alert（"进了了望"+a）;
varvalue1=$（"#"+a+"_1"）.html（）;
varvalue2=$（"#"+a+"_2"）.html（）;
$（"input[name=name3]"）.attr（"value",value1）;
$（"input[name=name4]"）.attr（"value",value2）;
$（".box2"）.hide（）;
$（"input[name=_update]"）.attr（"value",a）;
$（".box3"）.show（）;
};
$（"input[name=nameupdate]"）.live（"click",function（）{
//alert（"进入了1"）;
varc=$（"input[name=_update]"）[0].value;
//alert（"进入了2"）;
updatedate（c）;
//alert（"进入了3"）;
$（".box3"）.hide（）;
}）;
//~~~~~~~~~~~~~~~~~~//
functionresert（）{
if（$（"#sortable"）.find（"td.doing"）.size（）==1）
{
//alert（"1"）;
$（"#sortable"）.find（"td.doing"）.parent（）.removeclass（"normal"）.removeclass（"last"）.removeclass（"first"）.addclass（"only"）;
}
if（$（"#sortable"）.find（"td.doing"）.size（）==2）
{
//alert（"2"）;
$（"td.doing:
eq（0）"）.removeclass（"only"）.removeclass（"normal"）.removeclass（"last"）.addclass（"first"）;
$（"td.doing:
eq
（1）"）.removeclass（"only"）.removeclass（"normal"）.removeclass（"first"）.addclass（"last"）;
}
if（$（"#sortable"）.find（"td.doing"）.size（）>=3）
{
//alert（"3"）;
$（"td.doing:
gt（0）"）.removeclass（"only"）.removeclass（"first"）.removeclass（"last"）.addclass（"normal"）;
$（"td.doing:
first"）.removeclass（"only"）.removeclass（"normal"）.removeclass（"last"）.addclass（"first"）;
$（"td.doing:
last"）.removeclass（"only"）.rem
oveclass（"normal"）.removeclass（"first"）.addclass（"last"）;
}
}
var_j=5;
//alert（_j）;
functionaddnew（）
{
varname1=$（"input[name=name1]"）[0].value;
varname2=$（"input[name=name2]"）[0].value;
_j=++_j;
//alert（_j）;
//添加新行
varsortable=$（#sortable）;
varfirsttr=sortable.find（tbody>tr:
first）;
varrow=$（""）;
vartd=$（""）;
vartd2=$（""）;
vartd3=$（""）;
td.text（name1）;
td2.text（name2）;
td3.append（"删除修改"）;
row.append（td）;
row.append（td2）;
row.append（td3）;
sortable.append（row）;
resert（）;
}
functionupdate（a）{
//传进来
//alert（a）;
//alert（"进来了"）;
openupdate（a）;
}
functionupdatedate（a）{
varname3=$（"input[name=name3]"）[0].value;
varname4=$（"input[name=name4]"）[0].value;
alert（name3）;
alert（name4）;
$（"#"+a+"_1"）.text（name3）;
$（"#"+a+"_1"）.text（name3）;
//alert（value1）;
//alert（value2）;
}
#sortable2{border:
1pxsolid#000;table-layout:
fixed;}
#sortable2th{text-align:
left;font-size:
14px;font-weight:
600;background:
#Fc9;}
#sortable2td{border-bottom:
1pxsolid#ccc;}
.link1{white-space:
nowrap;text-overflow:
ellipsis;-o-text-overflow:
ellipsis;overflow:
hidden;}.link2{white-space:
nowrap;text-overflow:
ellipsis;-o-text-overflow:
ellipsis;overflow:
hidden;}
#pannellista.arrow{
篇三：
jquery动态添加和删除行
"http:
//www.w3.org/tR/xhtml1/dtd/xhtml1-transitional.dtd">
jquery表格操作添加行、删除行和动态移动
src="/html/js/jquery-1.3.2.min.js">
添加一行
删除一行
上移下移
序号
步骤名称
步骤描述
相关操作
varcurrentstep=0;
varmax_line_num=0;
functionadd_line（）{
max_line_num=$（"#content
tr:
last-child"）.children（"td"）.html（）;
if（max_line_num==null）{
max_line_num=1;
}else{
max_line_num=parseint（max_line_num）;
max_line_num+=1;
}
$（#content）.append（
" +"onclick=lineclick（this）;>"
+max_line_num+"打开网页"+max_line_num+"打开登录网页"+max_line_num
+"删除编辑"）;}
functionremove_line（）{
$（"#contenttr"）.each（function（）{
varseq=parseint（$（this）.children（"td"）.html（））;if（seq==currentstep）
$（this）.remove（）;
if（seq>currentstep）
$（this）.children（"td"）.each（function（i）{
if（i==0）
$（this）.html（seq-1）;}）;}）;currentstep=0;}functionup_exchange_line（）{if（currentstep==0）{alert（请选择一项!
）;returnfalse;}if（currentstep=max_line_num）{alert（非法操作!
）;returnfalse;}varnextstep=parseint（currentstep）+1;//修改序号$（#line+nextstep+"td:
first-child"）.html（currentstep）;$（#line+currentstep+"td:
first-child"）.html（nextstep）;//取得两行的内容varnextcontent=$（#line+nextstep）.html（）;varcurrentcontent=$（#line+currentstep）.html（）;$（#line+nextstep）.html（currentcontent）;//交换当前行与上一行内容$（#line+currentstep）.html（nextcontent）;$（#contenttr）.each（function（）{$（this）.css（"background-color","#ffffff"）;}）;$（#line+nextstep）.css（"background-color","yellow"）;currentstep=nextstep;}
functionlineclick（line）{
$（#contenttr）.each（function（）{
$（this）.css（"background-color","#ffffff"）;}）;
varseq=$（line）.children（"td"）.html（）;$（line）.css（"background-color","yellow"）;currentstep=seq;
}
升级会员 