多个选择框,三个按钮,显示:全选、反选、不选

html部分,建立五个多选框,三个按钮

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<button onClick="quan()">全选</button>//全选按钮
<button onClick="fan()">反选</button>//反选按钮
<button onClick="bu()">不选</button>//不选按钮

显示结果:

表单中的多选按钮:

<input type="checkbox"  checked> 内容

checked 属性是一个布尔属性,默认选中,默认返回值为true.,选中为true,不选中为false.

var inputdom = [];//多选框
window.onload = function () {
inputdom = document.getElementsByTagName("input");//获取多选框
}
/*功能:全部选中*/
function quan() {
for (var i = 0; i < inputdom.length; ++i) {
inputdom[i].checked = true;
}
}
/*功能:反向选择*/
function fan() {
for (var i = 0; i < inputdom.length; ++i) {
console.log(inputdom.length)
if (inputdom[i].checked == true) {
inputdom[i].checked = false;
} else {
inputdom[i].checked = true;
}
}
}
/*功能:全部不选*/
function bu() {
for (var i = 0; i < inputdom.length; ++i) {
inputdom[i].checked = false;
}
}

2、表格添加行、删除行、隔行变色、移入变色

html中新建表头

姓名:<input id="mingzi" type="text" placeholder="必填">
年龄:<input id="age" type="text" placeholder="必填">
<button onClick="add()">添加一行</button>//添加按钮
<button onClick="color()">隔行变色</button>
<button onClick="yrbs()">移入变色</button>
<table width="1000" border="1">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</table>

显示结果:

js中内容,建立三个方法,添加一行、隔行变色、移入变色

