如何在html表中选择所有数据并使用ajax将其发送到我的数据库

时间:2014-04-12 01:04:34

标签: javascript php mysql ajax

我需要帮助,我想使用javascript从html表中选择所有数据,然后使用php将其发送到我的数据库,使用带有ajax表单的代码,使得html表存储数据,我希望从中获取数据表将它们发送到我的数据库

<html>
<head>
<title>Order</title>
<script type="text/javascript">


function updateForm() {

var tablename = document.getElementById("tablen").value;
 document.getElementById("demo").innerHTML=tablename;


    var fieldname = document.getElementById("fieldn").value;

    var fieldtype = document.getElementById("fieldt").value;


    var table=document.getElementById("results");
    var row=table.insertRow(-1);

    var cell1=row.insertCell(0);
    var cell2=row.insertCell(1);


    cell1.innerHTML=fieldname;
    cell2.innerHTML=fieldtype;        


   }
</script>
</head>
<body>
<form name="order" method="post" id="frm1">
<table>
    <tr>
        <td>
            <label for="tablename">Table Name </label>
        </td>
        <td>
            <input id="tablen" name="tablename" title="Please enter only alphabetic characters" type="text" size="28" />
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <label for="fieldname">Field Name</label>
        </td>
        <td>
            <input id="fieldn" name="fieldname" title="Enter item quantity" width="196px" />
        </td>
    </tr>
    <tr>
        <td>
           <label for="fieldtype">Field Type</label>

        </td>
        <td>
            <select name="fieldtype" id="fieldt" required="required">

            <option value="">Select</option>
            <option value="int(11) NOT NULL AUTO_INCREMENT">int(11)</option>
            <option value="decimal NOT NULL">decimal</option>
            <option value="varchar(50) NOT NULL">varchar(50)</option>
            <option value="text NOT NULL">text</option>
            <option value="char NOT NULL">char</option>
            <option value="longtext NOT NULL">longtext</option>
            <option value="year NOT NULL">year</option>
            <option value="date NOT NULL">date</option>
            <option value="time NOT NULL">time</option>
            <option value="binary NOT NULL">binary</option>
            <option value="float NOT NULL">float</option>
   </select>
        </td>

    </tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add To Table</button>
</form>
<br>



 <form  method="post">

<table id="results" border="2" width="360">
<thead>
<tr>
    <th scope="col" width="120">Table Name</th>
     <th scope="col" width="120">
<p id="demo"></p>
</th>
</tr>
<tr>

    <th scope="col" width="120" id="fieldname1">Field Name</th>
    <th scope="col" width="120" id="fieldtype1">Field Type</th>

</tr>
</thead>
</table>
<button type="button" id="btn"/>Add To DB</button>
</form>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我担心您需要提供更多详细信息以获得准确的回复,显然您要求

  

“使用javascript”

从html表中选择所有数据

会让我相信你想把实际的html保存到mySQL吗?

您的问题可能需要针对您的表格进行特定编码,或者针对更一般的方法......这取决于您的确切需求。

作为一般概念,你可以浏览每个TR并为每个TR做一个ajax请求......

$("#yourtableselector tr").each(function() {
var postData = {};
//use $(this).find or similar to get the data you need for each td and add it to the postData variable
$.ajax({ post the data here to a php file of your chosing, that adds the "data" in the database });
});