如何动态添加列在特定位置？

Question

我想通过单击单元格然后添加一个按钮来添加列在特定位置。 问题是，当我点击第一次按钮的结果是正确的，我有我的专栏添加在我选择的位置。但是当我尝试在另一个位置添加另一个位置时，点击添加按钮后，我有两个新的列，但我想要一个......当我第三次点击时，我得到三个......并且它是这样的... n点击... n列，我无法弄清楚为什么以及如何解决这个问题... 请帮助！ 下面是代码：

$(document).ready(function() 
 
{ 
 
//my function to create my table 
 
$("#btn-create-table").click(function create_new_table(){ 
 

 
    var nb_columns = document.getElementById("columns").value; 
 
    var nb_rows = document.getElementById("rows").value; 
 

 
    var table=document.createElement("table"); 
 
    $(table).attr("element", "table"); 
 
    $(table).append(thead=document.createElement("thead")); 
 

 
    $(thead).append(line=document.createElement("tr")); 
 

 
    for (var j=0; j<nb_columns;j++) { 
 
     $(line).append(document.createElement("th")); 
 
    }; 
 

 
    $(table).append(tbody=document.createElement("tbody")); 
 

 
    for(var j=0;j<nb_rows;j++){ 
 

 
    $(tbody).append(line=document.createElement("tr")) 
 

 
     for (var k=0; k<nb_columns;k++) { 
 
      $(line).append(td=document.createElement("td")); 
 
    }; 
 
    }; 
 
    
 
    var span=document.createElement("span"); 
 
    $(span).append(input=document.createElement("input")); 
 
    $(input).attr("type","button"); 
 
    $(input).attr("name","addcolumn[]"); 
 
    $(input).attr("value","+");  
 
    $(input).addClass("addColumn"); 
 

 
$("#content").append(table); 
 
$("#content").append(span); 
 
}); 
 

 
//Add column in specific position 
 
    
 
$(document).on('click','[element="table"] td', function add_column(){ 
 

 
    num_column = $(this).index(); 
 

 
    $("span .addColumn").click(function() { 
 
    
 
    $('[element="table"]').find('tr').each(function(){ 
 
     
 
     $(this).find('th').eq(num_column).after('<th>newTH</th>'); 
 
     $(this).find('td').eq(num_column).after('<td>newTD</td>'); 
 
     
 
    }); 
 
    
 
    }); 
 
    
 
}); 
 

 

 
});

table { 
 

 
    border-collapse: collapse; 
 
    width: 100%; 
 
    height: 60px; 
 
} 
 

 
table td { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: grey; 
 
    height: 60px; 
 
    text-align: center; 
 
} 
 

 
table thead { 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: rgba(0, 0, 255, 0.2); 
 
} 
 

 
table th { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: grey; 
 
    height: 60px; 
 
    text-align: center; 
 
} 
 

 
input.addColumn { 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    background-color:#99ffff; 
 
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    width:25px; 
 
} 
 
input.addColumn:hover { 
 
    background-color:#00ffff; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div> 
 
    <label for="columns"> 
 
     <input id="columns" type="number" min="1" placeholder="columns"></input> 
 
    </label> 
 
    <br /> 
 
    <label for="rows" class=""> 
 
     <input id="rows" type="number" min="1" placeholder="rows"></input> 
 
    </label> 
 
    <br /> 
 
    <button id="btn-create-table">create</button> 
 
    
 
<div id="content" contentEditable="true"> 
 
    
 
</div>

Answer 1

尝试编辑你的代码是这样的：

$("span .addColumn").unbind().click(function() { 

我说 '解除绑定（）' 方法调用之前单击

Answer 2

当你点击[元素= “表”] TD，您可以添加 '点击' 事件侦听器。当您下次单击时，您将添加具有相同代码的另一个事件侦听器。所以，你添加了太多的监听器。

$(document).on('click','[element="table"] td', function add_column(){ 

    num_column = $(this).index(); 

    $("span .addColumn").click(function() { 

    $('[element="table"]').find('tr').each(function(){ 

    $(this).find('th').eq(num_column).after('<th>newTH</th>'); 
    $(this).find('td').eq(num_column).after('<td>newTD</td>'); 

    }); 

}); 

});