Javascript 如何在Codeigniter中使用jQueryAjax在一行中添加新的动态行？

我在一行表中列出了数据，并添加了详细操作链接

当我点击一行的详细信息链接时，我会得到另一个特定点击行的数据列表

所以现在我想在另一个表中添加另一行，该表的行数据列表位于单击的行下面

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

功能项目列表（id）
{
var row_ID='row'+ID；
$.ajax({
url:“管理面板/项目列表”，
键入：“post”，
数据：“id=”+id
}).完成（功能（数据）{
警报（数据）；
$（“#”+行ID）.在（数据）之后；
});
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;
        }   
    }

功能项目清单（）
{
$id=$_POST['id']；
$project\u list=$this->admin\u model->project\u list（$id）；
if（is_数组（$project_list））{
$i=1；
$table.='SNProject Name'；
foreach（$project\u列表为$row）
{
$table.=“$i$行->项目名称”；
$i++；
}
$table.=''；
echo$表；
}   
}

在单击特定的单击行后，新行被成功添加，但问题是表，它的标题部分不显示，甚至div也不显示

现在我得到了这个输出：

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

1ppp

但产出将是：

    <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>

项目名称
1马力

您忘记在

之后添加

在PHP代码中，也将colspan应用于

，而不是

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

$table.='SNProject Name'；
foreach（$project\u列表为$row）
{
$table.=“$i$行->项目名称”；
$i++；
}
$table.=''；

要在每次单击

而不是追加时替换内容，您可以为dynamic

提供一个自定义类，然后单击只需检查带有特定类的

是否存在。如果是，请删除该内容并添加新内容

使用JSFIDLE：在中使用静态数据 JS

您忘记在

之后添加

在PHP代码中，也将colspan应用于

，而不是

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

$table.='SNProject Name'；
foreach（$project\u列表为$row）
{
$table.=“$i$行->项目名称”；
$i++；
}
$table.=''；

要在每次单击

而不是追加时替换内容，您可以为dynamic

提供一个自定义类，然后单击只需检查带有特定类的

是否存在。如果是，请删除该内容并添加新内容

使用JSFIDLE：在中使用静态数据 JS

---

尝试在TR中添加输出

，而不是在

TR之后添加

。我想在TRafter初始化$I=1之后添加；在您的函数中删除“.”以首次在$table中追加数据。。。！我做了，但没发生什么新情况哦，你为什么不使用表标签就直接使用？！有意义吗？尝试在

TR中添加输出

，而不是在

TR之后添加

。我想在TRafter初始化$I=1之后添加；在您的函数中删除“.”以首次在$table中追加数据。。。！我做了，但没发生什么新情况哦，你为什么不使用表标签就直接使用？！这有意义吗？你的答案是正确的，它是有效的，但我有另一个问题，当我单击任何一行时，它会添加另一个表，但当我再次单击该行时，它会显示两次表的相同数据，它会添加越来越多的表，直到我单击该行。但我想，当我单击“添加的行表”并再次单击该行表时，我会用新表覆盖该行表。您的答案是正确的，它可以工作，但我还有一个问题，当我单击任何行时，它会添加另一个表，但当我再次单击该行时，它会显示两次相同的数据，并添加越来越多的表，直到我单击该行为止。但当我单击“添加的行表”并再次单击“用新表覆盖该行表”时，我需要。