使用jquery生成动态表格并选择每行数据

1.test01.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test01.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/test01.js"></script>
</head>

<body>
	<div id="div1">
		<button class="btn">test</button>
		<div id="div2"></div>
		<div id="div3"></div>
	</div>
</body>
</html>

2.test01.js

$(function() {
	$
			.extend({
				hello : function(data) {
					// alert2(data);
//					alert("hello");
					$("#div3")
							.html(
									"<table><tr class='tc'><td>id</td><td>name</td></tr><tr  class='tc'><td>1</td><td>zhangsan</td></tr><tr class='tc'><td>2</td><td>lisi</td></tr></table>");

				},
				world:function(){
//					$(".tc").click(function(){
//						alert($(this).html());
//					});
					alert($(this).html());
				}
			});
	// var alert = function() {
	// document.write("yes");
	// };
	// var alert2 = new Function("document.write('no');document.write('no2');");
	$("#div1").on("click", ".btn", function() {
		var i = 1;
		i++;
		$("#div2").html("<button class='btn'>test2</button>");
		$.hello(i);
//		$("#div3")
//		.html(
//				"<table><tr class='tc'><td>id</td><td>name</td></tr><tr><td>1</td><td>zhangsan</td></tr><tr class='tc'><td>2</td><td>lisi</td></tr></table>");

		$("#div3").on("click",".tc", function(){
			alert( $(this).text() );
			});
	});
//	$("#div1").on("mouseover", "table tr", function() {
//		// $this=$(this);
//		// alert($this);
//		$.world();
//	});
//	$("table tr").click(function(){
//		alert($(this).html());
//	});
	
});

3.运行



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值