javascript举个栗子

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhanying/p/4101403.html

文章标签：

#javascript #java #c# #ViewUI

本文介绍了一个使用HTML和JavaScript实现的简单应用案例，通过一个包含发件人和标题等信息的表格展示了如何利用JavaScript进行表格数据的选择和删除操作。

序列	标题	发件人
	一个java问题	张三@qq.com	删除
	一个c#问题	李三@qq.com	删除
		删除

全选全反选，单删除，全删除。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        table
        {
            border:1px solid red;
            border-collapse:collapse;
        }
        td
        {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td >序列</td>
            <td >标题</td>
            <td >发件人</td>
            <td></td>
        </tr>
        <tr>
            <td class="td1"><input type="checkbox"  class="ck1"/></td>
            <td class="td1">一个java问题</td>
            <td class="td1">张三@qq.com</td>
            <td><a href="#" class="delete01"  >删除</a></td>
        </tr>
        <tr>
            <td class="td1"><input type="checkbox"  class="ck1"/></td>
            <td class="td1">一个c#问题</td>
            <td class="td1">李三@qq.com</td>
            <td><a href="#" class="delete01"  >删除</a></td>
        </tr>
        <tr>
            <td colspan="2"><input type="checkbox" id="ckall"/></td>
            <td><a href="#" id="delete02">删除</a></td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
   
    var deleteobjetes = document.getElementsByClassName("delete01");
    for (var i = 0; i < deleteobjetes.length;i++) {
        deleteobjetes[i].onclick = function ()
        {
            //alert("ddd");
            var trnode = this.parentNode.parentNode;
            trnode.parentNode.removeChild(trnode);
        }
    }

    document.getElementById("ckall").onclick = function ()
    {
        var ckobjects = document.getElementsByClassName("ck1");
        for (var i = 0; i < ckobjects.length; i++) {
            ckobjects[i].checked = this.checked;
        }
    }
    document.getElementById("delete02").onclick = function ()
    {
        var ckobjects= document.getElementsByClassName("ck1")
        for (var i = ckobjects.length-1; i>=0; i--) {
            if (ckobjects[i].checked)
            {
                var removeobject = ckobjects[i].parentNode.parentNode;
                removeobject.parentNode.removeChild(removeobject);
            }
        }
    }
    
</script>

转载于:https://www.cnblogs.com/zhanying/p/4101403.html