如何動態添加列在特定位置？

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>'); 

    }); 

}); 

});