How to save HTML dynamic table into database

Question

My problem is I am creating dynamic HTML table by using javascript .

How do I save this dynamic HTML table into a DataBase using CodeIginter?

This my input text code:

<table  id="tb3" name="tb3">
    <tr>
        <td>Product Code</td>
        <td>Product Name</td>
        <td>Qty</td>
        <td>Rate</td>
        <td>Amount</td>
    </tr>

    <tr>        
        <td>
            <input  type="text" onkeyup="autofill()" id="Product_Code" name="Prdtcode" class="form-control input-xs Product_Code "     required>
        </td>

        <td ><input type="text" id="Product_Name" name="Prdtname" class="form-control input-xs"></td>

        <td><input  type="text" 
            onkeypress="javascript:doit_onkeypress(event)"  id="Qty" onkeyup="movetoNext(this, 'addMore3')" name="Qty"class="form-control input-xs"    required>
        </td>

        <td><input  type="text" id="Rate"  class="form-control input-xs"name="Rate" value="" ></td>

        <td><input type="text" id="Value" name="Value" class="form-control input-xs"  ></td>

    </tr>
</table>

This code gets data from a TextBox and displays in table format using javascript :

<table  class="table table-bordered table-striped table-xxs" id="tb2" name="tb2">
    <tr>
        <th>Product Code</th>
        <th>Product Name</th>
        <th>Qty</th>
        <th>Rate</th>
        <th>Amount</th>
    </tr>

This is the javascript code to create table

function doit_onkeypress(event)
{
    if (event.keyCode == 13 || event.which == 13){
        if(!checkEmptyInput()){
            var newRow = table.insertRow(table.length),
            cell1 = newRow.insertCell(0),
            cell2 = newRow.insertCell(1),
            cell3 = newRow.insertCell(2),
            cell4 = newRow.insertCell(3),
            cell5 = newRow.insertCell(4),
            code = document.getElementById("Product_Code").value,
            name = document.getElementById("Product_Name").value,
            qty = document.getElementById("Qty").value,
            rate = document.getElementById("Rate").value,
            amt = document.getElementById("Value").value;

            cell1.innerHTML = code;
            cell2.innerHTML = name;
            cell3.innerHTML = qty;
            cell4.innerHTML = rate;
            cell5.innerHTML = amt;

            var prdtcode = $("#Product_Code").val("");
            var Prdtname = $("#Product_Name").val("");
            var qty = $("#Qty").val("");
            var Rate = $("#Rate").val("");
            var amt = $("#Value").val("");
        }
    }
}

My problem is I am creating a dynamic HTML table by using javascript ,how I save this dynamic html table into database using codeiginter.

Answer 1

Store whole table html data into one variable

var table_data = $("#table_id").html();
$.trim(table_data. replace(/>[\n\t ]+</g, "><"));

Now Send this table_data variable to controller function to add data Make sure the datatype of your field should be text or longtext then normally do the insertdata query in controller's function.

The ajax code is as below:

$.ajax({
url:"path to your controller function",
type: 'POST',
data:{
    table_data:table_data,
},
success:function(result){
   console.log(result);
},
});

The controller's function code is as below:

function insert_table_data(){
    $data = array('table_data' => $this->input->post('table_data'));
    $this->db->insert('table_name', $data);
}