Jquery 操作table (有需求,就有市场)

最新推荐文章于 2022-06-11 11:50:59 发布

彳卸风

最新推荐文章于 2022-06-11 11:50:59 发布

阅读量582

点赞数 1

分类专栏： js 文章标签： jquery javaScript

本文链接：https://blog.csdn.net/ci2011ss/article/details/41787203

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

随便找一个好看的样式

<style type="text/css">
	table.gridtable {
		font-family: verdana,arial,sans-serif;
		font-size:11px;
		color:#333333;
		border-width: 1px;
		border-color: #666666;
		border-collapse: collapse;
	}
	table.gridtable th {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #dedede;
	}
	table.gridtable td {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #ffffff;
}
</style>

添加要被操作的表格

<table style="width: 400px;" class="gridtable" id="_table"><tr><th style="width: 50px;">序号</th><th style="width: 250px;">内容</th><th style="width: 100px;">操作</th></tr></table>

<input type="text" name="" id="nr_text"/><a class= " id="sev_add_portrait" οnclick="addNew()" >添加</a>

function ed_(rows) {//编辑字段
	 var sid = "#xj_" + rows;
	 $(sid).removeAttr("readonly");
	}
 function dl_(rows){//删除所在行
	 $(rows).closest('tr').remove();
	}
 function addNew(){//添加行
	 var row_count = $("#_table").find("tr").length;
	 var ids="xj_"+row_count;
	 var nr_text = $("#nr_text").val();
	 if (nr_text === '') {
	 	return;
	 }
	 var ed = "<input type='button' id='ed" + row_count+ "' value='编辑' οnclick='ed_("+row_count+")'>";
	 var dl = "<input type='button' id='dl" + row_count+ "' value='删除' οnclick='dl_(this)'>";;
	 var table1 = $("#xunj_table");
	 var td ="<tr><td>"+row_count+ "</td><td><input type='text' name='"+ids+"' id='"+ids+"' value='"+nr_text+"' readonly='true''></td><td>"+ed+" "+dl+"</td></tr>";
	table1.append(td);	
	}