js动态新增、删除table中的tr、td、input

ゝ一纸荒年。 2022-05-27 01:25 215阅读 0赞

最近做的项目需要实现动态新增、删除table中的tr、td、input，这里记录下来，以供参考

需要引入jquery.min.js,自行下载引入

1、页面主体：

<table id="tableSelect">  
                      <thead>  
                          <tr>  
                       <td style="width:150px;text-align:center;" >学生姓名</td>  
                       <td style="width:150px;text-align:center;" >学生学号</td>  
                       <td><button  id="AddMoreFileBox">新增</button></td>  
                       </tr>  
                      </thead>  
                         
                       <tbody  id="InputsWrapper">  
                       
                       </tbody>

</table>

2、js：

<script type="text/javascript">  
        $(function() \{  
var InputsWrapper  = $("\#InputsWrapper"); //Input boxes wrapper ID  
var AddButton    = $("\#AddMoreFileBox"); //Add button ID  
var FieldCount=0; //to keep track of text box added  
  
$(AddButton).click(function (e) //on add input button click  
\{  
      //add input box

$(InputsWrapper).append('<tr class="manualTr">'+

'<td><input type="text" name="studentName" id="studentName" value="" />'+

'</td>'+

'<td><input type="text" name="studentId" id="studentId" value="" />'+

'</td>'+

'<td ><button οnclick="RemoveTr(this)" class="deleteTr">删除</button></td>'+  
                               '</tr>'  
                       );  
      FieldCount++; //text box added increment  
return false;  
           \});   
    \});

function RemoveTr(\_this) \{  
    var $trNode = $(\_this).parent().parent();  
    $trNode.remove();  
\}

</script>

前端的动态新增、删除到这里已经结束，下面是对tr的循环遍历（写一个bianli函数）

<script type="text/javascript">

function bianli()\{

var trArr= $(".manualTr");//获取tr数组  
$.each(trArr,function(index,trTemp)\{  
var studentName= $(trTemp).find("\#studentName").val()  
console.log(index+":"+studentName);  
var studentId= $(trTemp).find("\#studentId").val();  
console.log(index+":"+studentId);  
\})

\}

</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 js删除指定table的td

var table = document.getElementById("tableid");//获得要操作的table对象 var row = table.r

川长思鸟来/ 2022年12月18日 04:55/ 0 赞/ 179 阅读

相关 html5 table删除修改,HTML Table 动态增加删除行 code 实例

Dynamic Table function addRow(tbodyID) \{ var bodyObj=document.getElementById(tbodyID

拼搏现实的明天。/ 2022年10月06日 07:52/ 0 赞/ 200 阅读

相关 JQuery动态给table添加、删除行

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] <html> <head> <SCRIPT la

冷不防/ 2022年10月02日 00:59/ 0 赞/ 224 阅读

相关动态添加删除table页面一行input表格

之前写过两篇关于HTML页面[添加结点][Link 1]，[删除结点][Link 2]的博文。今天偶然看到一个网友询问JSP页面上动态给表格增加行，删除行，碰

柔情只为你懂/ 2022年08月07日 14:46/ 0 赞/ 289 阅读

相关 js动态增加行删除行

//动态增加行 function addRow(tab){ var title = ""; var table = document.get

叁歲伎倆/ 2022年08月07日 05:53/ 0 赞/ 193 阅读

相关 JS之动态TABLE操作

![20170207163144155][] <html> <head> <meta http-equiv="Content-Type" conten

痛定思痛。/ 2022年07月12日 02:22/ 0 赞/ 157 阅读

相关 JS之动态TABLE操作

![20170207163144155][] <html> <head> <meta http-equiv="Content-Type" conten

￡神魔★判官ぃ/ 2022年07月12日 02:22/ 0 赞/ 187 阅读

相关 js动态新增、删除table中的tr、td、input

最近做的项目需要实现动态新增、删除table中的tr、td、input，这里记录下来，以供参考需要引入jquery.min.js,自行下载引入 1、页面主体：

ゝ一纸荒年。/ 2022年05月27日 01:25/ 0 赞/ 216 阅读

相关 js在table中添加tr，删除最后一个tr

function addTable(){ var oTab = document.getElementById('tables'); v

本是古典何须时尚/ 2022年05月13日 07:12/ 0 赞/ 395 阅读

相关在el-data-table中新增序号列的方法

在使用elementui做简单增删查改时可以使用高度封装的组件： [el-data-table][] 在columns中增加红框内所示代码即可。 ![在这里插入图片描

怼烎@/ 2021年07月26日 01:35/ 0 赞/ 341 阅读