实现效果:

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="">&nbsp;&nbsp;
学历:<input type="text" name="education" value="">&nbsp;&nbsp;
年龄:<input type="text" name="age" value="">&nbsp;&nbsp;
<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案例一的更多相关文章

  1. Html table、thead、tr、th、td 标签

    Html table.thead.tr.th.td 标签 案例一 <!-- table 表格标签,配置表格使用.border="1" 添加表格框架 --> <ta ...

  2. html table 使用总结

    html中的table是一个历史相当悠久的标签,它能够很方便的实现数据的表格展示.虽然table是个很基础的标签,但是想用好还是对css相关知识有要求的. 由于table标签中自带的属性操作起来略为麻 ...

  3. tamper绕WAF详解

    0x00 背景 sqlmap中的tamper脚本来对目标进行更高效的攻击. 由于乌云知识库少了sqlmap-tamper 收集一下,方便学习. 根据sqlmap中的tamper脚本可以学习过绕过一些技 ...

  4. 客户端脚本语言javascript

    2015.11.27  客户端脚本语言javascript. (叫这个名字的原因.想要攀高枝,希望变得和他一样通用.关于名字之间的关系类似于雷锋和雷峰塔,巴基斯坦和卡巴斯基,苏格拉底跟格拉苏蒂的关系一 ...

  5. HTML自学笔记

    HTML自学笔记 1.HTML Hyper Text Markup Language 超文本标记语言 超文本:比普通文本更加强大,可以添加各种样式 标记语言:通过一组标签来对内容进行描述. 标签:&l ...

  6. JS进阶1

    一 表格案例 二 onchange事件(二级联动) 三 onmouse事件 四 事件委派 五  作用域链 一表格案例 <!DOCTYPE html> <html lang=" ...

  7. 使用sqlmap中tamper脚本绕过waf

    使用sqlmap中tamper脚本绕过waf 刘海哥 · 2015/02/02 11:26 0x00 背景 sqlmap中的tamper脚本来对目标进行更高效的攻击. 由于乌云知识库少了sqlmap- ...

  8. sqlmap中tamper脚本绕过waf

    0x00 背景 sqlmap中的tamper脚本来对目标进行更高效的攻击. 由于乌云知识库少了sqlmap-tamper 收集一下,方便学习. 根据sqlmap中的tamper脚本可以学习过绕过一些技 ...

  9. SQLmap简介以及防火墙绕过方法

    简介 许多现实中对于网站的攻击往往是由于网站没有及时更新或者对于用户的输入没有进行检查.从缓冲区溢出说起,这样一种针对系统脆弱性的威胁,最根本的问题还是在于对于用户的输入没有进行检查.作为主要威胁之一 ...

随机推荐

  1. Swift具体解释之六----------------枚举、结构体、类

    枚举.结构体.类 注:本文为作者自己总结.过于基础的就不再赘述 ,都是亲自測试的结果.如有错误或者遗漏的地方.欢迎指正,一起学习. 1.枚举 枚举是用来定义一组通用类型的一组相关值 ,关键字enum ...

  2. 【转】java中Thread类方法介绍

    原文: java中Thread类方法介绍 http://blog.csdn.net/seapeak007/article/details/53395609 这篇文章找时间分析一下!!!:http:// ...

  3. 重学数据结构系列之——平衡树之SB Tree(Size Blanced Tree)

    学习来源:计蒜客 平衡树 1.定义 对于每一个结点.左右两个子树的高度差的绝对值不超过1,或者叫深度差不超过1 为什么会出现这样一种树呢? 假如我们依照1-n的顺序插入到二叉排序树中,那么二叉排序树就 ...

  4. configure: error: mysql configure failed. Please check config.log for more information.

    为php添加mysql模块时报错 configure: error: mysql configure failed. Please check config.log for more informat ...

  5. CentOS7安装MariaDB成功的实践

    前言 在自己的VPS的CentOS7安装Oracle的Mysql失败以后,我又开始找CentOS7上面安装MariaDB的方法,于是我找打了这篇文章:http://blog.csdn.net/defa ...

  6. jQuery--编辑表格

    表格操作是我们常常遇到的,还记得刚開始学习牛腩新闻公布系统时.跟着视频进行表格的一些基本操作.而对它的原理与概念全然不懂,不过跟着老师的操作而进行操作. 通过这次学习,对表格的操作有了进一步的了解与掌 ...

  7. ssh整合步骤整理

    PackageUtil.createPackages(PackageUtil.changePath(System.getProperty("user.dir")));

  8. Linux VPS上安装KDE, Gnome和VNC

  9. JAVA、C、C++、Python同样是高级语言,为什么只有C和C++可以编写单片机程序?

    JAVA.C.C++.Python这四种编程语言,前三种玩的比较多,python做为兴趣爱好或者玩脚本的时候弄过,编程语言在使用的时候主要还是适合不合适,单片机使用的场景属于功能简单,成本相对较低,现 ...

  10. .net 必看书籍2

    一.入门 1.<HTML与CSS入门经典(第7版) >HTML入门 点评:html语言的入门,由于html极其简单所以同类其他书也可代替,本书并非经典,本书摆在这里纯属占位!你可以用其他书 ...