DOM中对表格的操作

最新推荐文章于 2021-11-22 08:51:39 发布

Linux????? Mr.Liyz

最新推荐文章于 2021-11-22 08:51:39 发布

阅读量202

点赞数

文章标签： java

原文链接：https://juejin.im/post/5c96de786fb9a0710466aa0c

版权

DOM中对表格的操作

思考：对表格操作都是对表格哪些东西进行操作？

答：对表格中的属性和方法进行操作

表格中有哪些常用的属性和方法？

下面表格中列出了常用的表操作的属性和方法

下面利用代码演示对表格的四种操作 1.表格的行遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历行</title>
    <script>
        function disScore() {
            //得到表格
            var tab = document.getElementById("tabScore");
            //得到表格中的所有行
            var rows = tab.rows;
            for (var i = 1; i < rows.length; i++) {
                //得到每行的各项内容
                var name = rows[i].childNodes[0].innerText;
                var java = rows[i].childNodes[1].innerText;
                var html = rows[i].childNodes[2].innerText;
                var sql = rows[i].childNodes[3].innerText;
                var count = rows[i].childNodes[4].innerText;
                alert(name + ":" + java + "," + html + "," + sql + "," + count);
            }
        }
    </script>
</head>
<body>
<input type="button" value="查看表中成绩" onClick="disScore()">
<hr size="1px">
<table id="tabScore" width="470px" border="1px solid #003399" align="center">
    <tr bgcolor="#0099ff">
        <th>姓名</th>
        <th>Java</th>
        <th>HTML</th>
        <th>SQL</th>
        <th>总成绩</th>
    </tr>
    <tr>
        <td align="center">张三</td>
        <td align="center">87</td>
        <td align="center">92</td>
        <td align="center">79</td>
        <td align="center">258</td>
    </tr>
    <tr>
        <td align="center">李四</td>
        <td align="center">70</td>
        <td align="center">80</td>
        <td align="center">75</td>
        <td align="center">225</td>
    </tr>
</table>
</body>
</html>
复制代码

2.表格中添加行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在表格中添加行</title>
    <script>
        function addScore() {
            //得到输入数据
           var name = document.getElementById("username").value;
           var java = document.getElementById("java").value;
           var html = document.getElementById("html").value;
           var sql = document.getElementById("sql").value;
           var count = parseInt(java) + parseInt(html) + parseInt(sql);
           //得到表格
            var tab = document.getElementById("tabScore");
            //创建行
            var row = tab.insertRow();
            //在行中添加单元格
            var td_name =row.insertCell();
            //设置文本居中对齐
            td_name.style.textAlign = "center";
            //设置单元格的值
            td_name.innerText = name;
            var td_java =row.insertCell();
            td_java.style.textAlign = "center";
            td_java.innerText = java;
            var td_html =row.insertCell();
            td_html.style.textAlign = "center";
            td_html.innerText = html;
            var td_sql =row.insertCell();
            td_sql.style.textAlign = "center";
            td_sql.innerText = sql;
            var td_count =row.insertCell();
            td_count.style.textAlign = "center";
            td_count.innerText = count;
        }
    </script>
</head>
<body>
<center>
    姓名：<input type="text" id="username" size="10"> &nbsp;&nbsp;
    Java:<input type="text" id="java" size="3" maxlength="2"> &nbsp;&nbsp;
    HTML:<input type="text" id="html" size="3" maxlength="2"> &nbsp;&nbsp;
    SQL:<input type="text" id="sql" size="3" maxlength="2"> &nbsp;&nbsp;
    <input type="button" value="添加" onclick="addScore()">
    <hr size="1">
    <table id="tabScore" width="470px" border="1px solid #003399" align="center">
        <tr bgcolor="#0099ff">
            <th>姓名</th>
            <th>Java</th>
            <th>HTML</th>
            <th>SQL</th>
            <th>总成绩</th>
        </tr>
    </table>
</center>
</body>
</html>
复制代码

3.表格中删除行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历行</title>
    <script>
        function deleteScore() {
            //得到表格
            var tab = document.getElementById("tabScore");
            //得到表格中的所有行
            var rows = tab.rows;
            //计算表中数据条数
            var len = rows.length - 1;
            if(len>0){
                //通过行的索引编号删除行
                tab.deleteRow(len);
            }
            else
            {
                alert("已经没有可删除的学生成绩了！");
            }
        }
    </script>
</head>
<body>
<input type="button" value="删除最后一个学生成绩" onClick="deleteScore()">
<hr size="1px">
<table id="tabScore" width="470px" border="1px solid #003399" align="center">
    <tr bgcolor="#0099ff">
        <th>姓名</th>
        <th>Java</th>
        <th>HTML</th>
        <th>SQL</th>
        <th>总成绩</th>
    </tr>
    <tr>
        <td align="center">张三</td>
        <td align="center">87</td>
        <td align="center">92</td>
        <td align="center">79</td>
        <td align="center">258</td>
    </tr>
    <tr>
        <td align="center">李四</td>
        <td align="center">70</td>
        <td align="center">80</td>
        <td align="center">75</td>
        <td align="center">225</td>
    </tr>
</table>
</body>
</html>
复制代码

4.表格中下拉列表的联动操作设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作下拉列表的联动效果</title>
    <script>
        function choose() {
            var pSel = document.getElementById("province").value;
            var city = document.getElementById("city");
            //删除下拉列表中原有的所有徐阿娘
            city.options.length = 0;
            if( pSel == "重庆"){
                //创建下拉列表框的选项
                var cq = new Option("重庆","重庆");
                //将选项添加到下拉框中
                city.options.add(cq);
                var wz = new Option("万州","万州");
                city.options.add(wz);
                var kx = new Option("开县","开县");
                city.options.add(kx);
                var hc = new Option("合川","合川");
                city.options.add(hc);
            }
            else if( pSel == "四川"){
                //创建下拉列表框的选项
                var cd = new Option("成都","成都");
                //将选项添加到下拉框中
                city.options.add(cd);
                var djy = new Option("都江堰","都江堰");
                city.options.add(djy);
                var wc = new Option("汶川","汶川");
                city.options.add(wc);
                var ls = new Option("乐山","乐山");
                city.options.add(ls);
            }
        }

    </script>
</head>
<body>
<center>
    <select name="" id="province" onchange="choose()">
        <option value="重庆">重庆</option>
        <option value="四川">四川</option>
    </select>省（/直辖市）&nbsp;&nbsp;&nbsp;&nbsp;
    <select name="" id="city">
        <option value="重庆">重庆</option>
        <option value="万州">万州</option>
        <option value="开县">开县</option>
        <option value="合川">合川</option>
    </select>
</center>
</body>
</html>
复制代码

方法未必简便，欢迎大家留言修正，共同进步

转载于:https://juejin.im/post/5c96de786fb9a0710466aa0c

Linux????? Mr.Liyz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM中对表格的操作

DOM中对表格的操作思考：对表格操作都是对表格哪些东西进行操作？答：对表格中的属性和方法进行操作表格中有哪些常用的属性和方法？下面表格中列出了常用的表操作的属性和方法下面利用代码演示对表格的四种操作1.表格的行遍历<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