如何在Codegniter中使用jQuery Ajax添加一個新的動態行？

我有一列表中的數據列表並添加了詳細信息操作鏈接。如何在Codegniter中使用jQuery Ajax添加一個新的動態行？

當我點擊一個行的詳細信息鏈接比獲取特定點擊行的另一個數據列表。

所以，現在我想添加另一個表與行數據點擊行下方的另一個表。

jQuery代碼：

function project_list(id) 
{ 
    var row_ID = 'row'+id; 
    $.ajax({ 
     url : '<?=$this->config->base_url()?>admin_panel/project_list', 
     type : 'post', 
     data : 'id='+id 
    }).done(function (data){ 
     alert(data); 
     $('#'+row_ID).after(data); 
    }); 
    console.log(row_ID); 
}

HTML代碼：

<?php 
foreach ($data as $item) {?> 
<a href="#" onClick="project_list('<?=$item->ID;?>')">Projects</a> 
      </td> 
      </tr> 
<?php } ?>

笨代碼：

function project_list() 
    { 
     $id = $_POST['id']; 
     $project_list = $this->admin_model->project_list($id); 
     if(is_array($project_list)){ 
      $i=1; 
      $table .= '<tr colspan=7><div><table><thead><tr><th>SN</th><th>Project Name</th></tr></thead><tbody>'; 
      foreach($project_list as $row) 
      { 
       $table .="<tr><td>$i</td><td>$row->project_name</tr>"; 
       $i++; 
      } 
      $table .='</tbody></table></div></tr>'; 
      echo $table; 
     } 
    }

新行點擊特定的點擊的行，但發行後成功添加爲表它的標題部分沒有顯示，甚至沒有顯示div。

現在我得到這個輸出：

<tr><td>1</td><td>PHP</td></tr>

但輸出將是：

<tr colspan=2> 
<div> 
<table> 
<thead><tr> 
<th>SN</th><th>Project Name</th></tr> 
</thead> 
<tbody> 
    <tr><td>1</td><td>PHP</td></tr> 
</tbody></table></div></tr>

來源

2016-04-21 Manish Tiwari

嘗試在TR之後添加輸出'TR'而不是'TR'。 –

我想在初始化$ i = 1後在TR –

後添加;在你的函數中刪除「。」在第一次追加$表中的數據......！ – Kunal

你忘<tr>後添加<td>。

同時在PHP代碼中應用colspan代替<td>而不是<tr>。

$table .= '<tr class="dynamicAddedTr"><td colspan=2><div><table><thead><tr><th>SN</th><th>Project Name</th></tr></thead><tbody>'; 
      foreach($project_list as $row) 
      { 
       $table .="<tr><td>$i</td><td>$row->project_name</tr>"; 
       $i++; 
      } 
      $table .='</tbody></table></div></td></tr>';

要你點擊<tr>，而不是追加每次更換的內容，你可以給一個自定義類來動態<tr>和點擊只是檢查是否<tr>具體類的存在與否。如果是，刪除並添加新內容。

工作jsFiddle：https://jsfiddle.net/go03oj39/1/與靜態數據在 JS。

來源

2016-04-21 13:13:57

你的答案是正確的，但它的工作原理，但我有另一個問題，當我點擊任何行它增加了另一個表，但是當我再次點擊該行，然後顯示相同的數據與兩次表，它會添加更多的表，直到我點擊行。但我想當我點擊行表添加，並再次點擊該行表覆蓋與新表。 –

檢查我更新的答案和更新的jsFiddle鏈接。 –

如何在Codegniter中使用jQuery Ajax添加一個新的動態行？

回答

相關問題