jquery表格插入第一行.docx
- 文档编号:14143441
- 上传时间:2023-06-21
- 格式:DOCX
- 页数:7
- 大小:16.04KB
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;
}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 表格 插入 一行