1. 使用HTML实现一个页面，页面至少包含的元素如以下示例所示：标题、段落、超链接；表格、输入控件、按钮等。

   按照下面要求实现图二的网页。
    1. 使用HTML实现一个页面，页面至少包含的元素如以下示例所示：标题、段落、超链接；表格、输入控件、按钮等。

    2. 使用CSS为HTML页面元素设置样式，要求使用到id选择器、类选择器、类型选择器。

    3. 使用JavaScript为按钮实现相应的功能：添加行、删除行。

   *4. 使用课程所学的其他知识或课外知识，自主实现其他功能，例如：使用复合选择器、表格初始数据通过request请求获取、处理并显示JSON数据、使用filter、map等函数实现高级数据处理等。

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

CSDN专家-showbo 2022-03-01 17:08

关注

题主要的代码如下

<!doctype html>
<meta charset="utf-8" />
<div style="width:960px;margin:0 auto">
    <h1 style="text-align:center;background:#000;color:#fff;padding:30px 0">我的网站</h1>
    <h3>文章标题</h3>
    发表于2022.02.28
    <p>
        Loremipsum dolorsitamet consecteturadisicingtumaarumvutatemimpef

        Velit maiores? Reiciendis quis nemomaximelaboreutsequiliberotemporibuseossapientesaepe:
    </p>
    <p><a href="#">查看更多</a></p>
    <hr />
    <h3>班级花名册</h3>
    <style>
        .good th{background:#ccc}
        .good input[type=text]{width:100px}
    </style>
    <table class="good">
        <tr><th>学号</th><th>姓名</th><th>班级</th><th>操作</th></tr>
        <tbody id="trList"></tbody>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="button" value="添加" onclick="add(this)"/></td>
        </tr>
    </table>
    <script>
        var trList = document.getElementById('trList');
        function add(el) {
            var ipts = el.parentNode.parentNode.querySelectorAll('input[type=text]');
            if (ipts[0].value == '') { alert('请输入学号！'); ipts[0].focus(); return false; }
            if (ipts[1].value == '') { alert('请输入姓名！'); ipts[1].focus(); return false; }
            if (ipts[2].value == '') { alert('请输入班级！'); ipts[2].focus(); return false; }
            var tr = document.createElement('tr');
            tr.innerHTML = `
            <td>${ipts[0].value.replace(/</g, '&lt;')}</td>
            <td>${ipts[1].value.replace(/</g, '&lt;')}</td>
            <td>${ipts[2].value.replace(/</g, '&lt;')}</td>
            <td><input type="button" value="删除" onclick="remove(this)"/></td>`;
            trList.appendChild(tr);
            ipts[0].value = ipts[1].value = ipts[2].value=''
        }
        function remove(el) {
            if (confirm('确认删除？！')) {
                trList.removeChild(el.parentNode.parentNode);
            }
        }
    </script>
    <p style="text-align:center">Copyright © 2022，PTU</p>
</div>