HTML + CSS + JavaScript 实现简单的动态表格

墨川發表於 2020-3-2 01:55:00

HTML + CSS + JavaScript 实现简单的动态表格

<h1 id="要求"><strong>要求</strong></h1>
<p>添加一个学生信息表格，表格的信息有编号、姓名、性别三个字段，可以随意向表格中添加学生信息、删除学生信息。</p>
<h1 id="步骤分析"><strong>步骤分析</strong></h1>
<ol>
<li>定义可以向表格中添加信息的文本框和一个添加按钮</li>
<li>定义一个表格</li>
<li>给添加按钮绑定点击事件</li>
<li>获取文本框的内容</li>
<li>创建单元格，设置单元格的内容为文本框内容</li>
<li>创建表格行</li>
<li>将单元格添加到表格行中</li>
<li>获取表格对象，将表格行添加到表格中去</li>
<li>定义删除信息的方法</li>
</ol>
<h1 id="步骤实现"><strong>步骤实现</strong></h1>
<ol>
<li>
<p>定义三个文本框 + 一个添加按钮</p>
<pre><code class="language-html"><div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name"placeholder="请输入姓名">
<input type="text" id="gender"placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
</code></pre>
<p>效果如下：<br>
<img src="https://img2018.cnblogs.com/i-beta/1681961/202003/1681961-20200302004818503-1077127545.png" alt="img" loading="lazy"></p>
</li>
<li>
<p>使用CSS，对div标签进行描述：将三个文本框和一个按钮，中心对齐，边沿长度为50个像素点</p>
<pre><code class="language-css">div{
text-align: center;
margin: 50px;
}
</code></pre>
<p>效果如下：<br>
<img src="https://img2018.cnblogs.com/i-beta/1681961/202003/1681961-20200302004829388-1795867287.png" alt="img" loading="lazy"></p>
</li>
<li>
<p>定义一个表格</p>
<pre><code class="language-html"><table>

<caption>学生信息表</caption>

<tr>
   <th>编号</th>
   <th>姓名</th>
   <th>性别</th>
   <th>操作</th>
</tr>


<tr>
   <td>1</td>
   <td>令狐冲</td>
   <td>男</td>
   
   <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>


<tr>
   <td>2</td>
   <td>任我行</td>
   <td>男</td>
   
   <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>


<tr>
   <td>3</td>
   <td>岳不群</td>
   <td>?</td>
   
   <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
</tr>
</table>
</code></pre>
<p>效果如下：<br>
<img src="https://img2018.cnblogs.com/i-beta/1681961/202003/1681961-20200302005937458-2100589139.png" alt="img" loading="lazy"></p>
</li>
<li>
<p>通过CSS，对表格进行描述：表格居中，为表格创建一个方框（方框宽度为500px），方框自动向中对齐三个文本框和一个按钮</p>
<pre><code class="language-css">table{
border: 1px solid;
margin: auto;
width: 500px;
}
</code></pre>
<p>效果如下：<br>
<img src="https://img2018.cnblogs.com/i-beta/1681961/202003/1681961-20200302010459651-1013233402.png" alt="img" loading="lazy"></p>
</li>
<li>
<p>通过CSS，对表格中的行、单元格进行描述：文本信息向中对齐，每个单元格添加一个方框</p>
<pre><code class="language-css">td,th{
text-align: center;
border: 1px solid;
}
</code></pre>
<p>效果如下：<br>
<img src="https://img2018.cnblogs.com/i-beta/1681961/202003/1681961-20200302010736973-1851040600.png" alt="img" loading="lazy"></p>
</li>
<li>
<p>通过JavaScript：获取添加按钮对象</p>
<pre><code class="language-js">// 1.获取按钮
var btn_add = document.getElementById("btn_add");
</code></pre>
</li>
<li>
<p>通过JavaScript：获取文本框对象，然后通过其对象获取文本框内容</p>
<pre><code class="language-js">// 2.1 获取文本框对象
var idObject = document.getElementById("id");
var nameObject = document.getElementById("name");
var genderObject = document.getElementById("gender");
// 2.2 获取文本框的内容
var id = idObject.value;
var name = nameObject.value;
var gender = genderObject.value;
</code></pre>
</li>
<li>
<p>通过JavaScript：定义创建表格单元格的HTML</p>
<pre><code class="language-js">//3.创建单元格，赋值单元格的标签体
// id 的单元格
var td_id = document.createElement("td");          // 创建单元格
var text_id = document.createTextNode(id);          // 赋值给单元格的标签体
td_id.appendChild(text_id);
// name 的单元格
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender 的单元格
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
// a标签的单元格
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this);");
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);                      // 为a标签写入文本内容："删除"
td_a.appendChild(ele_a);                         // 为td标签添加子标签（a标签）
</code></pre>
</li>
<li>
<p>通过JavaScript：定义创建表格行的HTML，将要被创建的单元格添加到表格行</p>
<pre><code class="language-js"> // 4.创建表格行
var tr = document.createElement("tr");
// 5.添加单元格到表格行中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
</code></pre>
</li>
<li>
<p>通过JavaScript：获取表格对象，将定义好的表格行，添加到表格中</p>
<pre><code class="language-js"> // 6.获取table
var table = document.getElementsByTagName("table");
table.appendChild(tr);
</code></pre>
</li>
<li>
<p>通过JavaScript：定义删除表格行信息的方法</p>
<pre><code class="language-js">// 删除方法
function delTr(obj) {
// 获取table节点
var table = obj.parentNode.parentNode.parentNode;
// 获取te节点
var tr = obj.parentNode.parentNode;
// 删除（并返回）当前节点的指定子节点。
table.removeChild(tr);
}
</code></pre>
</li>
</ol>
<h1 id="具体实现代码如下"><strong>具体实现代码如下</strong></h1>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
   table{
         border: 1px solid;
         margin: auto;
         width: 500px;
   }
   td,th{
         text-align: center;
         border: 1px solid;
   }
   div{
         text-align: center;
         margin: 50px;
   }
