How to add a new dynamic row within a row using jquery Ajax in Codeigniter?

Question

I have list of data in a row of tables and added a details action link.

When I click on details link of a row than get another list of data for particular clicked row.

So now I want to add another row with another table with list of rows data below clicked row.

Jquery code:

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

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

Codeigniter Code:

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

New Row is Successfully added after click on particular clicked row But issue is table and it's header part is not showing and even div not showing.

Right Now i got this output:

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

But Output will be:

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

after initializing $i = 1; in your function Remove " . " to append data in $table for the first time...! — Kunal
Oh why are you using <tr> directly without using table tag?!Does it make sense? — Kunal

Alok Patel Alok Patel · Accepted Answer · 2016-04-21T13:13:57

You forgot to add <td> after <tr>.

Also Apply colspan on <td> instead of <tr> in PHP code.

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

To replace the content every time you click on <tr> instead of appending, you can give a custom class to dynamic <tr> and on click just check if <tr> with specific class is exists or not. If yes remove that and add add new content.

Working jsFiddle: https://jsfiddle.net/go03oj39/1/ with static data in JS.

How to add a new dynamic row within a row using jquery Ajax in Codeigniter?

1 Answers