使用jquery对表格的行进行增删。要求：用按钮对表格的行进行增删，并且增加的行数不能超过5行。。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用jquery对表格的行进行增删。要求：用按钮对表格的行进行增删，并且增加的行数不能超过5行。。相关的知识，希望对你有一定的参考价值。
$(document).ready(function()
// 增加一行
var i=1;
$("#add").click(function()
if(i<5)
var idval = 'tr'+i;
var opp = 'td'+i;
var tr = "<tr id="+idval+" height='25'><td><input type='text' name='spec' value='' id="+opp+" size='30' /> </td></tr>";
$(tr).appendTo("#table");
i++;
);
// 点击删除，则删除对应的行
$("#del").click(function()
var tr_id = $("table>tbody>tr:last").attr("id");
$("#"+tr_id).remove();
);
);
也可以给tr赋值id号，删除的时候检索到id值，对应删除行就好了。。
你下载附件试试，测试过了，ok的。。。id、class之类的对应修改好就好了
<head>
<title>
</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var row_count = 0;
function addNew()
var table1 = $('#table1');
var firstTr = table1.find('tbody>tr:first');
var row = $("<tr></tr>");
var td = $("<td></td>");
if (row_count < 5)
td.append($("<b>TR TD"+row_count+"</b>")
);
row.append(td);
table1.append(row);
row_count++;
function del()
var table1 = $('#table1');
var lasttr = table1.find('tbody>tr:last');
if (row_count > 0)
lasttr.remove();
row_count = row_count-1;
</script>
</head>
<body>
<input type="button" value="Add" onclick="addNew();">
<input type="button" value="Delete" onclick="del();">
<div id="rightcontent">
<table id="table1" cellspacing="3" cellpadding="3" border="1">
<tbody>
<tr>
<th>下面举例</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
增加一行，就给row_count+1，判断，没有超过5就执行，超过5了，点击也不执行，
删除一行，就-1，=0了就是说没有行了，就不执行remove()
，也可以判断给按钮加一个禁止样式。
参考技术B var rowsnum=0;$("#add_row").click(function()
rowsnum++;
if(rowsnum<=5)
$("#table").append("<tr><td class='td_title'><input type='text' name='agenda' class='input100'/></td><td class='td_display center'><input type='button' value='删除' class='btn4' onclick='deleteRows(this)'/></td></tr>");
);
function deleteRows(obj)
$(obj).parent().parent().remove();
看老夫这答案只值5分吗追问
如果我增加了5行后，删除一行，再增加一行就不行了。。求再次解答。。
追答rowsnum--;
在deleteRows中啊 我去 你真是逗
如何用C#的winform程序对Excel表格进行增删修查
如何用C#的winform程序对Excel表格进行增删修查 ，求高手啊！！急！！！！
using System.Data.OleDb;....
void zenshancha(string gongneng)
OleDbConnection cnn=new OleDbConnection();
cnn.ConnectionString= "Microsoft.Jet.OLEDB.4.0;Data Source=Excel 路径;Extended Properties=\\"Excel 8.0;HDR=Yes;IMEX=1\\";
try
cnn.Open();
DataSet ds=new DataSet();
string sql;
switch(gongneng)
case "增加":
sql="Insert Into [表名$](字段名,字段名...)values('"+变量值+"',...)";
break;
case "删除":
sql="Delete * from [表名$] where 条件";
break;
case "查询":
sql="Select * from [表名$]";
break;
default:
MessageBox.Show("执行命令不包含在内！");
break;
OleDbDataAdapter oda=new OleDbAdapter(sql,cnn);
oda.Fill(ds);
dataGridView.DataSource=ds.Tables[0];
private void form_load()
//初始化一个comboBox，让他的下拉列表为操作名称;
private void button1_click(....)
zengshancha(comboBox.Text.Trim()); //执行操作过程
参考技术A 这是过去曾参考应用过的方法摘一段给你应急：
一、首先处理好数据库连接字串
Excel2000-2003： string connStr = "Microsoft.Jet.Oledb.4.0;Data Source='c:\test.xls';Extended Properties=\"Excel 8.0;HDR=Yes;IMEX=1\";";
Excel2007: string connStr = "Microsoft.Ace.OleDb.12.0;Data Source='c:\test.xlsx';Extended Properties=\"Excel 12.0;HDR=Yes;IMEX=1\";";
其中：
HDR ( Header Row )设置：
若指定值为Yes，代表 Excel 档中的工作表第一行是栏位名称
若指定值为 No，代表 Excel 档中的工作表第一行就是资料了，没有栏位名称
IMEX ( IMport EXport mode )设置
当 IMEX=0 时为"汇出模式"，这个模式开启的 Excel 档案只能用来做"写入"用途。
当 IMEX=1 时为"汇入模式"，这个模式开启的 Excel 档案只能用来做"读取"用途。
当 IMEX=2 时为"连结模式"，这个模式开启的 Excel 档案可同时支援"读取"与"写入"用途。
二、进行表格数据的查询、插入和更新：
（假设Excel文件text.xls中存在Excel表单tree，有2列分别为id,name）
1、查询
String sql = "select id, name from [tree$]";
或
String sql = "select id, name from `tree$`;
2、插入
String sql = "insert into [tree$] (id,name) values(1,'testname');
3、更新
String sql = "update [tree$] set name='name2' where id=1;
4、数据的删除
在OleDB的连接方式下，不可以使用delete from 语句来删除某表中的某一条记录。确切的说，在此模式下，将无法删除表中的记录。即使用update语句将所有的字段写成null，打开excel文件后依然会发现保留了该空行，而且在使用oleDB连接进行查询时，依然会查询到这条空数据。追问
那怎么办？ 我还要导入，导出表格！头大啊！！
追答哪能呀，这不是直接读写访问吗？哪里有导入导出操作？！如果你用心找，删除记录方法很多呀，再找了一个，参考一下，相信，我不这样，你也能自己找到的，呵呵。
你一下用了dataGridView控件，那么：
if (dataGridView1.CurrentRow != null) //当前的选中行
string id = dataGridView1.CurrentRow.Cells["id"].Value.ToString();
string sql = "delete ... where id =" + id;
... //执行sql 更新数据库，也就是在数据表中删除选中的行
dataGridView1.Rows.Remove(dataGridView1.CurrentRow) // 这是在界面上删除一行
嗯 ，谢谢， 我再找下，项目要求的是 可以导入表格，还要导出表格，还要把查询的条件结果集导出来，然后再生成图表 --------
追答要采用导入导出的话，发给你一个实例，你设计时参考。见本题的附件。
下面这个方法也供参考,excel就是个数据库
/// <summary>
/// 读取Excel文档
/// </summary>
/// <param name="Path">文件名称</param>
/// <returns>返回一个数据集</returns>
public DataSet ExcelToDS(string Path)
string strConn = "Provider=Microsoft.Jet.OLEDB.4.0;" +"Data Source="+ Path +";"+"Extended Properties=Excel 8.0;";
OleDbConnection conn = new OleDbConnection(strConn);
conn.Open();
string strExcel = "";
OleDbDataAdapter myCommand = null;
DataSet ds = null;
strExcel="select * from [sheet1$]";
myCommand = new OleDbDataAdapter(strExcel, strConn);
ds = new DataSet();
myCommand.Fill(ds,"table1");
return ds;
/// <summary>
/// 写入Excel文档
/// </summary>
/// <param name="Path">文件名称</param>
public bool SaveFP2toExcel(string Path)
try
string strConn = "Provider=Microsoft.Jet.OLEDB.4.0;" +"Data Source="+ Path +";"+"Extended Properties=Excel 8.0;";
OleDbConnection conn = new OleDbConnection(strConn);
conn.Open();
System.Data.OleDb.OleDbCommand cmd=new OleDbCommand ();
cmd.Connection =conn;
//cmd.CommandText ="UPDATE [sheet1$] SET 姓名='2005-01-01' WHERE 工号='日期'";
//cmd.ExecuteNonQuery ();
for(int i=0;i<fp2.Sheets [0].RowCount -1;i++)
if(fp2.Sheets [0].Cells[i,0].Text!="")
cmd.CommandText ="INSERT INTO [sheet1$] (工号,姓名,部门,职务,日期,时间) VALUES('"+fp2.Sheets [0].Cells[i,0].Text+ "','"+
fp2.Sheets [0].Cells[i,1].Text+"','"+fp2.Sheets [0].Cells[i,2].Text+"','"+fp2.Sheets [0].Cells[i,3].Text+
"','"+fp2.Sheets [0].Cells[i,4].Text+"','"+fp2.Sheets [0].Cells[i,5].Text+"')";
cmd.ExecuteNonQuery ();
conn.Close ();
return true;
catch(System.Data.OleDb.OleDbException ex)
System.Diagnostics.Debug.WriteLine ("写入Excel发生错误："+ex.Message );
return false;
追问
怎么复制下，老是报错！！
参考技术C 大家实现的方法，可能各有千秋，可以取长补短，找去适合自己的方法 参考技术D 我的办法是先excel读入dataset，然后进行修改、显示。完成后导出excel追问怎么导出？
追答用第三方控件gembox
以上是关于使用jquery对表格的行进行增删。要求：用按钮对表格的行进行增删，并且增加的行数不能超过5行。。的主要内容，如果未能解决你的问题，请参考以下文章