JQuery操作Table

yangpanwww

浏览: 625551 次
性别:
来自: 杭州

最近访客更多访客>>

lichen_1314

qq_24313835

leimingchao

onetwofree

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JQuery操作Table 的例子：

最后面有图片效果：

注意table的TD上面的 editTemplate 属性....很简单..

直接看代码吧：

<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.tableEdit.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
   $('#ck_0').click(function(){
		var bl = this.checked;	
		$('input[type="checkbox"]').each(function(){
			this.checked=bl;
		});
   });
	$("#zj").click(function(){
			addRow("table");
	});

	$("#sc").click(function(){
			removeRow("table");
	});
	$("#bc").click(function(){	
			alert(getJsonString("table"));
	});
});

function changeSel(obj){
	alert(obj.value);
}	

</script>
</head>
<body>
<input type="button" id="zj" value="增加"/>
<input type="button" id="sc" value="删除"/>
<div>
<table id="table" border="1" >
	<tr>
		<td><input  type="checkbox" id="ck_0" name="ck_0"/></td>
		<td editTemplate="td1">开始符号</td>
		<td editTemplate="td2">开始值</td>
		<td editTemplate="td3">结束符号</td>
		<td editTemplate="td4">结束值</td>
	</tr>
</table>
</div>
<input type="button" id="bc" value="保存"/>



<textarea id="td1" style="display:none"> 
	<select name="begin_type" onchange="changeSel(this)" >
		<option value=">">大于</option>
		<option value=">=">大于等于</option>
		<option value="=">等于</option>
	</select>
</textarea>
<textarea id="td2" style="display:none"> 
	<input type="text" name="begin" />
</textarea>
<textarea id="td3" style="display:none"> 
	<select name="end_type">
		<option value="<">小于</option>
		<option value="<=">小于等于</option>
		<option value="=">等于</option>
	</select>
</textarea>
<textarea id="td4" style="display:none"> 
	<input type="text" name="end"/>
</textarea>
</body>
</html>

HTML 代码简单不需要解释

运行效果如图：

啦啦啦啦啦啦....没拉....

现实开发中。。我们后天往往返回的都是 josn 的数据。。所以。。

我们可以根据 jquery.tableEdit.js 自定义方法。。如：

var data = "{'txm':'06945174702517','mc':'青霉素','jx':'250mg*12片','gg':'规格','dw':'盒','zgjg':'50.0'}";

//自定义方法
  function addRows(table_id,data){
		var rows=$("#"+table_id);
		var vNum=$("#"+table_id+" tr").size();
		var tr_Num = vNum - 1;

	    var tr = handleData(data,tr_Num);
		$(tr).insertAfter($("#"+table_id+" tr:eq("+tr_Num+")"));  
  }
  
  function handleData(data,tr_Num){
  		var obj = eval("("+data+")");
  		var tr = "<tr>";
  		tr += '<td height="28" align="center" valign="middle" bgcolor="#FFFFFF" ><input  type="checkbox" id="ck_'+tr_Num+'" name="ck_'+tr_Num+'"/></td>';
  		tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input type="text" name="textfield" class="nkk" style="width: 100px; height: 20px;" value="'+obj["txm"]+'" /></td>';
  		tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input type="text" name="textfield" class="nkk" style="width: 140px; height: 20px;" value="'+obj["mc"]+'" /></td>';
  		tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input type="text" name="textfield" class="nkk" style="width: 80px; height: 20px;" value="'+obj["jx"]+'" /></td>';
  		tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" class="hei_12px"><input type="text" name="textfield10" class="nkk" style="width: 50px; height: 20px;" value="'+obj["gg"]+'" /></td>';
  		tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" class="hei_12px"><input type="text" name="textfield10" class="nkk" style="width: 50px; height: 20px;" value="'+obj["dw"]+'" /></td>';
  		tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" class="hei_12px"><input name="jg" type="text" class="nkk" style="width:50px; height:20px" value="'+obj["zgjg"]+'"/></td>';
  		tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input name="xsjg" type="text" class="nkk" style="width:80px; height:20px" value=""/></td>';
  		tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ></td>';
        tr += '<td align="center" valign="middle" bgcolor="#FFFFFF" ><input type="text" name="textfield3" class="nkk" style="width: 80px; height: 20px;" value="" /></td>';  
        tr += '</tr>';
        return tr;
  }

嘿嘿。。。很简单吧！