Rumah > Artikel > hujung hadapan web > 分享一个用js 写一个可变的表格的代码
分享一个用js 写一个可变的表格的代码
- PHPzasal
- 2017-04-04 14:09:011446semak imbas
本文分享一个用js 写一个可变的表格的代码，希望对大家有帮助！
table.html
<html> <head> <title>js table</title> <meta charset="utf-8"> <script src="js.js"></script> </head> <body> <button onclick="jianbiao()">创建表格</button> <button onclick="jianhang()">添加行</button> </body> </html>
js.js
/**************************************
任务：
1.创建Table，并将Table添加到Body当中
2.向Table中添加行TableRow
3.向TableRow中添加单元格TableCell
4.在TableCell中，添加innerHTML的内容，比如数字，文本，编辑框，按钮等
5.从table中删除一行
6.可视化编辑TableRow中的内容
***************************************/
function jianbiao() {
// body...
var mytable=document.createElement('table');
mytable.border='1';
mytable.id='mytable';
document.body.appendChild(mytable);
var row=mytable.insertRow(0);
var cell1=row.insertCell(0);
cell1.innerHTML="描述1";
var cell2=row.insertCell(1);
cell2.innerHTML="描述1";
var cell3=row.insertCell(2);
cell3.innerHTML="描述1";
var cell4=row.insertCell(3);
cell4.innerHTML="描述1";
}
function jianhang(){
var mytable=document.getElementById('mytable');
var rowCount=mytable.rows.length;
var row=mytable.insertRow(rowCount);
var cell1=row.insertCell(0);
cell1.innerHTML="这个单元格的坐标是(0,"+ rowCount +")";
var cell2=row.insertCell(1);
cell2.innerHTML="(1,"+ rowCount +")";
var cell3=row.insertCell(2);
cell3.innerHTML="<input type='text' />";
var cell4=row.insertCell(3);
cell4.innerHTML="<button onclick='gengxin(this.parentNode.parentNode.rowIndex)'/>修改</button><button onclick='delet(this.parentNode.parentNode.rowIndex)'>删除</button>";
}
function gengxin (argument) {
var mytable=document.getElementById('mytable');
var row=mytable.rows[argument];
var cell=row.cells[1];
cell.innerHTML="修改之后";
}
function delet (argument) {
var mytable=document.getElementById('mytable');
mytable.deleteRow(argument);
}
Atas ialah kandungan terperinci 分享一个用js 写一个可变的表格的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：javascript模块化编程详解Artikel seterusnya：分享JavasScript 简单错误总结 错误调试