怎么动态添加删除一行表格

y362623206 2015-07-15 10:02:34 
<div>

  <table>

            <thead>

              <tr>

<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th>

              </tr>

          </thead>

          <tbody>

		  <tr id="template">

             <td><input type="text" style="width:100%"/></td>

             <td><input type="text" style="width:100%"/></td>

	     <td><input type="text" style="width:100%"/></td>

	     <td><input type="text" style="width:100%"/></td>

	     <td><input type="text" style="width:100%"/></td>

	     <td><input type="text" style="width:100%"/></td>	

            </tr>

          </tbody>

         </table>

		 <input type="button"  value="增加"/>

		 <input type="button"  value="删除"/>

        </div>

点增加输入一行表单填写的，点删除删除最后一行，第一行保留，最好用jquery
...全文
161 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
y362623206 2015-07-16
  • 打赏
  • 举报
 回复
引用 4 楼 u012212180 的回复:

<html>
<head>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
				<script>
			 $(document).ready(function(){
			 $("#b1").click(function(){
			 $("#template").append("<td><input></input></td>");
			 });	
			$("#b2").click(function(){
		if($("td").last().index()!=0)
			 $("td").last().remove();
			 });
			 });
			  
			  </script>
</head>
<body>

  <table>
            <thead>
              <tr>
			 
			  
<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th>
              </tr>
          </thead>
          <tbody>
          <tr id="template">
             <td><input type="text" style="width:100%"/></td>
             <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>   
            </tr>
          </tbody>
         </table>
         <input id="b1" type="button"  value="增加"/>
         <input id="b2" type="button"  value="删除"/>
  </body>
  </html>
判断一下就行了
增加我是这样写的$("#b1").click(function(){ var row=$("#template").clone(); row.appendTo("tbody"); });删除的时候怎么最后一行开始删，保留第一行
Sasayau 2015-07-16
  • 打赏
  • 举报
 回复 

<html>
<head>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
				<script>
			 $(document).ready(function(){
			 $("#b1").click(function(){
			 $("#template").append("<td><input></input></td>");
			 });	
			$("#b2").click(function(){
		if($("td").last().index()!=0)
			 $("td").last().remove();
			 });
			 });
			  
			  </script>
</head>
<body>

  <table>
            <thead>
              <tr>
			 
			  
<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th>
              </tr>
          </thead>
          <tbody>
          <tr id="template">
             <td><input type="text" style="width:100%"/></td>
             <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>   
            </tr>
          </tbody>
         </table>
         <input id="b1" type="button"  value="增加"/>
         <input id="b2" type="button"  value="删除"/>
  </body>
  </html>
判断一下就行了
Sasayau 2015-07-16
  • 打赏
  • 举报
 回复
引用 5 楼 u012153496 的回复:
[quote=引用 4 楼 u012212180 的回复:] 

<html>
<head>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
				<script>
			 $(document).ready(function(){
			 $("#b1").click(function(){
			 $("#template").append("<td><input></input></td>");
			 });	
			$("#b2").click(function(){
		if($("td").last().index()!=0)
			 $("td").last().remove();
			 });
			 });
			  
			  </script>
</head>
<body>

  <table>
            <thead>
              <tr>
			 
			  
<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th>
              </tr>
          </thead>
          <tbody>
          <tr id="template">
             <td><input type="text" style="width:100%"/></td>
             <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>
         <td><input type="text" style="width:100%"/></td>   
            </tr>
          </tbody>
         </table>
         <input id="b1" type="button"  value="增加"/>
         <input id="b2" type="button"  value="删除"/>
  </body>
  </html>
判断一下就行了
增加我是这样写的$("#b1").click(function(){ var row=$("#template").clone(); row.appendTo("tbody"); });删除的时候怎么最后一行开始删，保留第一行[/quote] 我上面贴的不就是从最后一个开始删，点一下删一个，然后最后一个保留么。。？
y362623206 2015-07-15
  • 打赏
  • 举报
 回复
引用 2 楼 steinfly 的回复:
$("tbody").append("<tr><td>.......")增加 $("tr:last").remove()删除
第一个要保留啊
steinfly 2015-07-15
  • 打赏
  • 举报
 回复
$("tbody").append("<tr><td>.......")增加 $("tr:last").remove()删除
那些你很冒险的梦G 2015-07-15
  • 打赏
  • 举报
 回复
亲，打开JQ api -> 文档处理分组里面函数可以解决你的问题
js动态表格添加一行删除一行保存一行
js动态表格添加一行删除一行保存一行
html的表格动态添加和删除行
主要效果是这样的，可以动态添加和删除对应的列 表格删除一行，即把后面的表格都向前移动一行，并把总行数减一即可。 表格添加一行，就利用js拼html的方式把表格拼出来。 因为实际值受到选择的影响，需要一个联动的操作。 又因为业务需要从后台数据库拿到表格有多少行的数据，并对每行进行展现，需要连接一下数据库。 因为利用了dataTables插件，需要引入一下。 <link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTab
动态添加删除table页面一行input表格
之前写过两篇关于HTML页面添加结点，删除结点的博文。今天偶然看到一个网友询问JSP页面上动态给表格增加行，删除行，碰巧那会儿比较闲，就动手写了一下，记录下来，希望能帮到需要的朋友们。 上面的代码中，首先在body中构造了一个table，为了方便后续的操作，我们给table添加了thead 和 tbody 标签，thead标签标示的是表格头，tbody标签标示的是表格主体。 示例中的表格，共有三列，第一列 first name，第二列 last name，第三列为操作列。 操作列中，包含两个操作，一个是给
使用jQuery实现动态添加和删除行（表格）的操作
使用jQuery实现动态添加和删除行实现效果代码 实现效果 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Doc
如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法）
1方法一： 使用table的insertRow()方法插入一行，使用table.removeChild(tr)删除一行，具体的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ text-align: c.
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章