JQuery动态添加/删除列/行

JQuery add/remove column/row dynamically

本文关键字：删除列 添加 动态 JQuery      更新时间：2023-09-26

我试图删除我动态创建的列。删除列的链接仅对第一列有效。当我按下第二列上的链接时，什么也没有发生，但应该显示一条消息。

怎么了?

代码:

$(document).ready(function(){
  function deleteCol(currentNode){$(currentNode).remove();}
  function deleteRow(currentNode){$(currentNode).parent().parent().remove();}  
  $('.AddColBtn').click(function(){
      var colLength = $('tr.header th.col').length+1;
      var rowLength = $('.row').length;
      var vAddColc = $('.col').clone().html();
      var vAddColr = vAddColc.replace("Col 1","Col "+colLength);
      var vAddCol = '<th class="col">'+vAddColr+'</input></th>';
      var vAddCell = '<td class="href" onclick="document.location.href="#11">Cell '+colLength+'</td>';
      $('.ColAdd').before(vAddCol);
      $('.RowDel').before(vAddCell);
    });
  $('.AddNewRow').click(function(){
        var clonedRow = $('.row').clone().html();
        var rowLength = $('.row').length+1;
        var n = clonedRow.replace("Row 1","Row "+rowLength);
        var appendRow = '<tr class = "row">' + n + '</tr>';  
        $('#myPureTable tr:last').after(appendRow);
    });
 $("a.delCol").click(function(event) {
   event.preventDefault();
   var colCnt = $('tr.header th.col').length;
   alert(colCnt);
   //var current_cell = $(this).closest("td");
   //var nb_columns = current_cell.closest('table').find('tr:eq(1) td').length+1;
   //var column_to_delete = current_cell.prevAll("td").length+1;
    //if (colCnt>1){deleteCol('table tr td:nth-child('+(nb_columns+'n-'+(nb_columns-column_to_delete))+')');}
   //$('table tr td:nth-child('+(nb_columns+'n-'+(nb_columns-column_to_delete))+')').remove();
  });   
 $('.RowDelete').live('click',function(){
      var rowLength = $('.row').length;
      if(rowLength > 1){deleteRow(this);}
      else{$('.employmentHistoryForm tr:last').after(appendRow);
            deleteRow(this);}
 });
});

小提琴

这是因为您没有考虑到您没有绑定到动态创建的元素这一事实。

改变
 $("a.delCol").click(function(event) {


 $(document).on('click', "a.delCol", function(event) {
相关文章：