var tab=null;//获取表格
var tr_push=[];//添加行
var td_push=[];//添加单元格
var namedom=null;
var agedom=null;
window.onload = function () {
tab=document.getElementsByTagName("table")[];//获取表格
tr=document.getElementsByTagName("tr");
th=document.getElementsByTagName("th");
namedom=document.getElementById("mingzi");
agedom=document.getElementById("age");
}
/*功能:添加行*/
function add(){
tr_push = document.createElement("tr");//创建<tr>标签
for (var i = ; i < th.length; ++i) {
if (i == ) {
td_push = document.createElement("td");
td_push.innerHTML = tr.length;
//第一列的内容ID,排序,为tr的长度
}
if (i == ) {
td_push = document.createElement("td");
td_push.innerHTML = namedom.value;
//第二列的内容姓名,为提取姓名框的内容
}
if (i == ) {
td_push = document.createElement("td");
td_push.innerHTML = agedom.value;
//第二列的内容姓名,为提取年龄框的内容
}
if (i == ) {
td_push = document.createElement("td");
td_push.innerHTML = "<button onClick='shan(this)'>删除</button>";
//将一个button标签作为i=3的内容
//点击时,调用方法删除
}
tr_push.appendChild(td_push);
}
tab.appendChild(tr_push);
}
/*功能:删除行*/
function shan(obj) {
obj.parentNode.parentNode.remove();
//移除button所在标签的父标签的父标签(tr) }
/*功能:隔行变色*/
function color(){
for(var i = ; i < tr.length; i=i+)
//隔行变色,所以 i=i+2
tr[i].style.background = "red";
//给tr添加样式background
}
/*鼠标移入变色 移出变回原色*/
function yrbs(){
for(var i =;i<tr.length;i++){
tr[i].setAttribute('onMouseOver','cl(this,"")');
//鼠标放上时,调用方法cl()
tr[i].setAttribute('onMouseOut','cl(this,"out")');
//鼠标移开时,调用方法cl() ,加参数"out"
}
} function cl(obj,type){
//定义this=obj,实参type
for(var i =;i<tr.length;++i){
tr[i].style.backgroundColor = "white";
//先把所有的定义为白色
}
if(type != "out"){
//当type不等于out时,该行变绿色
obj.style.backgroundColor = "green";
}
}

DOM练习 选择框、表格添加、变色的更多相关文章

  1. DOM给表格添加新一行和删除整个行的内容

    DOM用appendChild()给表格添加新一行时,要注意,在HTML中没特别设置<thead>,<tbody>时,会自动添加上,所以要选择表格第一个元素在添加tr. // ...

  2. 原生js实现一个自定义下拉单选选择框

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...

  3. Javascript DOM 03 表格添加、删除 + 搜索

    获取 tBodies.tHead.tFoot.rows.cells   隔行变色 鼠标移入高亮   添加.删除一行 DOM方法的使用                                   ...

  4. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  5. dojo:如何为表格添加从数据库获得存储的下拉框

    为表格添加下拉框的例子官网上就有,但如果下拉框的数据是从数据库请求的.需要有一些注意的地方. 首先希望实现的效果如下图所示: 表格初始数据为空,点击查询后获得表格表格数据,但下拉框的数据是在对应的fo ...

  6. ElementUI表格行编辑单元格编辑支持(输入框,选择框)Demo

    嗯,需要做成这个样子,所以网上查了些资料.整理了下.提供几个一个思路.不足之处请小伙伴指出来.  普通版的table可编辑内嵌select选择框,输出框,编辑删除添加等 <!DOCTYPE ht ...

  7. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

  8. ElementUI el-table 表格 行选择框改为单选

    实现方法 首先,表格加一列 <el-table-column type="selection" width="55"></el-table-c ...

  9. JavaScript DOM方法表格添加删除

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Oracle归档日志所在目录时间不对&&Oracle集群日志时间显示错误

    Oracle归档日志所在目录时间不对&&Oracle集群日志时间显示错误 前言 这个问题在18年的时候遇到了,基本不注意并且集群或者数据库运行正常是很难注意到的. 忘记当时怎么发现的了 ...

  2. Netty 源码解析(八): 回到 Channel 的 register 操作

    原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 今天是猿灯塔“365篇原创计划”第八篇. 接下来的时间灯塔君持续更新Netty系列一共九篇 Netty 源码解析(一): 开始 Netty 源 ...

  3. kubernetes-pod驱逐机制

    1.驱逐策略 kubelet持续监控主机的资源使用情况,并尽量防止计算资源被耗尽.一旦出现资源紧缺的迹象,kubelet就会主动终止部分pod的运行,以回收资源. 2.驱逐信号 以下是一些kubele ...

  4. (二)LVS介绍

    LVS分3种模式  (a)NAT(网络地址映射):通过网络地址转换的方法来实现调度       优点:支持所有操作系统及私有网络,且只需一个公网 IP 地址       缺点:用户请求和响应报文都必须 ...

  5. Error: error getting chaincode bytes: failed to calculate dependencies报错解决办法

    Error: error getting chaincode bytes: failed to calculate dependencies: incomplete package: github.c ...

  6. [SpringBoot] 使用yaml文件实现多配置

    SpringBoot 使用yaml文件实现多配置 SpringBoot利用yaml文件实现多配置有两种方式: 单个yml中编写多个配置(Multi-profile YAML Documents) 编写 ...

  7. 真懂Spring的@Configuration配置类?你可能自我感觉太良好

    当大潮退去,才知道谁在裸泳.关注公众号[BAT的乌托邦]开启专栏式学习,拒绝浅尝辄止.本文 https://www.yourbatman.cn 已收录,里面一并有Spring技术栈.MyBatis.中 ...

  8. 安装FeedReader添加RSS订阅

    #0x1 FeedReader FeedReader是一款功能齐全,界面优美的GTK+ 3RSS阅读器客户端,用于在线RSS服务. FeedReader目前支持Feedbin,Feedly,Fresh ...

  9. CSS(三) - 定位模型 - float的几要素

    要点 1.浮动盒子会脱离文文档流,不会在占用空间. 2.非浮动元素几乎当浮动盒子根本不存在一样该怎么布局怎么布局不会被影响 3.非浮动元素中的文本内容会记住浮动元素的大小,并在排布时避开它,为其留出响 ...

  10. Python split分割字符串

    s = input(); str = s.split("-") print("{}+{}".format(str[0],str[-1]))