jquery 操作报表 _Web前端

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" onclick="copyarow();" />
<input type="button" value="删除一行" class="tartget_btn" onclick="deleterows();" />
<input type="button" value="增加一行" class="tartget_btn" onclick="addarow();" />
<input type="button" value="删除所有行" class="tartget_btn" onclick="deleteallrow();" />
<input type="button" value="加载" class="tartget_btn" onclick="loadjsondata();" />
<input type="button" value="生成json字符" class="tartget_btn" onclick="buildJsonStr();" />
X:<input id="myx"/>Y:<input id="myy"/>
<table  class="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 Document
var 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("<input  value='" + 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[i].a)
		$("td:eq(1)", this).html(jsondata[i].b)
		$("td:eq(2)", this).html(jsondata[i].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);
}