頁中所有的p標籤添加onclick事件和表格隔行換色以及checkbox的複選

最新推荐文章于 2022-08-04 14:00:30 发布

zenpignoy

最新推荐文章于 2022-08-04 14:00:30 发布

阅读量131

点赞数

分类专栏： js 文章标签： JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/zenpignoy/article/details/83907256

版权

js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

[align=left]
[b]display和bisibility[/b]


    //当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。    
    document.getElementById("id").style.visibility="visible";
    document.getElementById("id").style.visibility="hidden";
    //display被设置为"none"的时候，元素被隐藏了，也將它原来所在的位置空出來
    //display被设置为"block"的时候 和div一樣使用"塊" 而inline就相當於一個span
    document.getElementById("id").style.display="block";
    document.getElementById("id").style.display="inline";
    document.getElementById("id").style.display="none";

[b]給網頁中所有的p標籤添加onclick事件[/b]


    <p>測試1</p>
    <p>測試2</p>
    <p>測試3</p>


<script type="text/javascript">
    var pitems = document.getElementsByTagName("p");//Dom方式獲取所有p標籤元素
    for (var i = 0; i < pitems.length; i++)
    {
        pitems[i].onclick = function() {
            alert(this.innerHTML);
        }
    }
</script>

[b]給特定的表格隔行換色[/b]


<table id="tb">
    <tbody>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
    </tr>
    <tr>
        <td>第四行第一列</td>
        <td>第四行第二列</td>
    </tr>
    <tr>
        <td>第五行第一列</td>
        <td>第五行第二列</td>
    </tr>
    <tr>
        <td>第六行第一列</td>
        <td>第六行第二列</td>
    </tr>
    </tbody>
</table>


<script type="text/javascript">
    var item = document.getElementById("tb");//獲取Id為tb的元素
    var tbody = item.getElementsByTagName("tbody")[0];//獲取表格的第一個tboby元素  
    var trs = tbody.getElementsByTagName("tr");//獲取tboby元素下的所有tr元素
    for (var i = 0; i < trs.length; i++) {
        if (i % 2 == 0) {
            trs[i].style.backgroundColor = "#888";
        }
    }
</script>

[b]獲取checkbox選中的個數並把值push到Array中去[/b]


<input type="checkbox" value="1" name="check" checked="checked"/>
<input type="checkbox" value="2" name="check"/>
<input type="checkbox" value="3" name="check" checked="checked"/>
<input type="checkbox" value="4" name="check"/>
<input type="button" value="選中的個數" id="btnchk">


<script type="text/javascript">
    var btnchk = document.getElementById("btnchk");//獲取id為btnchk的button元素節點
    btnchk.onclick = function() {
        var chkarr = new Array();//創建一個數組
        var chkitems = document.getElementsByName("check");//獲取name屬性值為'check'的一組checkbox元素
        //循環這組數據
        for(var i=0;i<chkitems.length;i++)
        {
            //判斷是否被選中
            if(chkitems[i].checked){
                chkarr.push(chkitems[i].value);//將選中的checkbox的值push到數組中去
            }
        }
        alert("選中的個數為："+chkarr.length);
    }