與添加新表的行與jQuery

問題我遵循添加新表的行的指令： Add table row in jQuery 與添加新表的行與jQuery

成功添加一個新行，但沒有得到其他行功能（亮點，拖動， ...）。

表：

<table id="pubTab"> 
      <thead> 
      <tr> 
       <td align="center">col1</td> 
       <td align="center">col2</td> 
       <td align="center">col3</td> 
       <td align="center">col4</td> 
      </tr> 
      </thead> 
      <tbody> 
      <tr id="1"> 
       <td>+++<input type="text" size="40"/></td> 
       <td><input type="text" size="10"/></td> 
       <td><input type="text" size="50"/></td> 
       <td><input type="text" size="10" /></td> 
      </tr> 
      <tr id="2"> 
       <td>+++<input type="text" size="40"/></td> 
       <td><input type="text" size="10"/></td> 
       <td><input type="text" size="50"/></td> 
       <td><input type="text" size="10"/></td> 
      </tr> 
      </tbody> 
     </table> 
<input id="addPubTab" type="button" value="ADD" style="background-color:green; width: 170px"/>

jQuery的腳本：

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#addPubTab").click(function(){ 
       var id = "3"; 
       var value = "<tr id=\""+id+"\">"+ 
          "<td>+++<input type=\"text\" size=\"40\" name=\"collection_name\""+id+"/></td>"+ 
          "<td><input type=\"text\" size=\"10\" name=\"service_name\""+id+"/></td>"+ 
          "<td><input type=\"text\" size=\"50\" name=\"out_fname\""+id+"/></td>"+ 
          "<td><input type=\"text\" size=\"10\" name=\"service_id\""+id+"/></td>"+ 
          "</tr>"; 
       $('#pubTab tbody').append(value); 
      }); 
     }); 
    </script>

問題問題：它補充新行，但我不能拖（上/下），因爲我拖累其他拖曳（拖曳沒有光標）。

檢查元素與解析：

<table id="pubTab"> 
<thead>_</thead> 
<tbody> 
    <tr id=」1」 style=」cursor: move; 「 class>_</tr> 
    <tr id=」2」 style=」cursor: move; 「 class>_</tr> 
    <tr id=」3」>_</tr> 
</tbody>

請注意，我使用jQuery腳本（拖動/排序）：

$(function() { $("#pubTab:not(thead)").tableDnD(); });

請協助。

來源

2011-02-24 Mike

我覺得你可能要毀掉初始拖動，然後再次重新分配它，只是後'$更新新的兒童 – Val 2011-02-24 11:31:20

（「＃pubTab TBODY」）追加（值）;'BTW :) – Val 2011-02-24 11:31:49

插入新行後嘗試重新初始化tableDnD插件。

其他解決方案將clone一個現有的行，並更改其中的數據。

來源

2011-02-24 11:33:06 MatejB

謝謝，如何重新初始化它？ – Mike 2011-02-24 11:35:42

$（「＃pubTab：not（thead）」）。tableDnD（）; – MatejB 2011-02-24 13:52:32

您的新表格行不可拖動，因爲您尚未將它們集成到拖放對象中。它們保持靜態的HTML，而你的原始行都很漂亮和互動，因爲你在它們上面調用了.tableDnD()。查看新行上的電話.tableDnD是否有效，或更新.tableDnD以使用.live()。來自.live()頁面：

描述：爲現在和將來與當前選擇器匹配的所有元素附加事件處理程序。

.live()文檔頁面正好描述了您遇到的問題，非常值得一看！

來源

2011-02-24 11:33:57

tableDnD插件有一個方法，可能已添加，因爲這個問題最初發布。

.tableDnDUpdate()

由於documentation狀態

導致表更新其行，所以拖放功能工作，如果，例如，您添加了一行。

來源

2012-05-17 07:20:14 awj

此方法不在當前的tablednd穩定版本中。 – 2013-01-13 20:59:18

$（「...」）。tableDnDUpdate（）是在2011年12月2日發佈的v0.6版本中添加的。 – meataxe 2013-07-10 21:58:29

與添加新表的行與jQuery

回答

相關問題