<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格添加行列</title>
</head>
<body>
<table>
<tbody id="test">
</tbody>
</table>
<table style="display: none;">
<tbody id="modo">
<tr>
</tr>
</tbody>
</table>
<button id="add_row">添加行</button>
<button id="add_col">添加列</button>
<button id="get_str">提取str</button>
<input type="text" id="dele_row_text" /><button id="dele_row">删除行</button>
<input type="text" id="dele_col_text" /><button id="dele_col">删除列</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
//var a = $("#test").children().length;
//alert(a)
$("#add_row").click(add_row)
$("#add_col").click(add_col)
$("#get_str").click(get_str)
$("#dele_row").click(dele_row)
$("#dele_col").click(dele_col)
/* test1()
function test1(){
var str = "1,2,3,4,5|7,8,9,10,11|12,13,14,15,16";
var a = str.split('|');
alert(a.length);
var b = a[1].split(',');
alert(b.length);
}*/
function add_row() { //添加行方法
var mode_tr = $("#modo tr:first").clone();
$("#test").append(mode_tr);
f5_click()
}
function add_col() { //添加列方法
var tr = $("tr"); //所有tr元素
$("tr").each(function(index) {
var td = $("<td>updata</td>").addClass("td_up");
//td.click(up)
$(this).append(td)
})
f5_click()
}
function get_str() { //提取内容
var str="";
var trLen = $("#test tr").length;
for(var i = 0;i<trLen;i++){
var tr = $("#test").find("tr").eq(i);//获取每一行tr
var tdLen = $(tr).find("td").length;
for(var j = 0;j<tdLen;j++){
td=$(tr).find("td").eq(j);//获取每行td
str = str+$(td).text()+","
}
str = str+"|"//换行
}
return str;
}
function dele_row() {
var row = $("#dele_row_text").val();
row = row - 1;
var tr = $("#test tr:eq(" + row + ")");
if(!confirm("确定要删除" + $(tr).find("td").eq(0).text() + "这一行？")) {
return false
}
$(tr).remove();
}
function dele_col() {
var col = $("#dele_col_text").val();
col = col - 1;
var tr = $("tr");
$.each(tr, function(index) {
if(index == 0) {
if(confirm("确定要删除" + $(this).find("td").eq(col).text() + "这一列？") == 0) {
return false;
}
}
$(this).find("td").eq(col).remove()
});
}
function f5_click() {
$(".td_up").bind('click', function() {
$(this).text("aaa")
})
}
</script>
</body>
</html>
