js实现按钮
修改文件的
内容
这是js的一次作业,在网上搜了好久,搜到的要不是看不懂得,要不就是不符合题目要求的!
我自己乱搞搞出来了一个方法,现po到这里,供大家参考(我是后端方向的,前端是真不会搞,大家将就看)
<!DOCTYPE html>
<meta charset="utf-8" />
<title>网上订单</title>
<style type="text/css">
好的,针对您的问题,我可以给您提供一些思路和示例代码。
首先,我们需要创建一个表格类,来表示整个表格。这个表格类可以包含一些属性,比如表头、行数、列数等。同时,我们还需要定义一些方法,来处理表格的操作,比如添加、删除、修改行和列等。
下面是一个简单的示例代码:
```javascript
class Table {
constructor(rows, cols, header) {
this.rows = rows;
this.cols = cols;
this.header = header;
this.data = [];
// 初始化表格数据
for (let i = 0; i < rows; i++) {
let row = [];
for (let j = 0; j < cols; j++) {
row.push("");
this.data.push(row);
// 添加一行
addRow() {
let row = [];
for (let j = 0; j < this.cols; j++) {
row.push("");
this.data.push(row);
this.rows++;
// 删除一行
deleteRow(index) {
this.data.splice(index, 1);
this.rows--;
// 添加一列
addColumn() {
for (let i = 0; i < this.rows; i++) {
this.data[i].push("");
this.cols++;
// 删除一列
deleteColumn(index) {
for (let i = 0; i < this.rows; i++) {
this.data[i].splice(index, 1);
this.cols--;
// 修改单元格
setValue(row, col, value) {
this.data[row][col] = value;
// 获取单元格值
getValue(row, col) {
return this.data[row][col];
// 渲染表格
render() {
let table = document.createElement("table");
// 添加表头
let thead = document.createElement("thead");
let tr = document.createElement("tr");
for (let j = 0; j < this.cols; j++) {
let th = document.createElement("th");
th.innerHTML = this.header[j];
tr.appendChild(th);
thead.appendChild(tr);
table.appendChild(thead);
// 添加表格数据
let tbody = document.createElement("tbody");
for (let i = 0; i < this.rows; i++) {
let tr = document.createElement("tr");
for (let j = 0; j < this.cols; j++) {
let td = document.createElement("td");
td.innerHTML = this.data[i][j];
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
// 返回表格对象
return table;
// 使用示例
let table = new Table(3, 4, ["姓名", "性别", "年龄", "地址"]);
table.setValue(0, 0, "张三");
table.setValue(0, 1, "男");
table.setValue(0, 2, "20");
table.setValue(0, 3, "北京");
table.addRow();
table.setValue(3, 0, "李四");
table.setValue(3, 1, "女");
table.setValue(3, 2, "18");
table.setValue(3, 3, "上海");
table.render();
以上是一个简单的面向对象的动态表格实现,其中包括了表格的基本操作和渲染。您可以根据需要进行扩展和修改。希望能够帮助到您!