蜗牛—JQuery学习之table操作

最新推荐文章于 2019-01-15 10:30:42 发布

树上的大腰子

最新推荐文章于 2019-01-15 10:30:42 发布

阅读量706

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq1791422018/article/details/26699363

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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" />
<title>修改订单</title>
<script src="../../js/jquery-1.7.2.min.js"></script>
<style type="text/css">
body{
	font-size:13px;
	line-height:25px;
	}
table{
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	width:400px;
}
td{
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	text-align:center;
	}
.title{	
	font-weight:bold;
	background-color: #cccccc;
}
input text{
	width:100px;
}
      
</style>
<script type="text/javascript">

$(function(){
	$("input[name='addOrder'").click(function(){
		var trObj = $("<tr>").insertBefore(($("tr:last")));	
		var td1 = $("<td>").appendTo(trObj).html("xiuxiani");
		var td2 = $("<td>").appendTo(trObj).html("2");
		var td3 = $("<td>").appendTo(trObj).html("¥568.50");
		var td4 = $("<td>").appendTo(trObj);
		/*$("<input type='button'>").appendTo(td4).val("删除").click(function(){
			$(this).parent().parent().remove();	
		});*/
		$("<input type='button'>").appendTo(td4).val("删除");
		$("<input type='button'>").appendTo(td4).val("修改");
	});
	
	
	$("input[value='删除']").live("click",function(){
		$(this).parent().parent().remove();
	});
	
	
	$("input[value='修改']").live("click",function(
	){
		$(this).val("确认");
		//var tdobj = $(this).parent().prev().prev();
		//var tdobj = $(this).parent().parent().children()[1];
		var tdobj = $($(this).parent().parent().children().get(1));
		var txt = tdobj.html();
		tdobj.html("");
		$("<input type='text'>").appendTo(tdobj).val(txt).attr("size",4);
	});
	
	
	$("input[value='确认']").live("click",function(){
		$(this).val("修改");
		var tdobj = $(this).parent().prev().prev();
		$.ajax({url:'api.jsp',success: function(data){
			if(data == "success"){
			tdobj.html(5);
			}
		},error:function(){
				
		}});
	});
})

</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="order">
  <tr class="title">
    <td>商品名称</td>
    <td>数量</td>
    <td>价格</td>
    <td>操作</td>
  </tr>
  <tr id="row1">
    <td>防滑真皮休闲鞋</td>
    <td>12</td>
    <td>¥568.50</td>
    <td><input name="rowdel" type="button" value="删除" />
    <input id="edit1" type="button" value="修改" /></td>
  </tr>
  <tr>
    <td colspan="4" style="height:30px;">
    <input name="addOrder" type="button" value="增加订单" /></td>
  </tr>
</table>
</body>
</html>

树上的大腰子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
蜗牛—JQuery学习之table操作

修改订单body{ font-size:13px; line-height:25px; }table{ border-top: 1px solid #333; border-left: 1px solid #333; width:400px;}td{ border-right: 1px solid #333; border-bottom: 1px solid #333;
复制链接

扫一扫

专栏目录