实现效果:

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. android学习笔记(9)android程序调试学习

    相应若水老师的第十四课 一,Log日志输出 Log.v(tag,message);        //verbose模式,打印最具体的日志  Log.d(tag,message);        // ...

  2. hdu 5950 Recursive sequence

    题意:告诉你数列的递推公式为f(n+1)=f(n)+2*f(n-1)+(n+1)^4 以及前两项a,b:问第n项为多少,结果对2147493647取模. 题解:有递推公式,马上应该就能想到矩阵快速幂: ...

  3. Django - 自定义请求头

    收藏一下以后学习 博客搬运地址 Django接收自定义http header(转)

  4. ArgumentError: You need to supply at least one validatio

    创建: 2017/10/02   意思: validate没有内容 例:   validates :title

  5. Factstone Benchmark(数学)

    http://poj.org/problem?id=2661 题意:Amtel在1960年发行了4位计算机,并实行每十年位数翻一番的策略,将最大整数n作为改变的等级,其中n!表示计算机的无符号整数(n ...

  6. 能够完成qq信息提醒的代码

    下面这个网址就帮咱们实现了QQ提醒的功能,别被它的外面吓坏,虽然是长的有点恶心,但是它可是一段“神奇代码”. http://qzs.qq.com/snsapp/app/bee/widget/open. ...

  7. 虫食算 2004年NOIP全国联赛提高组(dfs)

    1064 虫食算 2004年NOIP全国联赛提高组  时间限制: 2 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Descrip ...

  8. JavaScript中.和[]有什么区别?

    .与[]都可以用于读取或修改对象属性. <script> var myData={ name:"Adam", weather:"sunny", }; ...

  9. Centos7 时间不正确修复

    查看系统支持的时区列表 timedatectl list-timezones 使用 date -R 查看时区是否正确 date -R 修改时区 timedatectl set-timezone Asi ...

  10. HTML--使用下拉列表框进行多选

    下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ct ...