capstone训练营2017-12-18

来源：互联网发布：qq游戏网络异常编辑：程序博客网时间：2024/06/07 15:01

用jQuery完成网页中动态数据插入表格

知识点：

自动运行函数：$(function(){ 自动执行代码块!}) （可多个出现）

获取id值：:$(“#html的id属性值”);

插入到尾部：append(“插入的内容”)，插入到开头prepend(“插入的内容”)

点击事件：$(“#id值”).click(function(){点击时要处理的逻辑代码});

获取value值：val()；

获取class值：$(“.类名”);

成果代码：（需要jQuery）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <script type="text/javascript" src="src/js/jquery-1.9.1.js"></script>    <title></title></head><body>    <div>        序号：<input type="text" id="num"><br/>        姓名：<input type="text" id="name"><br/>        专业：<input type="text" id="specialty"><br/>        年龄：<input type="text" id="age"><br/>        <input type="button" value="添加数据" id="addnum">        <input type="button" value="删除数据" id="delnum">    </div>    <div>        <table border="1px" cellspacing="0" id="firsttable">            <tr>                <td>                    <input type="checkbox" id="firstbox">                </td>                <td>                    序号                </td>                <td>                    姓名                </td>                <td>                    专业                </td>                <td>                    年龄                </td>            </tr>        </table>    </div></body><script type="text/javascript">    $("#addnum").click(function () {        var table=$("#firsttable");        var num=$("#num").val();        var name=$("#name").val();        var specialty=$("#specialty").val();        var age=$("#age").val();        var newTr=$("<tr><td><input type='checkbox' class='box'></td><td>"+num+"</td><td>"+name+"</td><td>"+specialty+"</td><td>"+age+"</td></tr>");        table.append(newTr);    });    $("#firstbox").click(function () {        if ($(this).prop("checked")==true){            $(".box").prop("checked",true);        }else{            $(".box").prop("checked",false);        }    });    $("#delnum").click(function(){        alert("确定删除？");        var checkedCols = $(".box:checked");        checkedCols.each(function(index,elem){            var $_elem = $(elem);            var $_tr = $_elem.parent().parent();            $_tr.remove();        })    });</script></html>

继续自学java程序设计基础：学习了创建对象，类的实例化，构造方法和重载。

阅读全文

0 0