DOM练习 选择框表格添加变色

Posted dk2557

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM练习 选择框表格添加变色相关的知识,希望对你有一定的参考价值。

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

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="">移入变色</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")[0];//获取表格
    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 = 0; i < th.length; ++i) {        
        if (i == 0) {
            td_push = document.createElement("td");
            td_push.innerHTML = tr.length;
//第一列的内容ID,排序,为tr的长度
        }
        if (i == 1) {
            td_push = document.createElement("td");
            td_push.innerHTML = namedom.value;
//第二列的内容姓名,为提取姓名框的内容
        }
        if (i == 2) {
            td_push = document.createElement("td");
            td_push.innerHTML = agedom.value;
//第二列的内容姓名,为提取年龄框的内容
        }
        if (i == 3) {
            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 = 0; i < tr.length; i=i+2)
//隔行变色,所以    i=i+2
    tr[i].style.background = "red";    
//给tr添加样式background     
}

 

以上是关于DOM练习 选择框表格添加变色的主要内容,如果未能解决你的问题,请参考以下文章

DOM-表格变色添加删除搜索

DOM设置表格隔行变色js代码及鼠标悬停在哪行,哪行字体就加粗效果

PHP----练习----光标离开文本框时变色

js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格

excel鼠标点击单元格,单元格黑色框框没有

js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格