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简介以及防火墙绕过方法
简介 许多现实中对于网站的攻击往往是由于网站没有及时更新或者对于用户的输入没有进行检查.从缓冲区溢出说起,这样一种针对系统脆弱性的威胁,最根本的问题还是在于对于用户的输入没有进行检查.作为主要威胁之一 ...
随机推荐
- docker run和nsenter
docker run和nsenter 1,本机运行java -version没有内容, 使用 docker run java java -version就有内容了: 2, docker run -d ...
- CUDA编程(二) CUDA初始化与核函数
CUDA编程(二) CUDA初始化与核函数 CUDA初始化 在上一次中已经说过了,CUDA成功安装之后,新建一个project还是十分简单的,直接在新建项目的时候选择NVIDIA CUDA项目就能够了 ...
- 国际维修联合会IMA年度大会在瑞士圆满结束
瑞士卢加诺 ☆2016年4月5日至7日 中国设备管理协会国际交流合作中心主任.学府咨询(国际)集团董事长.IMA中国分会主席李葆文教授,应邀出席了4月5日至7日在瑞士卢加诺召开的国际维修联合会年度大会 ...
- #HDU 3790 最短路径问题 【Dijkstra入门题】
题目: 最短路径问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- ping测试局域网内主机是否alive
[root@zabbix ~]# cat alivehost.sh #!/bin/bash #Checks to see if hosts 192.168.1.100-192.168.1.200 ar ...
- 备忘录模式之C++实现
说明:本文仅供学习交流.转载请标明出处,欢迎转载. 备忘录模式是一种比較简单的设计模式.该模式非常好地体现了一种面向对象的封装思想. 该模式的思想是用一个专门的备份类将当前的状态信息保存起来.在整个 ...
- YTU 2734: 国家排序
2734: 国家排序 时间限制: 1 Sec 内存限制: 128 MB 提交: 133 解决: 84 题目描述 世界格局动荡不安,10国紧急召开会议磋商对策.有些国家斤斤计较,参会代表的座位如何排 ...
- 选择排序(1)——简单选择排序(selection sort)
选择排序是一种很常见的排序算法,它需要对数组 中的元素进行多次遍历.每经过一次循环,选择最小的元素并把它放在靠近数组前端的位置. 代码实现: public static void selectionS ...
- IBatis异常: Cannot find class: VARCHAR
今天再项目里添加新功能时,突然爆出 org.springframework.beans.factory.BeanCreationException: Error creating bean with ...
- ural 1009. K-based Numbers(简单dp)
http://acm.timus.ru/problem.aspx?space=1&num=1009 题意:将一个n位数转化为合法的K进制数,有多少种情况.合法的K进制数即不含前导0,且任意两个 ...