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简介以及防火墙绕过方法
简介 许多现实中对于网站的攻击往往是由于网站没有及时更新或者对于用户的输入没有进行检查.从缓冲区溢出说起,这样一种针对系统脆弱性的威胁,最根本的问题还是在于对于用户的输入没有进行检查.作为主要威胁之一 ...
随机推荐
- Jsp中EL表达式的使用
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 1.什么是EL EL是JSP表达式语言,全称是ExpressionLang ...
- 从头认识java-15.1 填充容器(1)-利用Collection构造器的方式
这一章节我们来介绍一下填充容器. 就像数组一样,Arrays.fill是填充方法,在容器里面也有. 1.Collections.nCopies 这种方法是生成某种类型多少个对象,然后我们能够把他放到容 ...
- SD和SDHC和SDXC卡的差别是什么
SD内存卡和SDHC内存卡有什么差别? SDHC和SD的差别事实上也就是SD 1.0/1.1规范和SD 2.0规范的差别.尽管编编手上有一份SD 1.1规范的文件.只是因为SD 2.0规范仅仅有SDA ...
- [转] CV Datasets on the web
转自:CVPapers This material is presented to ensure timely dissemination of scholarly and technical wor ...
- Scroller的应用--滑屏实现
1.Scroller源代码分析 以下是对Scroller源代码的分析,并附有源代码.例如以下: package android.widget; import android.content.Conte ...
- [Unity 设计模式]IOC依赖倒置
1.前言 最近在看<游戏开发与设计模式>一书,看到控制反转设计模式,作者说:上层模块不应该依赖于下层模块,上层模块和下层模块都应该依赖于接口,这样能减少耦合.然后附带举了个例子,我觉得特别 ...
- Modular_exponentiation模幂运算
https://en.wikipedia.org/wiki/Modular_exponentiation 蒙哥马利(Montgomery)幂模运算是快速计算a^b%k的一种算法,是RSA加密算法的核心 ...
- go语言笔记——指针,和C用法以及本质一样,但不支持指针的+-运算!
4.4.2 值类型和引用类型 所有像 int.float.bool 和 string 这些基本类型都属于值类型,使用这些类型的变量直接指向存在内存中的值. Go 语言的取地址符是 &,放到一个 ...
- eclipse和jdk版本对应问题
日常开发中,32位eclipse要用32位jdk,64位则必须要用64位jdk,否则启动时就会报错,load jvm.dll失败,昨天又遇到了这个问题.更换对应的版本之后就好了.tomcat等应用也有 ...
- springMVC与freemarker整合
准备好的环境:Maven工程整合好了ssm,即spring+springMVC+mybatis.接下来准备将springMVC与freemarker整合,以html文件为模板. 一,加入freemar ...