jquery 操作表格
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="jquery-1.7.2.min.js" type="text/javascript"></script><script src="sharpcodetable.js" type="text/javascript"></script><title>无标题文档</title><style type="text/css">.headrow{height:26px;background-image:url(tb-bg.gif);background-repeat:repeat-x;text-align:center;}.target_table{border:solid 1px black;margin-top:20px;}.target_td{border-right:solid 1px black;}.tartget_btn{background-image:url(tb-bg.gif);background-repeat:repeat-x;width:120px;font-family:"微软雅黑";text-align:center;border:solid 1px black;cursor:pointer;}</style></head><body ><center><input type="button" value="复制一行" class="tartget_btn"/><input type="button" value="删除一行" class="tartget_btn"/><input type="button" value="增加一行" class="tartget_btn"/><input type="button" value="删除所有行" class="tartget_btn"/><input type="button" value="加载" class="tartget_btn"/><input type="button" value="生成json字符" class="tartget_btn"/>X:<input id="myx"/>Y:<input id="myy"/><tableclass="target_table" cellpadding="0" cellspacing="0" id="mytable" onmousemove="locationpoint(event);"><tr class="headrow"><td width="100" >ID</td><td width="200">Title</td><td width="300">Remark</td></tr><tr><td class="target_td">001</td><td class="target_td">菜单</td><td>网站菜单</td></tr><tr><td class="target_td">002</td><td class="target_td">图片</td><td>上传图片</td></tr></table></center></body></html>// JavaScript Documentvar currentselectrow;//当前选中行var temprow;//临时行function targetrowclick(obj){ if(currentselectrow == null) { obj.style.backgroundColor = "#d0d0d0"; currentselectrow = obj; } else { if(currentselectrow != obj) { obj.style.backgroundColor = "#d0d0d0"; currentselectrow.style.backgroundColor = "white"; currentselectrow = obj; } }}function targetrowhover(obj){ obj.style.cursor = "pointer";}$(document).ready(function(){ var rowsize = $("#mytable tr").length - 1; //表格行数除去表头 $("#mytable tr:not(:first)").bind( {click: function () { targetrowclick(this); },mouseover: function() { targetrowhover(this); } }); $("#mytable tr:not(:first)").each(function() { $("td", this).bind( {dblclick: function () { edit(this); } } ) });temprow= $("#mytable tr:last");});//复制一行function copyarow(){ if(currentselectrow == null) { alert("请先选择一行！"); } else { $(currentselectrow).clone(true).appendTo("#mytable"); $("#mytable tr:last").css("backgroundColor", "white"); }}//删除一行function deleterows(){ if(currentselectrow == null) { alert("请先选择要删除的一行！"); } else { $(currentselectrow).remove(); currentselectrow = null; }}//增加一行function addarow(){ var newrow = $(temprow).clone(true); $(newrow).each(function() { $("td:eq(0)", this).html("&nbsp;0")$("td:eq(1)", this).html("&nbsp;1")$("td:eq(2)", this).html("&nbsp;2") }); $("#mytable").append(newrow);}//删除所有行function deleteallrow(){ $("#mytable tr:not(:first)").remove();}//编辑function edit(obj){ if($(obj).children().length == 0) { var tdwidth = obj.offsetWidth; $(obj).html("<inputvalue='" + obj.innerText + "' style='width:" + tdwidth + "px;'/>"); $(obj).children(0).focus(); $(obj).children(0).blur( function () { obj.innerHTML = $(obj).children(0).val() + "&nbsp;"; } ); }}//根据json对象添加行function loadjsondata(){var jsondata=eval([{"a":"1","b":"2","c":"3"},{"a":"a","b":"b","c":"c"},{"a":"f","b":"ff","c":"fff"}]);for(var i=0;i<jsondata.length;i++){var newrow = $(temprow).clone(true); $(newrow).each(function() { $("td:eq(0)", this).html(jsondata.a)$("td:eq(1)", this).html(jsondata.b)$("td:eq(2)", this).html(jsondata.c) }); $("#mytable").append(newrow);}}function locationpoint(event){$("#myx").val(event.clientX);$("#myy").val(event.clientY);}//生成json数据function buildJsonStr(){var jsonstr="[";var datarows=$("#mytable tr:not(:first)");var datalength=datarows.length;$(datarows).each(function(i,n) {if(i==datalength-1){jsonstr+="{'a':'"+$("td:eq(0)", this).text()+"',";jsonstr+="'b':'"+$("td:eq(1)", this).text()+"',";jsonstr+="'c':'"+$("td:eq(2)", this).text()+"'}";}else{jsonstr+="{'a':'"+$("td:eq(0)", this).text()+"',";jsonstr+="'b':'"+$("td:eq(1)", this).text()+"',";jsonstr+="'c':'"+$("td:eq(2)", this).text()+"'},";}//alert( $("td:eq(0)", this).html()); // alert($("td:eq(1)", this).html());//alert($("td:eq(2)", this).html()); });jsonstr+="]";alert("生成的josn字符串是:"+jsonstr);}
页:
[1]