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

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
...全文
165 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()删除
  • 打赏
  • 举报
回复
亲,打开JQ api -> 文档处理分组里面函数可以解决你的问题

87,954

社区成员

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

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