</style>
</head>
<body>


<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name"placeholder="请输入姓名">
<input type="text" id="gender"placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>

<table>

<caption>学生信息表</caption>

<tr>
   <th>编号</th>
   <th>姓名</th>
   <th>性别</th>
   <th>操作</th>
</tr>


<tr>
   <td>1</td>
   <td>令狐冲</td>
   <td>男</td>
   
   <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
</tr>


<tr>
   <td>2</td>
   <td>任我行</td>
   <td>男</td>
   
   <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
</tr>


<tr>
   <td>3</td>
   <td>岳不群</td>
   <td>?</td>
   
   <td><a href="javascript:void(0);" onclick="deleteTr(this);" >删除</a></td>
</tr>
</table>

<script>
// 1.获取按钮
var btn_add = document.getElementById("btn_add");
btn_add.onclick = function() {
   // 2.1 获取文本框对象
   var idObject = document.getElementById("id");
   var nameObject = document.getElementById("name");
   var genderObject = document.getElementById("gender");
   // 2.2 获取文本框的内容
   var id = idObject.value;
   var name = nameObject.value;
   var gender = genderObject.value;

   //3.创建单元格，赋值单元格的标签体
   // id 的单元格
   var td_id = document.createElement("td");          // 创建单元格
   var text_id = document.createTextNode(id);          // 赋值给单元格的标签体
   td_id.appendChild(text_id);
   // name 的单元格
   var td_name = document.createElement("td");
   var text_name = document.createTextNode(name);
   td_name.appendChild(text_name);
   //gender 的单元格
   var td_gender = document.createElement("td");
   var text_gender = document.createTextNode(gender);
   td_gender.appendChild(text_gender);
   // a标签的单元格
   var td_a = document.createElement("td");
   var ele_a = document.createElement("a");
   ele_a.setAttribute("href","javascript:void(0);");
   ele_a.setAttribute("onclick","delTr(this);");
   var text_a = document.createTextNode("删除");
   ele_a.appendChild(text_a);                      // 为a标签写入文本内容："删除"
   td_a.appendChild(ele_a);                         // 为td标签添加子标签（a标签）

   // 4.创建表格行
   var tr = document.createElement("tr");
   // 5.添加单元格到表格行中
   tr.appendChild(td_id);
   tr.appendChild(td_name);
   tr.appendChild(td_gender);
   tr.appendChild(td_a);
   // 6.获取table
   var table = document.getElementsByTagName("table");
   table.appendChild(tr);
};

// 删除方法
function deleteTr(object) {
   // 获取table节点
   var table = object.parentNode.parentNode.parentNode;
   // 获取te节点
   var tr = object.parentNode.parentNode;
   // 删除（并返回）当前节点的指定子节点。
   table.removeChild(tr);
}

</script>

</body>
</html>
</code></pre>
<p>最终效果如下：可以删除信息，也可以添加信息</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1681961/202003/1681961-20200302015211651-611818753.png" alt="img" loading="lazy"></p>
<p><strong>也可以使用innerHTML进行添加数据，步骤类似上面所述</strong></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>

<style>
   table{
         border: 1px solid;
         margin: auto;
         width: 500px;
   }

   td,th{
         text-align: center;
         border: 1px solid;
   }
   div{
         text-align: center;
         margin: 50px;
   }
</style>

</head>
<body>


<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name"placeholder="请输入姓名">
<input type="text" id="gender"placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>

<table>

<caption>学生信息表</caption>

<tr>
   <th>编号</th>
   <th>姓名</th>
   <th>性别</th>
   <th>操作</th>
</tr>


<tr>
   <td>1</td>
   <td>令狐冲</td>
   <td>男</td>
   
   <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
</tr>


<tr>
   <td>2</td>
   <td>任我行</td>
   <td>男</td>
   
   <td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
</tr>


<tr>
   <td>3</td>
   <td>岳不群</td>
   <td>?</td>
   
   <td><a href="javascript:void(0);" onclick="deleteTr(this);" >删除</a></td>
</tr>
</table>

<script>
// 使用innerHTML添加
document.getElementById("btn_add").onclick = function() {
   // 获取文本框的内容
   var id = document.getElementById("id").value;
   var name = document.getElementById("name").value;
   var gender = document.getElementById("gender").value;

   // 获取table
   var table = document.getElementsByTagName("table");

   // 追加一行
   table.innerHTML += "<tr>\n" +
         "    <td>"+id+"</td>\n" +
         "    <td>"+name+"</td>\n" +
         "    <td>"+gender+"</td>\n" +
         "    <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
         " </tr>";
};

// 删除方法
function deleteTr(object) {
   // 获取table节点
   var table = object.parentNode.parentNode.parentNode;
   // 获取te节点
   var tr = object.parentNode.parentNode;
   // 删除（并返回）当前节点的指定子节点。
   table.removeChild(tr);
}

</script>

</body>
</html>
</code></pre>

</div>
<div id="MySignature" role="contentinfo">
<p>本文来自博客园，作者：LeeHua，转载请注明原文链接：https://www.cnblogs.com/liyihua/p/12393342.html</p><br><br>
来源：https://www.cnblogs.com/liyihua/p/12393342.html

頁: [1]

琼殿技术论坛's Archiver

HTML + CSS + JavaScript 实现简单的动态表格