「JavaScript从入门到精通」第十三课 DOM操作高级应用-01

开课吧石川 07-11 226

前言：

眼前小伙伴们对“html按钮变色”都比较关怀，朋友们都想要分析一些“html按钮变色”的相关知识。那么小编也在网络上搜集了一些关于“html按钮变色””的相关内容，希望我们能喜欢，各位老铁们快快来学习一下吧！

这篇文章开始我们介绍一些DOM的高级应用。

表格应用-1：添加删除

这里我们来介绍一些关于表格的应用。大家应该都很了解HTML的表格table标签。实际上，由于JS诞生的年代正是表格风行使用的时候，因此JS内有很多对表格的便捷操作。

例如，我们在选取表格tbody的时候，自然可以使用getElementsByTagName('tbody')的方法，也可以直接用tbodies代替，同样的选取表格所有行的方法为：rows（相当于getElementByTageName('tr')），选取表格所有列的方法为：cells（相当于getElementsByTagName('td')）。此外还有tFoot和tHead属性，用于选取表格的表头和表尾。和前面不同的是，一个表格可以有多个tBody、行和列，因此他们获取的是一个数组，但表格的表头和表尾只能有一个，因此它们获取的不是数组而是单个的元素。

现在我们利用这些方法实现表格变色的功能。

<html>

<head>

<title>无标题文档</title>

</script>

</head>

<body>

<thead>

</thead>

<tbody>

</tbody>

</table>

</body>

</html>

效果如下：

这里需要注意的是，选取表格行或列时，如果有表头或表尾，一定要在前面加上tbodies，如上面代码的oTab.tbodies[0].rows，如果不添加tbodies，则会对整个表格进行操作（包括表头和表尾）。

DOM应用到表格

通过DOM，我们可以对表格进行添加和删除操作。

<html>

<head>

<title>无标题文档</title>

window.onload = function()

