從HTML表格到mysql數據庫

我有一個包含信息的表格。我可以使用Javascript添加/刪除 HTML表格的行。我應該如何將表中的信息放入sql數據庫？我一直在搜索是否可以使用JavaScript函數addRow（tableID）從表中插入數據，但我認爲我不能這樣做。請給我一些關於如何解決問題的建議。從HTML表格到mysql數據庫

這裏是我的代碼：

<HTML> 
<HEAD> 
<TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
<SCRIPT language="javascript"> 
    function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.type = "checkbox"; 
     element1.name="chkbox[]"; 
     cell1.appendChild(element1); 

     var cell2 = row.insertCell(1); 
     cell2.innerHTML = rowCount; 

     var cell3 = row.insertCell(2); 
     cell3.innerHTML = rowCount; 

     var cell4 = row.insertCell(3); 
     cell4.innerHTML = rowCount; 

     var cell5 = row.insertCell(4); 
     cell5.innerHTML = rowCount; 

     var cell6 = row.insertCell(5); 
     cell6.innerHTML = rowCount; 
    } 

    function deleteRow(tableID) { 
     try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=1; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 
     } 
     // Unchecking the header checkbox. 
     var row = table.rows[0]; 
     var chkbox = row.cells[0].childNodes[0]; 
     chkbox.checked = false; 

     }catch(e) { 
      alert(e); 
     } 
    } 

    function checkAll(source) { 
     var checkboxes = new Array(); 
     checkboxes = document.getElementsByTagName('input'); 

     for (var i = 0; i < checkboxes.length; i++) { 
      checkboxes[i].checked = source.checked; 
     } 
    } 

</SCRIPT> 
</HEAD> 
<BODY> 

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 

<TABLE id="dataTable" border="1"> 
<tr> 
<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]"/></th> 
<th>Make</th> 
<th>Model</th> 
<th>Description</th> 
<th>Start Year</th> 
<th>End Year</th> 
</tr> 
</TABLE>

來源

2013-10-10 EM10

你將不得不使用Ajax來做到這一點。準備好關於[jQuery]（http://jquery.com/）和[jQuery Ajax]（http://api.jquery.com/category/ajax/）的更多信息。 – Nunners

使用javascript，html和php無法做到這一點嗎？ – EM10

jQuery是一個Javascript庫，如果您使用'Script src'將它添加到您的頁面中，您可以使用它。我不太瞭解PHP知道這是否可能，但我懷疑它會是什麼。 Ajax爲您提供對服務器的異步或同步調用。 – Nunners

這裏是如何使用jQuery Ajax，使服務器的呼叫：

你addRow功能將成爲：

function addRow(tableID) { 
    var table = document.getElementById(tableID); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    var cell1 = row.insertCell(0); 
    var element1 = document.createElement("input"); 
    element1.type = "checkbox"; 
    element1.name="chkbox[]"; 
    cell1.appendChild(element1); 

    var cell2 = row.insertCell(1); 
    cell2.innerHTML = rowCount; 

    var cell3 = row.insertCell(2); 
    cell3.innerHTML = rowCount; 

    var cell4 = row.insertCell(3); 
    cell4.innerHTML = rowCount; 

    var cell5 = row.insertCell(4); 
    cell5.innerHTML = rowCount; 

    var cell6 = row.insertCell(5); 
    cell6.innerHTML = rowCount; 

    //This passes the first 3 rows values to the insert.php page, in which you will need to retrieve the values and insert them to the Database using PHP 
    $.post('insert.php', { 
     cell1:rowCount, 
     cell2:rowCount, 
     cell3:rowCount 
    }); 

}

正如在評論中提到的，代碼wi將前3行信息發佈到insert.php中，這將需要處理傳遞的信息並使用PHP腳本將記錄插入到數據庫中。

來源

2013-10-10 14:44:19 Nunners

您可以使用此功能

function loadXMLDoc(cell1,cell2,cell3 ...) { // Your parametters 
    var xmlhttp; 

    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("myDiv").innerHTML = xmlhttp.responseText; 
    //         Answer of ProcessingPage.php^
     } 
    } 

    xmlhttp.open("GET", "ProcessingPage.php?cell1="+cell1+"&cell2..." , true); 
    //    ^POST OR GET method   Add other param^
    xmlhttp.send(); 
}

ProcessingPage.php

<?php 
    $cell1 = $_GET['cell1']; 
    $cell1 = $_GET['cell2']; 
    //... 
?>

來源

2013-10-10 14:46:55

從HTML表格到mysql數據庫

回答

相關問題