JS中级 - 02：表单、表格
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload =function (argument) {
var oUl1 = document.getElementById('ul1');
console.info(oUl1)
var aLi = getElementsByClassName(oUl1,'li','box');
//设置 aLi 背景色
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.background = 'red';
}
alert(aLi.length);
//自定义getElementsByClassName方法
function getElementsByClassName(parent,tagName,className){
var aEls = parent.getElementsByTagName(tagName);
var arr = [];
for (var i = 0; i < aEls.length; i++) {
var aClassName = aEls[i].className.split(' ');
console.log(aClassName.length);
for (var j = 0; j < aClassName.length; j++) {
if (aClassName[j] == className) {
arr.push(aEls[i]);
//class="box box" 出于各种原因，出现这种情况
//用break只向 arr 添加第1个 box
break;
}
}
// if (aEls[i].className == className) {
// arr.push(aEls[i]);
// }
}
return arr;
}
}
</script></head>
<body>
<ul id ="ul1">
<li>1111111</li>
<li class="box box">2222222</li>
<li class="box1">3333333</li>
<li class="box box2">4444444</li>
</ul>
<ul id="ul2">
<li>1111111</li>
<li class="box box">2222222</li>
<li class="box1">3333333</li>
<li class="box box2">4444444</li>
</ul>
<p class="box"></p>
</body>
</html>
<table id="tab1" width="80%" border="1px">
<thead>
<tr>
<th>编号</th>
<th>Name</th>
<th>Sex</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Li Lei</td>
<td>男</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Han MeiMei</td>
<td>女</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr>
</tbody>
</table>
/*
tHead :表格头
tBodies ：表格正文
tFoot ：表格尾
rows ：行
cells ：列
*/
console.log("tHead:");
console.log(oTable.tHead); //<tHead>..</tHead>
console.log("tBodies:");
console.log(oTable.tBodies); //[tbody]
console.log("tFoot:");
console.log(oTable.tFoot); //null
console.log("rows:");
console.log(oTable.rows); //[tr,tr,tr]
console.log("cells:");
console.log(oTable.cells); // undefined
//console.info(oTable.children[1].children[1].children[1].innerHTML) //Han MeiMei
console.info(oTable.tBodies[0].rows[1].cells[1].innerHTML) //Han MeiMei
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function (argument) {
var data = [
{id:1,username:'leo',sex:'男'},
{id:2,username:'xiaomei',sex:'女'},
{id:3,username:'wangliang',sex:'男'},
{id:4,username:'telly',sex:'女'}
];
var oTab = document.getElementById('tab1');
var oTbody = oTab.tBodies[0];
for (var i = 0; i < data.length; i++) {
var oTr = document.createElement('tr');
//编号
var oTd =document.createElement('td');
oTd.innerHTML = data[i].id;
oTr.appendChild(oTd);
//姓名
oTd =document.createElement('td');
oTd.innerHTML = data[i].username;
oTr.appendChild(oTd);
//性别
oTd =document.createElement('td');
oTd.innerHTML = data[i].sex;
oTr.appendChild(oTd);
//删除
oTd =document.createElement('td');
var oA = document.createElement('a');
oA.innerHTML ='删除';
oA.href ='javascript:;';
oA.onclick =function (){
//删除一行
oTbody.removeChild(this.parentNode.parentNode);
//重新渲染
for (var i = 0; i < oTbody.rows.length; i++) {
if (i%2) {
oTbody.rows[i].style.background="gray";
}else{
oTbody.rows[i].style.background="white";
}
}
};
oTd.appendChild(oA);
oTr.appendChild(oTd);
/*
* 隔行变色
*/
if (i%2) {
oTr.style.background="gray";
}
oTbody.appendChild(oTr);
}
}
</script>
</head>
<body>
<table id="tab1" width="80%" border="1px">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(argument) {
var oForm = document.getElementById('form1');
/*
* 查找表单下的控件（使用name）
* 表单.控件name
* alert(oForm.text1.value) //文本框
*/
/*
*【onchange】 :当值发生改变的时候触发
* text : 当光标离开的时候如果内容有变化就触发
* radio/checkbox: 标准下值变了就触发
* 非标准下焦点离开的时候如果值变了就会触发
*/
oForm.city.onchange = function() {
//alert(this.value)
}
oForm.button.onclick = function() {
//性别radio
if (oForm.sex[0].checked) {
console.log('性别：男');
} else {
console.log('性别：女');
}
//多选checkbox
var content = "";
for (var i = 0; i < oForm.checkbox.length; i++) {
if (oForm.checkbox[i].checked) {
content += oForm.checkbox[i].value + ' ';
}
}
console.log(content);
//地区select
console.log(oForm.city.options[oForm.city.selectedIndex].value)
}
}
</script>
</head>
<body>
<form id="form1">
<div>
<input type="text" name="text1" value="文本框"></div>
<div>
<input type="radio" name="sex" value="男" checked>
男
<input type="radio" name="sex" value="女">女</div>
<div>
<input type="checkbox" name="checkbox" value="html">
html
<input type="checkbox" name="checkbox" value="css">
css
<input type="checkbox" name="checkbox" value="js">js</div>
<div>
<select name="city" id="mySelect">
<option value="">请选择</option>
<option value="北京">北京</option>
<option value="重庆">重庆</option>
<option value="上海">上海</option>
</select>
</div>
<input type="button" value="提交" name="button">
</form>
</body>
</html>
JS中级 - 02：表单、表格的更多相关文章
- js动态控制表单表格
js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <met ...
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
-----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...
- js/jquery/插件表单验证
媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...
- js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- 通过JS模拟select表单，达到美化效果[demo][转]
转自: http://www.cnblogs.com/dreamback/p/SelectorJS.html 通过JS模拟select表单,达到美化效果 Demo ------------------ ...
- JS 提交form表单
源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...
- 通过JS模拟select表单，达到美化效果[demo]
.m-form{background:#fff;padding:50px;font-family:12px/1.5 arial,\5b8b\4f53,sans-serif;} .m-form ul,. ...
- 表单验证—js循环所有表单验证
[封装为表单验证的专用js,所有表单页面都可以调用] 1.表单 <form id="regForm" method="post" action=" ...
- js重置form表单
CreateTime--2017年7月19日10:37:11Author:Marydon js重置form表单 需要使用的方法:reset() 示例: HTML部分 <form id=&qu ...
- js验证form表单示例
js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下: <script type="text/javascript& ...
随机推荐
- 剑指Offer 反转链表
题目描述 输入一个链表,反转链表后,输出链表的所有元素. 思路: 法1:用栈,压栈出栈 法2:头插法(有递归非递归2中) AC代码: /* struct ListNode { int va ...
- OpenCV成长之路(10)：视频的处理
视频中包含的信息量要远远大于图片,对视频的处理分析也越来越成为计算机视觉的主流,而本质上视频是由一帧帧的图像组成,所以视频处理最终还是要归结于图像处理,但在视频处理中,有更多的时间维的信息可以利用.本 ...
- const 和宏的区别
参考:http://blog.sina.com.cn/s/blog_79b01f6601018xdg.html (1) 编译器处理方式不同 define宏是在预处理阶段展开. const常量是编译运行 ...
- js之作用域和面向对象
作用域 JavaScript以函数为作用域 函数的作用域在函数未被调用之前,已经创建 函数的作用域存在作用域链,并且也是在被调用之前创建 示例一 xo = "alex"; func ...
- 中文的加密传输（python版）
信息传输过程中,可能会被各种监听. 这里介绍一种简单的加密算法(可逆). 正向加密: 字符串 -> 字节(char->int转换) -> 异或每个字节某个KEY ->字节(i ...
- 【MavenWeb】初探：创建一个Maven Web项目
第一步:创建一个Simple的Maven项目 直接点下一步,把name上面的几个部分填写好,直接Finish即可. 就可以看到如下的结构: 注意点1:如果按照网上的其他一些做法来创建,你会发现少了sr ...
- 用批处理启动MySQL命令行工具
最近在看MySQL,安装好之后,每次在开始菜单去启动MySQL命令行工具的时候,都是直接用root用户连接我本地的数据库 输入密码开始工作,但是要连接服务器上的MySQL的话,就要去CMD下运行 : ...
- Wince常见操作
1.获取本地代码启动路径 //在代码启动路径下存在 Files 文件夹 Path.GetDirectoryName(Assembly.GetExecutingAssembly().GetName(). ...
- 在Py文件中引入django环境
复制manage.py中的相关代码即可并将文件置于Project文件夹(与manage.py同位置)下 示例: #! /usr/bin/env python # -*- coding:utf- -*- ...
- ACM/ICPC 之 BFS(离线)+康拓展开(TSH OJ-玩具(Toy))
祝大家新年快乐,相信在新的一年里一定有我们自己的梦! 这是一个简化的魔板问题,只需输出步骤即可. 玩具(Toy) 描述 ZC神最擅长逻辑推理,一日,他给大家讲述起自己儿时的数字玩具. 该玩具酷似魔方, ...