table案例一
实现效果:

html
<style>
#mform{ margin: 10px; }
#mtable{ border-collapse: collapse; }
#mtable thead th,#mtable thead td{ min-width: 120px; }
#mdiv{ display: none; }
</style>
姓名:<input type="text" name="name" value="">
学历:<input type="text" name="education" value="">
年龄:<input type="text" name="age" value="">
<input id="add" type="button" value="添加"><br>
<form id="mform" action="" method="post">
<table id="mtable" border="1">
<thead>
<tr>
<th>姓名</th>
<th>学历</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="mtbody">
</tbody>
</table>
<div id="mdiv"></div>
<input id="sub" type="button" value="提交"><br>
</form>
js
$(function(){
//添加tr
$('#add').click(function(){
var name = $("input[name='name']").val();
var education = $("input[name='education']").val();
var age = $("input[name='age']").val();
var html = '';
html += '<tr>';
html += '<td class="name">'+name+'</td>';
html += '<td class="education">'+education+'</td>';
html += '<td class="age">'+age+'</td>';
html += '</tr>';
$('#mtbody').append(html);
});
//提交
$('#sub').click(function(){
$('#mdiv').html('');
$.each($('#mtbody tr'),function(k){
var name = $('.name', this).text();
var education = $('.education', this).text();
var age = $('.age', this).text();
var html = '';
html += '<input type="text" name="data[' + k + '][name]" value="' + name + '">';
html += '<input type="text" name="data[' + k + '][education]" value="' + education + '">';
html += '<input type="text" name="data[' + k + '][age]" value="' + age + '"><br>';
$('#mdiv').append(html);
});
var data = $("#mform").serialize();
$.ajax({
type: "POST",
data: data,
url: "test.php",
dataType: 'json',
success: function (json) {}
});
});
});
php
<?php
echo '<pre>';
print_r($_POST);
/*
结果为:
Array(
[data] => Array(
[0] => Array(
[name] => aa
[education] => bb
[age] => cc
)
[1] => Array(
[name] => aa2
[education] => bb2
[age] => cc2
)
)
)*/
table案例一的更多相关文章
- Html table、thead、tr、th、td 标签
Html table.thead.tr.th.td 标签 案例一 <!-- table 表格标签,配置表格使用.border="1" 添加表格框架 --> <ta ...
- html table 使用总结
html中的table是一个历史相当悠久的标签,它能够很方便的实现数据的表格展示.虽然table是个很基础的标签,但是想用好还是对css相关知识有要求的. 由于table标签中自带的属性操作起来略为麻 ...
- tamper绕WAF详解
0x00 背景 sqlmap中的tamper脚本来对目标进行更高效的攻击. 由于乌云知识库少了sqlmap-tamper 收集一下,方便学习. 根据sqlmap中的tamper脚本可以学习过绕过一些技 ...
- 客户端脚本语言javascript
2015.11.27 客户端脚本语言javascript. (叫这个名字的原因.想要攀高枝,希望变得和他一样通用.关于名字之间的关系类似于雷锋和雷峰塔,巴基斯坦和卡巴斯基,苏格拉底跟格拉苏蒂的关系一 ...
- HTML自学笔记
HTML自学笔记 1.HTML Hyper Text Markup Language 超文本标记语言 超文本:比普通文本更加强大,可以添加各种样式 标记语言:通过一组标签来对内容进行描述. 标签:&l ...
- JS进阶1
一 表格案例 二 onchange事件(二级联动) 三 onmouse事件 四 事件委派 五 作用域链 一表格案例 <!DOCTYPE html> <html lang=" ...
- 使用sqlmap中tamper脚本绕过waf
使用sqlmap中tamper脚本绕过waf 刘海哥 · 2015/02/02 11:26 0x00 背景 sqlmap中的tamper脚本来对目标进行更高效的攻击. 由于乌云知识库少了sqlmap- ...
- sqlmap中tamper脚本绕过waf
0x00 背景 sqlmap中的tamper脚本来对目标进行更高效的攻击. 由于乌云知识库少了sqlmap-tamper 收集一下,方便学习. 根据sqlmap中的tamper脚本可以学习过绕过一些技 ...
- SQLmap简介以及防火墙绕过方法
简介 许多现实中对于网站的攻击往往是由于网站没有及时更新或者对于用户的输入没有进行检查.从缓冲区溢出说起,这样一种针对系统脆弱性的威胁,最根本的问题还是在于对于用户的输入没有进行检查.作为主要威胁之一 ...
随机推荐
- 从一个简单的例子谈谈package与import机制
转,原文:http://annie09.iteye.com/blog/469997 http://blog.csdn.net/gdsy/article/details/398072 这两篇我也不知道到 ...
- Vim tips——Working with external commands
A common sequence of events when editing files is to make a change and then need to test by executin ...
- Alcatel OmniSwitch 重置密码
OmniSwitch 6250重置密码 Press s to STOP AT MINIBOOT... [Miniboot]->cd "network" value = 0 = ...
- HDU 2489 Minimal Ratio Tree (dfs+Prim最小生成树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2489 Problem Description For a tree, which nodes and ...
- linux驱动之设备号与创建设备节点
设备号: 1.自己主动分配 major = register_chrdev(0,"first_drv",&first_sdv_fops);//注冊 注冊设备时给设备号写0, ...
- research plan1111
Hello prof.Choi 感谢您的来电,与您的这次通话我已经期盼了很久.我来做个自我介绍,我叫陈飞,今年27岁了,是河北地质大学计算机科学专业的本科毕业生.我非常想提高自己的学历,现在经过刘老师 ...
- c++中读写文件操作
读写文件这个,不常用,每次用的时候都会百度一下,每次写法还都不一样,所有总是记混.今天利用点时间总结下之前工程中用过的.以后就安照这种方法写了. 搞acmicpc的时候喜欢用freopen(),这个是 ...
- JPush 初始化失败,直接按照官方文档的格式写的,portal上的包名肯定不会错,mainfest里面直接指定${applicationId}
错误日志: 11-27 09:59:19.670 26124-26124/? D/dalvikvm: Late-enabling CheckJNI 11-27 09:59:20.008 26124-2 ...
- ubuntu16.04下配置静态ip
ubuntu下配置静态ip 1.先获取ip基本信息 ifconfig enp3s0 Link encap:以太网 硬件地址 2c:4d:54:65:de:6e inet 地址:192.168.199. ...
- Spark SQL 操作Hive 数据
Spark 2.0以前版本:val sparkConf = new SparkConf().setAppName("soyo") val spark = new SparkC ...