HTML，CSS和JavaScript三者结合的简单案例

最新推荐文章于 2022-06-28 13:27:58 发布

少季池鱼

最新推荐文章于 2022-06-28 13:27:58 发布

阅读量3.4k

点赞数 2

文章标签： css js html javascript java

本文链接：https://blog.csdn.net/weixin_45876091/article/details/113747153

版权

HTML，CSS和JavaScript三者结合的简单案例
通过三者结合实现。通过将输入框的输入内容添加至表单，每行都有对该行进行删除的超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

css代码区域

   <style>

       div{
           text-align: center;/*让三个输入框居中*/

        }
        table{
            text-align: center;/*让表格的文本居中居中*/
            margin: auto;/*让表格居中*/

        }
        td,th{
            width: 100px;/*设置单元格的长宽*/
            height: 50px;
            border: 1px solid;


        }


    </style>

HTML代码区域

</head>
<body>
<div>
    <!-- 设置三个输入框和添加按钮，并用<div>标签包裹，以便用css进行调整其属性-->
    <label for="a">编号：</label><input type="text" placeholder="请输入编号" id="a">
    <label for="b">姓名：</label><input type="text" placeholder="请输入姓名" id="b">
    <label for="c">性别：</label><input type="text" placeholder="请输入性别" id="c">
    <input type="button" value="添加" id="d" >
    <!-- 设置三个输入框和添加按钮的id值，以便用JavaScript获取其标签对象-->
</div>
<!--表单-->
<table id="e"  >
    <!--表单的标题-->
    <caption>学生信息表</caption>
    <tr> <!--头单元格用<th>标签可使文本居中并加粗-->
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <!-- 设置超链接的href="javascript:void(0)",用于让超链接有其可点击功能，但没有跳转功能-->
        <!-- 设置超链接的属性onclick="del(this)",用于绑定单击事件（在这里为单击便删除该行），并调用方法del(this)-->
        <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
    </tr> <tr>
    <td>编号</td>
    <td>姓名</td>
    <td>性别</td>
    <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</table>

JavaScript代码区域

<script>
    //获取添加按钮的对象
    var elementById = document.getElementById("d");
    //让添加按钮绑定点击事件
    elementById.onclick=function (){
        //通过id获取三个<input>标签的对象
        var elementById1 = document.getElementById("a");
        var elementById2 = document.getElementById("b");
        var elementById3 = document.getElementById("c");
        //获取三个input标签的value值
        var value1 = elementById1.value;
        var value2 = elementById2.value;
        var value3 = elementById3.value;
         //通过id获取table对象
         简单方法
        var elementById4 = document.getElementById("e");
        通过HTMLDOM方法innerHTML，用table对象调用该方法并用"+="（意为再原有table表格的基础上在加内容）
          elementById4.innerHTML+="<tr>\n" +
            "    <td>"+value1+"</td>\n" +
            "    <td>"+value2+"</td>\n" +
            "    <td>"+value3+"</td>\n" +
            "    <td><a href=\"javascript:void(0)\" οnclick=\"del(this)\">删除</a></td>\n" +
            "</tr>"
            比较繁琐方法
        /*   //创建标签tr对象(即创建一行)
        var htmlTableRowElement = document.createElement("tr");
        //创建标签td对象（即创建4个单元格，因为案例是4列）
        var htmlTableDataCellElement1 = document.createElement("td");
        var htmlTableDataCellElement2 = document.createElement("td");
        var htmlTableDataCellElement3 = document.createElement("td");
        var htmlTableDataCellElement4 = document.createElement("td");
        //创建标签tr对象(即创建一个超链接)
        var htmlAnchorElement = document.createElement("a");
        htmlAnchorElement.href="javascript:void(0)";//对其的href属性赋值为javascript:void(0)
        htmlAnchorElement.setAttribute("onclick", "del(this)");//对其进行添加属性onclick,并调用删除方法
        htmlAnchorElement.innerHTML="删除";//设置标签文本为删除
        //对四个单元格的文本内容进行赋值，值为input标签获取值（即我们输入的值）
        htmlTableDataCellElement1.innerHTML=value1;
        htmlTableDataCellElement2.innerHTML=value2;
        htmlTableDataCellElement3.innerHTML=value3;

        /!*
        var text = document.createTextNode(value1);
        htmlTableDataCellElement1.appendChild(text);
        这是另一种方式，即创建一个文本结点并将其文本赋值为获取的value1，
        再把该文本结点添加为tr的子节点（即添加为单元格的内容）
         *!/
        //在一行的第四个单元格中添加子节点超链接
        htmlTableDataCellElement4.appendChild(htmlAnchorElement);
        //在一行中添加子节点单元格
        htmlTableRowElement.appendChild(htmlTableDataCellElement1);
        htmlTableRowElement.appendChild(htmlTableDataCellElement2);
        htmlTableRowElement.appendChild(htmlTableDataCellElement3);
        htmlTableRowElement.appendChild( htmlTableDataCellElement4);
        //通过id获取table对象
        var elementById4 = document.getElementById("e");
        //在已创建的table表格标签中添加一行
        elementById4.appendChild(htmlTableRowElement) ;
*/
    }
    //单击超链接删除，删除一行的方法
    function del (obj) {//obj代表超链接自身对象
        //通过超链接标签与其他标签的嵌套关系，获取表格对象
        var parentElement = obj.parentNode.parentNode.parentNode;
        parentElement.removeChild(obj.parentNode.parentNode);//删除行对象
    }

</script>