如何將HTML動態表保存到數據庫中

Question

我的問題是我正在使用javascript創建動態HTML表。

如何使用CodeIginter將動態HTML表保存到數據庫中？

這是我輸入的文本代碼：

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

此代碼從TextBox獲取數據，並使用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>

這是創建表的javascript代碼

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

我的問題是我正在使用javascript創建動態HTML表，如何使用codeiginter將這個動態html表保存到數據庫中。

Answer 1

將整個表格的html數據存儲到一個變量中

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

現在，將此table_data變量發送到控制器函數以添加數據確保您字段的數據類型為text或longtext，然后通常在控制器函數中執行insertdata查詢。

Ajax代碼如下：

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

控制器的功能代碼如下：

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