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 onclick="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>