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

最近做的项目需要实现动态新增、删除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>