{

var oTab = document.getElementById('tab1');

var oBtn = document.getElementById('btn1');

var oName = document.getElementById('name');

var oAge = document.getElementById('age');

oBtn.onclick = function()

{

var oTr = document.createElement('tr');

var oTd = document.createElement('td');

oTd.innerHTML = oTab.tBodies[0].rows.length + 1; //?

oTr.appendChild(oTd);

var oTd = document.createElement('td');

oTd.innerHTML = oName.value;

oTr.appendChild(oTd);

var oTd = document.createElement('td');

oTd.innerHTML = oAge.value

oTr.appendChild(oTd);

oTab.tBodies[0].appendChild(oTr);

};

</script>

</head>

<body>

姓名：

<input id="name" type="text" /> 年龄：

<thead>

</thead>

<tbody>

</tbody>

</table>

</body>

</html>

当我们点击添加时，输入的姓名，年龄就可以添加到表格下方。同样的，我们利用DOM对表格进行删除操作。

<html>

<head>

<title>无标题文档</title>

</script>

</head>

<body>

姓名：

<input id="name" type="text" /> 年龄：

<thead>

</thead>

<tbody>

</tbody>

</table>

</body>

</html>

效果如下：

注意两点：

1.我们在设置删除元素的参数时，因为tr是a标签的父元素的父元素，所以使用的是this.parentNode.parentNode进行选择。

2.我们仍然是在tbodie内对元素进行删除，tbody是tr的父元素，因此删除tr的代码也必须由tbody来选中。

可以看到，我们已经可以对添加的行进行删除操作。但是这里仍然有一个小问题。因为我们是通过行数=ID的形式为ID赋值，如果进行删除操作后，行数不等于ID，那么可能会出现ID重复的情况。为了避免这种情况，我们用一个变量存储初始的行数值+1，之后每点击一次添加，就把这个值赋添加行的id并自增，这样就不会出现重复的情况了：

window.onload = function()

{

var oTab = document.getElementById('tab1');

var oBtn = document.getElementById('btn1');

var oName = document.getElementById('name');

var oAge = document.getElementById('age');

var id = oTab.tBodies[0].rows.length + 1;

oBtn.onclick = function()

{

var oTr = document.createElement('tr');

var oTd = document.createElement('td');

oTd.innerHTML = id++; //?

oTr.appendChild(oTd);

var oTd = document.createElement('td');

oTd.innerHTML = oName.value;

oTr.appendChild(oTd);

var oTd = document.createElement('td');

oTd.innerHTML = oAge.value;

oTr.appendChild(oTd);

var oTd = document.createElement('td');

oTd.innerHTML = '<a href="javascript:;">删除</a>';

oTr.appendChild(oTd);

oTd.getElementsByTagName('a')[0].onclick = function()

{

oTab.tBodies[0].removeChild(this.parentNode.parentNode);

};

oTab.tBodies[0].appendChild(oTr);

};

对于已经删除的行来说，它的ID已经被废弃，因此不需要再次使用，实际情况中，大部分网站都是采用的这种方式。

表格应用-2：搜索

如果要从表格中寻找我们需要的数据，就需要用到表格搜索功能。在我们上面的表格中，我们想通过搜索名字获取对应的信息。这个功能的实现也很简单，通过判断是否存在某个名字和搜索框内相等即可。

window.onload = function()

{

var oTab = document.getElementById('tab1');

var oTxt = document.getElementById('name');

var oBtn = document.getElementById('btn1');

oBtn.onclick = function()

{

for (var i = 0; i < oTab.tBodies[0].rows.length; i++)

{

if (oTab.tBodies[0].rows[i].cells[1].innerHTML == oTxt.value)

{

oTab.tBodies[0].rows[i].style.background = 'yellow';

}

else

{

oTab.tBodies[0].rows[i].style.background = '';

}

};

效果如下：

注意这里在将符合内容的行背景变黄的同时将不符合条件的行重新标为白色。

但是这个搜索功能并不完善。首先，目前主流的搜索功能是不区分大小写的，但JS默认区分大小写，因此我们搜“blue”的话是将不会有效果。在JS里有一种方法叫toLowerCase，可以把一个英文字符串转化为全小写，因此只要我们将比较的两串字符串全部转化为小写进行比较，就可以忽略本身大小写带来的区别了。

其次，我们希望我们的程序实现模糊搜索功能，可以不输入全名就能搜索出结果。在JS里提供了一种search()方法，其作用为在一串字符串中找到另一串字符串并返回字符串位置，没找到则返回-1：

var str='abcdef';

alert(str.search('de'));

结果为3。因此，我们可以通过search方法来寻找表格中的姓名是否包含我们输入的文字，如果不等于-1的话则说明包含。

完整代码如下：

window.onload = function()

{

var oTab = document.getElementById('tab1');

var oTxt = document.getElementById('name');

var oBtn = document.getElementById('btn1');

oBtn.onclick = function()

{

for (var i = 0; i < oTab.tBodies[0].rows.length; i++)

{

var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();

var sTxt = oTxt.value.toLowerCase();

if (sTab.search(sTxt) != -1)

{

oTab.tBodies[0].rows[i].style.background = 'yellow';

}

else

{

oTab.tBodies[0].rows[i].style.background = '';

}

};

最后，我们还希望实现一个多关键字搜索功能，当我们同时输入几个关键字时，可以将几个关键字的答案都返回给我们。我们通过空格将关键字隔开，然后可以使用JS的split方法。split方法的作用是切分字符串：

var str='abc 123 ert';

var arr=str.split(' ');

alert(arr);

效果如下：

split方法会在字符串中寻找参数字符并用参数字符将字符串切开并返回一个数组。

现在，我们也可以将输入的字符串用split方法切开成一个数组，再对数组里的元素进行一一判断检验，就可以达成我们的目的了。

window.onload = function()

{

var oTab = document.getElementById('tab1');

var oTxt = document.getElementById('name');

var oBtn = document.getElementById('btn1');

oBtn.onclick = function()

{

for (var i = 0; i < oTab.tBodies[0].rows.length; i++)

{

var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();

var sTxt = oTxt.value.toLowerCase();

var arr = sTxt.split(' ');

oTab.tBodies[0].rows[i].style.background = '';

for (var j = 0; j < arr.length; j++)

{

if (sTab.search(arr[j]) != -1)

{

oTab.tBodies[0].rows[i].style.background = 'yellow';

}

};

刚才我们做的效果是高亮显示。如果我们希望我们的程序在搜索后只保留我们需要的行，也就是实现筛选功能，应该怎么做呢？实际上也非常简单，我们前面做高亮功能时修改的是行元素的background属性，这里如果我们修改的是元素display属性，当它符合条件时，将其display属性设置为block；不需要显示时，设置为none。这样就可以做到筛选搜索元素了。

效果如下:

我是石川（Blue），如果你觉得我的公众号还不错，请多帮我推荐给你的朋友，多谢了。

石川简介：前阿里巴巴高级技术经理，现开课吧技术学院院长。精通C/C++、Java、Python、前端开发等多种开发技术，曾参与淘宝网的早期建设和优化，拥有丰富的企业级系统开发经验，对HTML5移动端互联网技术及生态体系有深厚的造诣。

本文地址：http://www.longkongtuishu.com/ca7b7AmsAAlcDAA.html

标签： #html按钮变色