<!doctype html>
<body>
<div id= "Table-div" >
<table id= "table-batabase" >
<tr><th> number </th><th> name </th><th> Age </th><th> Gender </th><th > Hobbies </th></tr>
<tr><td>1</td><td> xiaoming </td><td>20</td><td> Male </td><td> Basketball </td></tr>
<tr><td>2</td><td> Piglets </td><td>1</td><td> Women </td><td> Swimming </td></tr>
<tr><td>3</td><td> Puppies </td><td>3</td><td> Women </td><td> Dining </td></tr>
</table>
</div>
<div id= "Dongzuo" >
<form id= "myform" action= "test.php" method= "POST" >
<input id= "jsontext" name= "Jsontext" type= "text" value= ""/>
</form>
<button id= "Save-cookie" > Staging </button><button id= "save" > Submit </button>
</div>
<script type= "Text/javascript" >
var cookie = document.getElementById (' Save-cookie ');
var save = document.getElementById (' save ');
var table = document.getElementById (' table-batabase ');
var MyForm = document.getElementById (' MyForm ');
Cookie.onclick = function () {
Alert (' You clicked the Staging function ');
}
Save.onclick = function () {
alert (table.rows.length);
var tr;
var dataarray = new Array ();
For (Var i=1;i<table. Rows. length;i++) {
Date = new Object ();
TR = table.rows[i];
Date. Code = tr.childNodes[0].innerhtml;
Date. Name = tr.childNodes[1].innerhtml;
Date. Age = tr.childNodes[2].innerhtml;
Date. Sex = tr.childNodes[3].innerhtml;
Date. like = tr.childNodes[4].innerhtml;
Assemble Table object conversions into JSON in arrays
Dataarray.push (json.stringify (date));
}
//Assemble the number into JSON and put it in the array
document.getElementById (' Jsontext '). Value = dataarray.tostring ();
MyForm. Submit ();
}
</script>
</body>
Idea: Take the value out of the table, put it in JSON, assign to an input, through a input to implement table table data submitted to the server, you can avoid the page has too many input boxes.
Key points:
1. Rows/childnodes gets all the child nodes under an element;
2. Json.stringify (?) to convert the object to JSON data;
3. Dataarray.tostring () converts the array to JSON.
This article is from the "Shows Technology" blog, be sure to keep this source http://wangzhijun.blog.51cto.com/9660708/1640407
Table tables submit data (without the corresponding input version)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
