如何将html表数据获取到数组？答案

【问题标题】：how to get html table data to an Array?如何将html表数据获取到数组？
【发布时间】：2018-06-05 06:56:01
【问题描述】：

我正在使用 PHP Codeigniter。我对 JavaScript 没有很好的了解。我的问题是我有一个带有可编辑列的表，当我单击提交按钮时，我想使用 POST 方法将表数据发送到 Codeigniter 函数。

HTML 代码

<div class="col-md-12 top-20 padding-0">
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading"><h3>Data Tables</h3></div>
            <div class="panel-body">
                <div class="responsive-table">
                    <table id="data_table" class="table table-striped table-bordered" width="100%" cellspacing="0">
                        <tr>
                            <th>Name</th>
                            <th>Country</th>
                            <th>Age</th>
                            <th>Action</th>
                        </tr>
                        <tr>
                            <td><input type="text" id="new_name"></td>
                            <td><input type="text" id="new_country"></td>
                            <td><input type="text" id="new_age"></td>
                            <td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
                        </tr>

                    </table>
                    <input type="button" name="check" onclick="clik();">
                </div>
            </div>
        </div>
    </div>
</div>

可编辑表格的 JavaScript

function edit_row(no)
    {
        document.getElementById("edit_button"+no).style.display="none";
        document.getElementById("save_button"+no).style.display="block";

        var name=document.getElementById("name_row"+no);
        var country=document.getElementById("country_row"+no);
        var age=document.getElementById("age_row"+no);

        var name_data=name.innerHTML;
        var country_data=country.innerHTML;
        var age_data=age.innerHTML;

        name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
        country.innerHTML="<input type='text' id='country_text"+no+"' value='"+country_data+"'>";
        age.innerHTML="<input type='text' id='age_text"+no+"' value='"+age_data+"'>";
    }

    function save_row(no)
    {
        var name_val=document.getElementById("name_text"+no).value;
        var country_val=document.getElementById("country_text"+no).value;
        var age_val=document.getElementById("age_text"+no).value;

        document.getElementById("name_row"+no).innerHTML=name_val;
        document.getElementById("country_row"+no).innerHTML=country_val;
        document.getElementById("age_row"+no).innerHTML=age_val;

        document.getElementById("edit_button"+no).style.display="block";
        document.getElementById("save_button"+no).style.display="none";
    }

    function delete_row(no)
    {
        document.getElementById("row"+no+"").outerHTML="";
    }

    function add_row()
    {
        var new_name=document.getElementById("new_name").value;
        var new_country=document.getElementById("new_country").value;
        var new_age=document.getElementById("new_age").value;

        var table=document.getElementById("data_table");
        var table_len=(table.rows.length)-1;
        var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='country_row"+table_len+"'>"+new_country+"</td><td id='age_row"+table_len+"'>"+new_age+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";

        document.getElementById("new_name").value="";
        document.getElementById("new_country").value="";
        document.getElementById("new_age").value="";
    }

所以在给定的可编辑表数据中，我想推送到我的 codeigniter 函数。

【问题讨论】：

标签： javascript php html ajax codeigniter

【解决方案1】：

现在最好的方法是使用 Ajax 将这些 javascript 值发布到 Codeigniter 函数

一个简单的 ajax 调用示例：

var newName = '约翰·史密斯';

$.ajax('myservice/codigniter_Function?' + $.param({id: 'some-unique-id'}), {
    method: 'POST',
    data: {
        name: newName
    }
})
.then(
    function success(name) {
        if (name !== newName) {
            alert('Something went wrong.  Name is now ' + name);
        }
    },

    function fail(data, status) {
        alert('Request failed.  Returned status of ' + status);
    }
);

请查看source 了解更多关于如何使用 ajax 和 javascript 的详细信息。

【讨论】：

【解决方案2】：

由于您的问题包含原版 Javascript，因此我的回答将使用 XMLHttpRequest()。我创建了以下函数来将帖子数据发送到后端。

function ajax_req(url, params) {
    var http = new XMLHttpRequest();
    http.open("POST", url, true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    http.send(params);
}

在您的save_row() 函数中，创建要发送到后端的参数，例如name=billy&age=21&country=us

function save_row(no) {
    var name_val = document.getElementById("name_text" + no).value;
    var country_val = document.getElementById("country_text" + no).value;
    var age_val = document.getElementById("age_text" + no).value;

    document.getElementById("name_row" + no).innerHTML = name_val;
    document.getElementById("country_row" + no).innerHTML = country_val;
    document.getElementById("age_row" + no).innerHTML = age_val;

    document.getElementById("edit_button" + no).style.display = "block";
    document.getElementById("save_button" + no).style.display = "none";

    // send values to back end 
    var params = "name=" + name_val + "&country=" + country_val + "&age=" + age_val;
    ajax_req('/savedata', params);
}

【讨论】：

【解决方案3】：

<form action="<php echo base_url('controller_name/ method_name')?> method="POST">

<div class="col-md-12 top-20 padding-0">

<div class="col-md-12">
    <div class="panel">
        <div class="panel-heading"><h3>Data Tables</h3></div>
        <div class="panel-body">
            <div class="responsive-table">
                <table id="data_table" class="table table-striped table-bordered" width="100%" cellspacing="0">
                    <tr>
                        <th>Name</th>
                        <th>Country</th>
                        <th>Age</th>
                        <th>Action</th>
                    </tr>
                    <tr>
                        <td><input type="text" id="new_name" name="newname"></td>
                        <td><input type="text" id="new_country" name="country"></td>
                        <td><input type="text" id="new_age" name="age"></td>
                    </tr>

                </table>
                <input type="submit" name="check" class="btn btn-primary">
            </div>
        </div>
    </div>
</div>

在你的控制器中

公共函数function_name()

{

$post = $this>输入->post();

$data = array(
'name' =>$post['newname'],
'country' =>$post['country'],
'age' =>$post['age'],
);


$this->load->model('model_name');
$this->model_name->function_name($data);

}

在你的模型中

公共函数function_name($data) {

return $this->db->insert('table_name', $data);

}

【讨论】：