Question

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

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>

<property name="hibernate.connection.url">jdbc:mysql://localhost:3306/your_db</property>

Answer 1

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

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

我在点击

之前添加了' unbind（）'方法调用

Answer 2

当您点击[element =＆＃34; table＆＃34;] td时，您可以点击＆＃39;点击＆＃39;事件监听器。当您下次单击时，添加具有相同代码的另一个事件侦听器。所以，你添加了太多的听众。

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

   });

 });

});

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

2 个答案: