实现效果:

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. java JDBC 连接数据库查询数据与直接使用sql的疑问

    JDBC 封装连接是好的前提: SystemAuthorizingRealm c = new SystemAuthorizingRealm(); conn = c.getConnection(); / ...

  2. 2014年辛星starphp第一节设置入口文件以及App类

    *********************本节目标**************** 1.首先是我们的框架大致布局,我们即将写成的这个框架.它的入口文件统一为star.php.它须要做的一些事,比方载入 ...

  3. SVN合并(merge)的使用

    使用svn几年了,一直对分支和合并敬而远之,一来是由于分支的管理不该我担心,二来即使涉及到分支的管理,也不敢贸然使用合并功能,生怕合并出了问题对团队造成不良影响.最基本的原因是,自己对分支的目的和合并 ...

  4. linux RHEL 修改hostname 不需要重启机器

    1. 修改/etc/sysconfig/network 中的hostname HOSTNAME=newhostname 运行命令起作用: /etc/rc.d/rc.sysinit 2. 修改/ect/ ...

  5. caffe代码阅读10:Caffe中卷积的实现细节(涉及到BaseConvolutionLayer、ConvolutionLayer、im2col等)-2016.4.3

    一. 卷积层的作用简单介绍 卷积层是深度神经网络中的一个重要的层,该层实现了局部感受野.通过这样的局部感受野,能够有效地减少參数的数目. 我们将结合caffe来解说详细是怎样实现卷积层的前传和反传的. ...

  6. Android showDialog时报错requestFeature() must be called before adding content

    View view = View.inflate(this, R.layout.layout_dialog, null); AlertDialog alertDialog = new AlertDia ...

  7. Silverlight 2学习笔记二:三个基本布局控件(Canvas、StackPanel、Grid )

    这篇文章主要是翻译了ScottGu博客的文章:Silverlight Tutorial Part 2: Using Layout Management.虽然是翻译,但通过笔记记录,我发现对这三个布局控 ...

  8. linux下 yum相关

    1.1 什么是yum源 Yellowdog Updater, Modified 一个基于RPM包管理的字符前端软件包管理器. 能够从指定的服务器自动下载RPM包并且安装,可以处理依赖性关系,并且一次安 ...

  9. 让谷歌浏览器(chrome)保存调试代码workspace

    方法/步骤  chrome浏览器早期版本的操作方法与我现在要讲的方法有所不同,因此操作前请注意浏览器的版本号. 示例中的版本号: 53.0.2785.116 m  任意打开一个需要调试的html文件 ...

  10. [Swift通天遁地]五、高级扩展-(7)UIView(视图类型)的各种扩展方法

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...