Wie bekomme ich HTML-Tabellendaten zu einem Array?

Question

Ich benutze PHP Codeigniter.Ich habe keine guten Kenntnisse in JavaScript. Mein Problem ist, dass ich eine Tabelle mit editierbaren Spalten habe und wenn ich auf die Schaltfläche "Senden" klicke, möchte ich die Tabellendaten mit der POST-Methode an die Codeigniter-Funktion senden.

HTML-Code

<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 für editierbare Tabelle

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

So in den Daten editierbare Tabelle I auf meine codeigniter Funktion schieben wollen.

Answer 1

der beste Weg ist jetzt Ajax zu verwenden, um diejenigen JavaScript-Wert an die Codeigniter Funktion

Beispiel auf einer einfachen Ajax-Aufruf zu schreiben:

var newName = 'John Smith';

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

überprüfen Sie bitte die source für weitere Informationen, wie in Einzelheiten mit Javascript Ajax zu verwenden.

Answer 2

Da Ihre Frage Vanille Javascript enthält, wird meine Antwort XMLHttpRequest() verwenden. Ich habe die folgende Funktion erstellt, um Postdaten an das Backend zu senden.

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

In Ihrer save_row() Funktion erstellen Parameter an das hintere Ende zu senden, wie 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); 
} 

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

in Ihrem Controller

public function function_name()

{

$ post = $ this> Input-> post();

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


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

}

In Ihrem Modell

public function function_name ($ data) {

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

}