jquery 操作表格

Sharpleo

浏览: 576241 次
性别:
来自: newsk

最近访客更多访客>>

malson

damin

djxwl

jeneo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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);
}

table.zip (35.5 KB)
下载次数: 13

分享到：

jxl 操作excel | js 得到对象的宽度和高度

2012-05-06 11:15
浏览 1009
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 操作表格

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 操作表格

评论

发表评论

相关推荐

easyui tree 选中节点 取消选中节点

在iframe中调用父窗口的js函数

js调用outlook

Jquery控制滚动条滚动

js 得到当前系统时间

div跟滚动条移动

js 正则查找固定字符串

js数据类型转换

空格变成问号

jquery easyui 表单验证

url中参数中特殊字符转义

js对象序列化成json字符串

js时间差计算

js刷新父页面

easyui datagrid 得到所有列属性

js四舍五入保留指定小数位

js调用ifram中的js函数

[转]js操作剪切板内容Excel多单元格数据到Html table对应单元格的复制

html字符过长自动换行css

js判断未申明的变量

最近访客更多访客>>

easyui tree 选中节点取消选中节点