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

来源：互联网发布：淘宝客吸引人的广告词编辑：程序博客网时间：2024/06/10 14:01

随便找一个好看的样式

<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" onclick="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='编辑' onclick='ed_("+row_count+")'>"; var dl = "<input type='button' id='dl" + row_count+ "' value='删除' onclick='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);}

0 0