纯原生JS实现表格增删操作
53 浏览量
更新于2024-09-01
1
收藏 90KB PDF 举报
“纯原生js实现table表格的增删”
在网页开发中，有时需要使用JavaScript来处理DOM元素，特别是对于表格（table）的操作，如添加（增）和删除（删）行。本文将详细讲解如何仅使用JavaScript，不依赖jQuery等库，实现table表格的增删功能。
首先，一个基本的HTML结构是必不可少的。这里有一个包含三列的表格，带有创建（CREATE）、清除（CLEAR）和预留（GUESS）功能的按钮。CSS样式用于设置表格的边框和对齐方式。
```html
<!DOCTYPE HTML>
<html>
<head>
<title>table</title>
<meta charset='utf-8'/>
<style type="text/css">
table.base {
border-collapse: collapse;
text-align: center;
border: 1px solid black;
}
table, tr, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="main-content">
<table id="main-table" class="base">
<thead>
<tr>
<th colspan="3">This is a table for operations by javascript</th>
</tr>
<tr>
<th><input type="button" value="CREATE" id="cp_btn" onclick="createTr()"/></th>
<th><input type="button" value="CLEAR" id="cl_btn" onclick="clearTrs()"/></th>
<th><input type="button" value="GUESS" id="cl_btn"/></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
```
接下来，我们需要编写JavaScript函数来处理这些操作。首先创建一个名为`TableOperation`的“伪构造函数”（非严格意义上的构造函数，因为没有使用`new`关键字）。这个函数可以作为操作表格的基类，包含了添加行和清除所有行的功能。
```javascript
function TableOperation(tableId) {
this.table = document.getElementById(tableId);
this.trTemplate = this.table.rows[0];
}
TableOperation.prototype.createTr = function () {
var newRow = this.trTemplate.cloneNode(true);
this.table.tBodies[0].appendChild(newRow);
};
TableOperation.prototype.clearTrs = function () {
var tbody = this.table.tBodies[0];
while (tbody.firstChild) {
tbody.removeChild(tbody.firstChild);
}
};
```
在这个构造函数中，`this.table`指向了指定ID的表格，`this.trTemplate`则保存了表头行（thead中的第一行），用于后续的克隆操作。`createTr`方法通过调用`cloneNode(true)`来复制模板行，并将其添加到tbody中。`clearTrs`方法则通过迭代tbody的子节点并移除它们，实现了清除所有行的功能。
为了使用这个“伪构造函数”，需要创建一个新的实例并调用相应的方法：
```javascript
var tableOp = new TableOperation('main-table');
document.getElementById('cp_btn').addEventListener('click', function () {
tableOp.createTr();
});
document.getElementById('cl_btn').addEventListener('click', function () {
tableOp.clearTrs();
});
```
这里，我们为CREATE和CLEAR按钮分别绑定了`createTr`和`clearTrs`方法的调用。当用户点击按钮时，相应的操作就会被执行。
总结来说，实现纯原生JavaScript的表格增删功能，关键在于理解DOM操作，包括获取元素、添加和移除子节点。通过创建一个“伪构造函数”来封装这些操作，可以使得代码更加模块化和易于维护。在实际项目中，可能还需要处理更复杂的交互和兼容性问题，但以上内容提供了一个基础的实现框架。
纯原生纯原生js实现实现table表格的增删表格的增删
本文主要介绍了纯原生javascript实现table表格的增删的方法，文章底部提供了完整的代码。需要的朋友一起来看下吧
公司实习生问我table的增删操作，用jQuery很简单的实现了。又问我不使用jQuery，只使用js如何实现。
面对这种情况，我的一贯做法是‘不理解，但是支持'。
jQuery用的多了，人也懒了，但还是用js实现了这一操作，觉得难点在于IE兼容。。。
只是想找代码看看的可以跳过分析过程，文章底部附有完整代码。
以下是coding过程：
HTML结构代码结构代码
一个基本的table结构，增加了一些简单的样式，三个按钮分别对应创建、清空，和一个预留。
<!DOCTYPE HTML>
<html>
<head>
<title>table</title>
<meta charset='utf-8' />
<style type="text/css">
table.base{
border-collapse:collapse;
text-align: center;
border: 1px solid black;
}
table, tr, td, th{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="main-content">
<table id="main-table" class="base">
<thead>
<tr>
<th colspan="3">This is a table for operations by javascript</th>
</tr>
<tr>
<th>
<input type="button" value="CREATE" id="cp_btn" onclick="createTr()" />
</th>
<th>
<input type="button" value="CLEAR" id="cl_btn" onclick="clearTrs()" />
</th>
<th>
<input type="button" value="GUESS" id="cl_btn"/>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
构造函数（伪构造函数）构造函数（伪构造函数）
考虑过，创建一个隐藏的tr，基于此tr执行创建操作。为了不破坏HTML整体结构，决定通过js生成tr对象并append到页面中。
为了在页面加载完成后，再执行dom操作，所以将<script>放在代码下端</body>之前。
基于table中的tbody进行增删操作，可以先声明此全局变量
var vTbody = document.getElementById('main-table').getElementsByTagName('tbody')[0];
创建对象，可以使用document.createElement方法。
以面向对象的方式进行编程，先写构造函数（其实并不是标准的构造函数格式），从最内部的元素开始。
td中可能会有text和button等表单元素，所以先创建一个 input 的构造函数function myInput(vId, vClass, vType, vValue, vParent){}
这里有一个兼容性问题，就是IE内核不支持setAttribute(class, value)，需要使用setAttribute(className, value)，所以为了解决兼容问题，可以通过
setAttribute(class, value) for FF、Chrome..
setAttribute(className, value) for IE
这里采用的是另一种方式 .className，代码如下：
function myInput(vId, vClass, vType, vValue, vParent) {
var vInput = document.createElement('input');
if(vId) {
vInput.setAttribute('id', vId);
}
vInput.setAttribute('type', vType);
vInput.setAttribute('value', vValue);
vInput.className = vClass;
if(vParent) {
vParent.appendChild(vInput);
}
}
然后是td对象和tr对象的构造函数，大同小异，代码如下
function myTd(vId, vClass, vChild, vParent) {
var vTd = document.createElement('td');
if(vId){
vTd.setAttribute('id', vId);
}
vTd.className = vClass;
if(vChild) {
vTd.appendChild(vChild);
}
if(vParent) {
vParent.appendChild(vTd);
}
return vTd;
}
function myTr(vId, vClass, vChild, vParent) {
var vTr = document.createElement('tr');
if(vId){
vTr.setAttribute('id', vId);
}
vTr.className = vClass;
if(vChild) {
vTr.appendChild(vChild);
}
if(vParent) {
vParent.appendChild(vTr);
}
下载后可阅读完整内容，剩余4页未读，立即下载
2018-12-05 上传
2019-07-11 上传
2021-01-18 上传
本文实例为大家分享了js实现表格翻页和跳转的具体代码，供大家参考，具体内容如下
js代码里的row_num变量是显示数据的行数，修改后可改变每页显示的数量。
html代码：
| No | Name | Age |
|
<input type=button n 2021-10-24 上传 2017-05-06 上传 2019-11-11 上传 2015-06-29 上传 点击了解资源详情 点击了解资源详情 2023-06-12 上传  weixin_38702945
 最新资源
| ||
