ququjioulai
- 浏览: 58815 次
- 性别:
- 来自: 重庆
-
文章分类
最新评论
好久没写表格操作全忘了，看别人的看不懂，所以只有自己写个，没有用jquery，觉得直接用jquery写就搞不懂js是咋操作的，除了操作列每个单元格双击之后都能编辑，应该是各个浏览器都兼容吧。
main.html
弹出窗口child.html,本来想用层，可惜技术不行又懒，只能用子窗口了
顺便把源文件发上来，免得以后自己想看都找不到了，最后效果这个样子，搞不懂样式所以很丑
main.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript">
//修改tr样式
function changeCkb(myObj){
var myNode=myObj.parentNode.parentNode;
if(myObj.checked){
myNode.style.backgroundColor='#CCFFCC';
}else{
myNode.style.backgroundColor='#f8fbfc';
}
}
//鼠标移动到行改变样式
function mmove(obj){
var colorVal=obj.style.backgroundColor;
if(colorVal!='' && colorVal.charAt(0)!='#'){
colorVal=rgbHex(colorVal);
}
if(colorVal.toLowerCase()!='#CCFFCC'.toLowerCase()){
obj.style.backgroundColor='#ecfbd4';
}
}
//鼠标移走改变样式
function mout(obj){
var colorVal=obj.style.backgroundColor;
if(colorVal!='' && colorVal.charAt(0)!='#'){
colorVal=rgbHex(colorVal);
}
if(colorVal.toLowerCase()!='#CCFFCC'.toLowerCase()){
obj.style.backgroundColor='#f8fbfc';
}
}
//把16进制颜色改为rgb颜色
function rgbHex(rgb){
var regexp = /[0-9]{0,3}/g;
var re = rgb.match(regexp);//利用正则表达式去掉多余的部分，将rgb中的数字提取
var hexColor = "#";
var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
for (var i = 0; i < re.length; i++) {
var r = null, c = re[i], l = c;
var hexAr = [];
while (c > 16){
r = c % 16;
c = (c / 16) >> 0;
hexAr.push(hex[r]);
} hexAr.push(hex[c]);
if(l < 16&&l != ""){
hexAr.push(0)
}
hexColor += hexAr.reverse().join('');
}
return hexColor;
}
//选中全部 all unAll
function chkBtn(text){
var chk=document.getElementsByName("ckbdel");
for(var i=0;i<chk.length;i++){
var myNode=chk[i].parentNode.parentNode;
if(text=='all'){
chk[i].checked=true;
myNode.style.backgroundColor='#CCFFCC';
}else if(text=='unAll'){
chk[i].checked=false;
myNode.style.backgroundColor='#f8fbfc';
}
}
}
//移动行数 up down
function chkMove(text){
var chk=document.getElementsByName("ckbdel");
var chkChild;
var num=0;
//获取最后一个勾选的
for(var i=0;i<chk.length;i++){
if(chk[i].checked==true){
chkChild=chk[i];
num++;
}
}
//勾选超过一个
if(num>1){
alert("只能勾选一个");
}else if(num==0){
alert("至少选择一个选项吧");
}else{
if(typeof(chkChild)!='undefined'){
var tdlabel=chkChild.parentNode;
var trlabel=tdlabel.parentNode;
var tbodylabel=trlabel.parentNode;
//删除多余的#text节点
var num=tbodylabel.childNodes.length;
for(var i=0;i<num;i++){
if(typeof(tbodylabel.childNodes[i])!='undefined'){
if(tbodylabel.childNodes[i].nodeType!=1){
tbodylabel.removeChild(tbodylabel.childNodes[i]);
i--;
}
}
}
if(text=='up'){
if(trlabel.previousSibling.id!='tTop'){
tbodylabel.insertBefore(trlabel,trlabel.previousSibling);
}
}else if(text=='down'){
if(trlabel.nextSibling.id!='tBottom'){
tbodylabel.insertBefore(trlabel.nextSibling,trlabel);
}
}
}else{
alert("不能再上移了，再移就上天了");
}
}
}
//把所有数据放入列表框里
function updText(obj){
var valhtml=obj.innerHTML;
if(valhtml.indexOf("<input style=")!=0){
obj.innerHTML="<input type='text' value='"+valhtml+"' style='width:60px;height:13px;'/><input type='button' value='修改' onclick='_updText(this,\"yes\")' style='height:20px;'/><input type='button' value='取消' onclick='_updText(this,\"no\")' style='height:20px;'/><input type='hidden' value='"+valhtml+"'/>";
for(var i=0;i<obj.childNodes.length;i++){
if(obj.childNodes[i].type=='hidden'){
obj.childNodes[i].value=valhtml;
}
}
}
}
//单行修改 yes为确认修改，no为取消修改，还原数据
function _updText(obj,param){
var pNode=obj.parentNode;
var val="";
var pLength=pNode.childNodes.length;
for(var i=0;i<pLength;i++){
var flag=false;
if(param=='yes'){
flag=(pNode.childNodes[0].type=='text');
}else if(param=='no'){
flag=(pNode.childNodes[0].type=='hidden');
}
if(flag){
val=pNode.childNodes[0].value;
}
pNode.removeChild(pNode.childNodes[0]);
}
pNode.innerHTML=val;
}
//插入一行数据
function insertData(){
var newWin=window.open("child.html",'插入新值',"width=400,height=300,status=yes");
newWin.title="插入新值";
}
//删除选中行
function deleteData(){
var chk=document.getElementsByName("ckbdel");
var chkChild=new Array();
//把勾选的全部获取放入数组
for(var i=0;i<chk.length;i++){
if(chk[i].checked==true){
chkChild.push(chk[i]);
}
}
for(var i=0;i<chkChild.length;i++){
var tdlabel=chkChild[i].parentNode;
var trlabel=tdlabel.parentNode;
var tbodylabel=trlabel.parentNode;
tbodylabel.removeChild(trlabel);
}
}
//添加一行数据
function addRow(arr){
var par=document.getElementById("myRable");
for(var i=0;i<par.childNodes.length;i++){
if(par.childNodes[i].nodeType!=1){
par.removeChild(par.childNodes[i]);
}
}
var tbd=par.childNodes[0];
//删除多余的#text节点
var num=tbd.childNodes.length;
for(var i=0;i<num;i++){
if(typeof(tbd.childNodes[i])!='undefined'){
if(tbd.childNodes[i].nodeType!=1){
tbd.removeChild(tbd.childNodes[i]);
i--;
}
}
}
var new_tr=document.createElement("tr");
new_tr.setAttribute("onmousemove","mmove(this)");
new_tr.setAttribute("onmouseout","mout(this)");
for(var i=0;i<arr.length;i++){
var td=new_tr.insertCell(i);
if(arr[i].type=="text"){
td.setAttribute("ondblclick","updText(this)");
}else if(arr[i].type=="select-one"){
td.setAttribute("ondblclick","updSel(this)");
}
td.innerHTML=arr[i].value;
}
new_tr.insertCell(arr.length).innerHTML="<input type='hidden' value='00"+arr[0].value+"' /><input type='checkbox' onchange='changeCkb(this)' name='ckbdel'/>";
tbd.insertBefore(new_tr,document.getElementById("tBottom"));
}
var jsonData=[];
jsonData[0]={"id":"1","name":"豆浆","age":"10","state":"很好"};
jsonData[1]={"id":"2","name":"油条","age":"100","state":"很好"};
jsonData[2]={"id":"3","name":"牛奶","age":"1000","state":"很好"};
jsonData[3]={"id":"4","name":"面包","age":"1","state":"很好"};
function downPage(){
var par=document.getElementById("myRable");
//删除那些#text
for(var i=0;i<par.childNodes.length;i++){
if(par.childNodes[i].nodeType!=1){
par.removeChild(par.childNodes[i]);
}
}
//获取tbody
var tbd=par.childNodes[0];
//删除按钮行以前的行，删到标题行就不删了
var tbtn=document.getElementById("tBottom");
var num=0;
while(num==0){
if(tbtn.previousSibling.nodeType!=1 || tbtn.previousSibling.id!='tTop'){
tbd.removeChild(tbtn.previousSibling);
}else{
num=1;
}
}
//添加新的行，想用array又觉得麻烦，懒得改了，纠结
for(var i=0;i<jsonData.length;i++){
var new_tr=document.createElement("tr");
new_tr.setAttribute("onmousemove","mmove(this)");
new_tr.setAttribute("onmouseout","mout(this)");
var td=new_tr.insertCell(0);
td.innerHTML=jsonData[i].id;
td.setAttribute("ondblclick","updText(this)");
var td=new_tr.insertCell(1);
td.innerHTML=jsonData[i].name;
td.setAttribute("ondblclick","updText(this)");
var td=new_tr.insertCell(2);
td.innerHTML=jsonData[i].age;
td.setAttribute("ondblclick","updText(this)");
var td=new_tr.insertCell(3);
td.innerHTML=jsonData[i].state;
td.setAttribute("ondblclick","updSel(this)");
new_tr.insertCell(jsonData.length).innerHTML="<input type='hidden' value='00"+jsonData[i].id+"' /><input type='checkbox' onchange='changeCkb(this)' name='ckbdel'/>";
tbd.insertBefore(new_tr,document.getElementById("tBottom"));
}
}
//------------------------------------------------------------------------------------------------------------------
var selVal=new Array();
var json=[{"name":"很好","value":"很好"},{"name":"不好","value":"不好"},{"name":"好毛线","value":"好毛线"}];
function updSel(obj){
var sel=document.createElement("select");
var text=obj.innerHTML;
var selected=0;
for(var i=0;i<json.length;i++){
var opt=new Option(json[i].name,json[i].value);
//根据text设置option选择项，这里是为了方便显示，只获取值就不用通过这种方法
if(json[i].name==text){
opt.setAttribute("selected","selected")
}
sel.add(opt,null);
}
var nodeHtml="<input type='button' value='修改' onclick='_updSel(this,\"yes\")' style='height:20px;'/>";
nodeHtml+="<input type='button' value='取消' onclick='_updSel(this,\"no\")' style='height:20px;'/>";
nodeHtml+="<input type='hidden' value='"+text+"'/>";
obj.innerHTML="";
obj.appendChild(sel);
obj.innerHTML=obj.innerHTML+nodeHtml;
}
function _updSel(obj,param){
var pNode=obj.parentNode;
var val="";
var pLength=pNode.childNodes.length;
for(var i=0;i<pLength;i++){
var flag=false;
if(param=='yes'){
flag=(pNode.childNodes[0].type=='select-one');
if(flag){
var mysel=pNode.childNodes[0];
for(var j=0;j<mysel.length;j++){
if(mysel[j].value==mysel.value){
val=mysel[j].text;
}
}
}
}else if(param=='no'){
flag=(pNode.childNodes[0].type=='hidden');
if(flag){
val=pNode.childNodes[0].value;
}
}
pNode.removeChild(pNode.childNodes[0]);
}
pNode.innerHTML=val;
}
//获取选中行信息ID，本来想把id放在编号后面，后来想想也麻烦，那样要取当前节点的父节点的父节点的第一个子节点，还不如就丢旁边直接获取当前节点的前一个节点或后一个节点
function getByIds(){
var ids="勾选的编号有:";
var ckbs=document.getElementsByName("ckbdel");
var params=new Array();
//获取所有勾选的节点的父节点的父节点
for(var i=0;i<ckbs.length;i++){
if(ckbs[i].checked==true){
params.push(ckbs[i]);
}
}
if(params.length>0){
for(var i=0;i<params.length;i++){
if(params[i].previousSibling.nodeType!=1){
params[i].parentNode.removeChild(params[i].previousSibling);
}
ids+=params[i].previousSibling.value;
if(i!=(params.length-1)){
ids+="-----";
}
}
alert(ids);
}
}
//编辑当前行
function updAll(objChild){
//获取当前节点的父节点的父节点，及btn》td》tr
var obj=objChild.parentNode.parentNode;
//删除多余的#text节点
var num=obj.childNodes.length;
for(var i=0;i<num;i++){
if(typeof(obj.childNodes[i])!='undefined'){
if(obj.childNodes[i].nodeType!=1){
obj.removeChild(obj.childNodes[i]);
i--;
}
}
}
num=obj.childNodes.length-1;
for(var i=0;i<num;i++){
var valhtml=obj.childNodes[i].innerHTML;
if(valhtml.indexOf("<input style=")!=0){
obj.childNodes[i].innerHTML="<input type='text' value='"+valhtml+"' style='width:60px;height:13px;'/><input type='hidden' value='"+valhtml+"'/>";
}
}
obj.childNodes[num].innerHTML="<input type='button' onclick='updRow(this,\"yes\")' value='修改'><input type='button' onclick='updRow(this,\"no\")' value='取消'>";
}
//修改行，param yes为确认修改，no为取消修改
function updRow(obj,param){
var pNode=obj.parentNode.parentNode;
var num=pNode.childNodes.length-1;
for(var i=0;i<num;i++){
var val="";
var tdNode=pNode.childNodes[i];
var pLength=tdNode.childNodes.length;
for(var j=0;j<pLength;j++){
var flag=false;
if(param=='yes'){
flag=(tdNode.childNodes[0].type=='text');
}else if(param=='no'){
flag=(tdNode.childNodes[0].type=='hidden');
}
if(flag){
val=tdNode.childNodes[0].value;
}
tdNode.removeChild(tdNode.childNodes[0]);
}
tdNode.innerHTML=val;
}
pNode.childNodes[num].innerHTML="<input type='button' value='编辑' onclick='updAll(this)'>";
}
</script>
</head>
<body>
<table id="myRable" border="1" style="background-color: #f8fbfc;color: #000000;width: 800px;">
<tr id="tTop" onmousemove="mmove(this);" onmouseout="mout(this);">
<td width="100">编号</td>
<td width="100">姓名</td>
<td width="200">年龄</td>
<td width="200">状态</td>
<td width="200">操作</td>
</tr>
<tr onmousemove="mmove(this);" onmouseout="mout(this);">
<td ondblclick='updText(this)'>3</td>
<td ondblclick='updText(this)'>张三</td>
<td ondblclick="updText(this)">100</td>
<td ondblclick='updSel(this)'>很好</td>
<td><input type="hidden" value="003" />
<input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
</td>
</tr>
<tr onmousemove="mmove(this);" onmouseout="mout(this);">
<td ondblclick='updText(this)'>4</td>
<td ondblclick='updText(this)'>李四</td>
<td ondblclick="updText(this)">100</td>
<td ondblclick='updSel(this)'>很好</td>
<td><input type="hidden" value="004" />
<input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
</td>
</tr>
<tr onmousemove="mmove(this);" onmouseout="mout(this);">
<td ondblclick='updText(this)'>5</td>
<td ondblclick='updText(this)'>王五</td>
<td ondblclick="updText(this)">100</td>
<td ondblclick='updSel(this)'>很好</td>
<td><input type="hidden" value="005" />
<input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
</td>
</tr>
<tr onmousemove="mmove(this);" onmouseout="mout(this);">
<td ondblclick='updText(this)'>6</td>
<td ondblclick='updText(this)'>赵六</td>
<td ondblclick="updText(this)">100</td>
<td ondblclick='updSel(this)'>很好</td>
<td><input type="hidden" value="006" />
<input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
</td>
</tr>
<tr onmousemove="mmove(this);" onmouseout="mout(this);">
<td ondblclick='updText(this)'>7</td>
<td ondblclick='updText(this)'>杨七</td>
<td ondblclick="updText(this)">100</td>
<td ondblclick='updSel(this)'>很好</td>
<td><input type="hidden" value="007" />
<input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
</td>
</tr>
<tr id="tBottom">
<td colspan="5" align="right">
<input type="button" onclick="getByIds()" value="获取勾选项编号"/>
<input type="button" onclick="insertData()" value="插入"/>
<input type="button" onclick="deleteData()" value="删除"/>
<input type="button" onclick="chkMove('up')" value="上移"/>
<input type="button" onclick="chkMove('down')" value="下移"/>
<input type="button" onclick="chkBtn('all')" value="全选"/>
<input type="button" onclick="chkBtn('unAll')" value="反选"/>
</td>
</tr>
<tr>
<td colspan="5" align="right">
<a href="javascript:void(0)" onclick="downPage()">下一页</a>
</td>
</tr>
<tr>
<td>8</td>
<td>周八</td>
<td>100</td>
<td>很好</td>
<td><input type="button" value="编辑" onclick="updAll(this)"></td>
</tr>
</table>
</body>
</html>
弹出窗口child.html,本来想用层，可惜技术不行又懒，只能用子窗口了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>插入新值</title>
<script type="text/javascript">
function addData(){
var id=document.getElementById("id");
var name=document.getElementById("name");
var age=document.getElementById("age");
var state=document.getElementById("state");
var json=[];
json[0]={"type":id.type,"value":id.value};
json[1]={"type":name.type,"value":name.value};
json[2]={"type":age.type,"value":age.value};
json[3]={"type":state.type,"value":state.value};
if(window.opener){
alert(json);
window.opener.addRow(json);
}
window.close();
}
</script>
</head>
<body>
<table>
<table border="1">
<tr>
<td>编号</td>
<td><input id="id"/></td>
</tr>
<tr>
<td>姓名</td>
<td><input id="name"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input id="age"/></td>
</tr>
<tr>
<td>状态</td>
<td>
<select id="state">
<option value="很好">很好</option>
<option value="很不好">很不好</option>
<option value="好毛线">好毛线</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="插入一行" onclick="addData()"/> </td>
</tr>
</table>
</table>
</body>
</html>
顺便把源文件发上来，免得以后自己想看都找不到了，最后效果这个样子，搞不懂样式所以很丑
- table.rar (5 KB)
- 下载次数: 2
分享到：
发表评论
-
js this
2013-10-24 16:06 563js里this是指向的调用的引用对象 function t ... -
JS作用域
2013-10-24 14:11 558首先js是没有块级作用 ... -
JS变量随便写写
2013-10-21 11:54 792一般来说js全局变量分 ... -
js ++ --
2013-10-18 15:57 586前置++和--是马上执行运算 后置++和--简单点说就是当下一 ... -
关于闭包，自己理解的
2013-10-17 14:09 803其实一直没搞懂闭包啥 ... -
连续定义方法
2013-10-16 18:07 632var newFunc={}; var strs=" ... -
with
2013-10-16 14:38 516记录下，免得又忘记了 var defaultValue={ ... -
Myeclipse的jquery插件jqueryWTP安装
2013-10-12 22:05 780下载插件 jqueryWTP1.20foCN.jar 地址: ... -
aptana3安装jquery插件的两种方式
2013-10-12 11:29 1002总结了下貌似现在只有两种，其实都是用的同一个jquery开发插 ... -
jQuery的.bind()、.live()和.delegate()之间区别
2013-10-11 14:59 593原文：The Difference Between ... -
通过JS函数自动获取表单元素值的方法(转)
2013-09-16 17:26 999做ajax提交懒得组合字符串，在网上找有没自动获取表单方法，找 ... -
jquery小东西记录(3)-选择器，通配符等
2013-08-13 11:24 6101.选择器 (1)通配符： $("input ... -
javascript小东西记录
2013-07-05 17:45 698onload几种方式 window.onload=XXXX;( ... -
jquery小东西记录(2) --jquery和dom对象转换
2013-07-05 11:37 595jQuery对象转成DOM对象： 两种转换方式将一个jQue ... -
慢慢收集javascript的使用方法
2013-06-06 11:22 704子窗体改变父窗体值 parent.document.getEl ... -
jquery小东西记录(1)
2013-05-12 23:45 791$(function(){}); $(document).r ... -
select标签的操作
2010-05-20 15:33 926功能为：添加 批量添加 删除 选定后背景变色 删除后背景色变回 ... -
主副窗口传值
2009-07-14 17:19 867主窗体 <html> <head&g ... -
javascript:无聊时写的一个自动获取json值并自动生成表格，可设置表格的列标题与要表现json值的位置
2009-07-12 14:50 2143function test(){ var file ...
相关推荐
以上就是关于JS简单表格操作的基础知识。通过熟练掌握这些技能，你可以创建出具有强大交互性的数据展示页面。在实际项目中，可以结合CSS进行样式调整，让表格更加美观，同时考虑兼容性和性能优化，提升用户体验。
在探讨“javascript表格操作”的知识点时，我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素，包括但不限于创建、删除行或单元格，以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
js操作表格 实例 js操作表格 实例 js操作表格 实例
"纯js电子表格操作"这个主题涉及到使用JavaScript处理电子表格数据，如读取、解析、修改和生成Excel文件。下面将详细探讨相关的知识点。 1. **js-xlsx库**： js-xlsx是JavaScript的一个开源库，专门用于处理Excel...
总的来说，"JS简单表格列表全选反选代码"是JavaScript基础应用的一个实例，涉及到事件处理、DOM操作、遍历和逻辑判断等多个核心概念，对于初学者和有一定经验的开发者来说，都是一个很好的学习和参考素材。
3. **表格操作**： - **创建新行**：要向表格添加行，首先需要创建一个新的`<tr>`元素，然后创建`<td>`元素并设置其内容。最后，将这些元素添加到表格的`<tbody>`标签内。 - **删除行**：通过获取行的引用（例如，...
9. **数据绑定**：更高级的实现可能涉及到数据绑定，如使用MVVM框架（如Vue.js或React.js），这样可以将数据与视图分离，实现更高效且易于维护的表格操作。 10. **兼容性考虑**：在编写JavaScript代码时，要确保其...
本篇内容主要介绍了使用JavaScript进行表格操作的方法，包括创建表格、删除行与单元格、选取表格元素以及处理表格事件等。这些技术对于开发动态网页或应用程序来说是非常有用的。通过这些技术，可以实现更加灵活的...
在IT行业中，JavaScript（简称JS）通常用于网页前端交互，但通过特定的库和API，我们也能使用JS来操作Microsoft Word文档，包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能，以及相关的...
在JavaScript编程领域，实现表格（table）的编辑功能是一项常见的需求，特别是在网页应用中，用户可能需要对数据进行增删改查的操作。本插件专为此目的设计，它提供了简单的表格编辑功能，使得开发者能够快速集成到...
1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考
通过以上步骤，你可以实现一个基本的基于DOM的JavaScript表格数据操作系统。这个系统可以适应各种数据管理需求，为用户提供直观的界面和流畅的操作体验。在实际项目中，可能还需要处理更复杂的交互逻辑，如表单验证...
总的来说，"js简单树型表格控件"项目涉及到了JavaScript的基础语法、DOM操作、事件处理、数据结构以及代码组织等多个方面的知识点，对于想要掌握前端开发尤其是表格和树型结构显示的开发者来说，这是一个很好的学习...
在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`<table>`...
包括js动态表格的操作。数据的复制
在JavaScript编程中，操作表格是一项常见的任务，尤其是在网页交互和数据展示方面。...通过实践和查阅相关资源，你可以进一步提升在JavaScript表格操作方面的技能。记住，持续学习和实践是成为IT行业大师的关键。
本篇文章通过一个简单的实例，展示了如何使用JavaScript实现表格行上下移动的操作，涉及到了对页面元素节点及属性的操作技巧。 首先，我们来看一个简单的表格示例，它包含了几个表格行（`<tr>`）和单元格（`<td>`）...
在JavaScript中，操作表格是一种常见的任务，特别是在网页交互和数据展示方面。这篇博客将深入探讨如何使用JavaScript来创建、修改和操作HTML表格。首先，我们需要理解HTML表格的基本结构，包括`<table>`, `<tr>`, `...