<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" placeholder="行数rows" name="rows">
<input type="text" placeholder="列数cols" name="cols">
<button>生成</button>
<div id="box" style="overflow: hidden"></div>
<script>
$("button:first").click(function(){
$("#box").html(""); //important
var row = $("input[name='rows']").val();
var col = $("input[name='cols']").val();
$("#box").append("<table></table>");
for(var i = 0;i < row;i++){
$("table").append("<tr></tr>");
}
for(var j = 0;j < col;j++){
$("tr").append("<td></td>");
}
$("td").css({"width":"100px","height":"30px","border":"1px solid #53a9ff"});
$("tr").append("<button class='del' name='new'>删除</button>");
$("tr").append("<button class='add' name='new'>增加下一行</button>");
$("tr").append("<button class='add2' name='new'>增加上一行</button>");
$("button[name='new']").css({"height":"34px","border":"1px solid #53a9ff","backgroundColor":"white"});
$("button[class='del']").click(function(){
$(this).parent().detach();
});
$("button[class='add']").click(function(){
var newtr = $(this).parent().clone("true");
$(newtr).css("background","orange"); //???只想给tr下的td背景色,但是此时tr被赋值给变量newtr
$(this).parent().after(newtr);
});
$("button[class='add2']").click(function(){
var newtr = $(this).parent().clone("true");
$(newtr).css("background","#00da96");
$(this).parent().before(newtr);
});
$("td").click(function(){
var that = this;
var content = $(this).text();
$(this).html("");
$(this).append("<input type='text' class='create'>");
$("input[class='create']").focus().val(content);
$("input[class='create']").css({"width":"98px","height":"26px","border":"1px solid #53a9ff"});
$($("input[class='create']")).click(function(ev){
ev.stopPropagation();
});
$($("input[class='create']")).blur(function(){
$(that).html($("input[class='create']").val());
});
});
});
</script>
</body>
</html>