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

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
...全文
155 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的方式把表格拼出来。 因为实际值受到选择的影响，需要一个联动的操作。 又因为业务需要从后台数据库拿到表格有...
使用jQuery实现动态添加和删除行（表格）的操作
使用jQuery实现动态添加和删除行实现效果代码 实现效果 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta ...
如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法）
1方法一： 使用table的insertRow()方法插入一行，使用table.removeChild(tr)删除一行，具体的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
JavaScript

87,838

社区成员

224,614

社区内容

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

加载中

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

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

+ 用AI写文章