读书人

中全部的p添加onclick事件和表格

发布时间: 2012-10-12 10:17:04 作者: rapoo

中所有的p添加onclick事件和表格隔行色以及checkbox的
[align=left]
display和bisibility

    //当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";    

中所有的p添加onclick事件
    <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>   

特定的表格隔行色
<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");//取Idtb的元素    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>

取checkbox中的把值push到Array中去
<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");//取idbtnchk的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);    }

[/align]

读书人网 >Web前端

热点推荐