怎么在html中增加一行？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。html表格新增一行和删除一行主要思路:现在页面中写一段你想要的html代码样式,然后设置
怎么在html中增加一行？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
html表格新增一行和删除一行
主要思路:现在页面中写一段你想要的html代码样式,然后设置为隐藏不可见(style="display: none").然后在js中获取该段代码,做处理后重写回html中
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>新增一行</title></head><body> <table> <tr> <th>序号</th> <th>姓名</th> <th>电话</th> <th>地址</th> <th>操作</th> </tr> <!--这一行是隐藏的,主要用户方便js中获取html代码--> <!--##:js中会替换成数字--> <tr id="show" style="display: none"> <td>##</td> <td> <input id="name##" /> </td> <td> <input id="phone##" /> </td> <td> <input id="address##" /> </td> <td> <button type="button" onclick="deleteRow('##')">删除</button> </td> </tr></table><button type="button" onclick="addRow()">新增一行</button> <script src="Http://code.Jquery.com/jquery-1.9.1.min.js"></script><script > var index = 0;//初始下标 var indexArr= new Array(); //新增一行 function addRow() { index++; indexArr.push(index); var showHtml = $("#show").html(); var html = "<tr id='tr##'>"+showHtml+"</tr>"; html = html.replace(/##/g,index);//把##替换成数字 $("#show").before($(html)); console.log("当前下标数组",indexArr); } //删除一行 function deleteRow(inde){ $("#tr" + inde).remove(); var a = indexArr.indexOf(parseInt(inde)); if (a > -1) { indexArr.splice(a, 1); console.log("当前下标数组",indexArr); } }</script></body></html>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网精选频道，感谢您对编程网的支持。
--结束END--
本文标题: 怎么在html中增加一行
本文链接: https://www.lsjlt.com/news/279069.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0