JavaScript动态操作表格，添加，删除行、列及单元格

最新推荐文章于 2024-04-19 10:18:52 发布
最新推荐文章于 2024-04-19 10:18:52 发布
阅读量847 收藏
点赞数
文章标签： javascript table button input border function
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js动态操作表格</title>
<script language="javascript">
 function init(){  
     _table=document.getElementById("table");
_table.border="1px";
_table.width="800px";

  for(var i=1;i<6;i++){
var row=document.createElement("tr");  
row.id=i;
for(var j=1;j<6;j++){
var cell=document.createElement("td");  
cell.id=i+"/"+j;
cell.appendChild(document.createTextNode("第"+cell.id+"列"));  
row.appendChild(cell);  
}
document.getElementById("newbody").appendChild(row);  
}
 }  
 
 function rebulid(){
  var beginRow=document.getElementById("beginRow").value;/*开始行*/
var endRow=document.getElementById("endRow").value;/*结束行*/
var beginCol=document.getElementById("beginCol").value;/*开始列*/
var endCol=document.getElementById("endCol").value;/*结束列*/
var tempCol=beginRow+"/"+beginCol;/*定位要改变属性的列*/
alert(tempCol);
var td=document.getElementById(tempCol);
for(var x=beginRow;x<=endRow;x++){
for(var i=beginCol;i<=endCol;i++){
 if(x==beginRow){
document.getElementById("table").rows[x].deleteCell(i+1);
 }
 else{
    document.getElementById("table").rows[x].deleteCell(i);
 }
      }
}
td.rowSpan=(endRow-beginRow)+1;
}
 /*添加行，使用appendChild方法*/
 function addRow(){
   var length=document.getElementById("table").rows.length;
   /*document.getElementById("newbody").insertRow(length);
   document.getElementById(length+1).setAttribute("id",length+2);*/
   var tr=document.createElement("tr");
   tr.id=length+1;
   var td=document.createElement("td");
   for(i=1;i<4;i++){
    td.id=tr.id+"/"+i;
td.appendChild(document.createTextNode("第"+td.id+"列"));
tr.appendChild(td);
   
   }
  document.getElementById("newbody").appendChild(tr);  
 } 
 
 function addRow_withInsert(){
  var row=document.getElementById("table").insertRow(document.getElementById("table").rows.length);
var rowCount=document.getElementById("table").rows.length;

var countCell=document.getElementById("table").rows.item(0).cells.length;
    for(var i=0;i<countCell;i++){
 var cell=row.insertCell(i);
 
 cell.innerHTML="新"+(rowCount)+"/"+(i+1)+"列";
 cell.id=(rowCount)+"/"+(i+1);
 
 }
 }
 
 /*删除行，采用deleteRow(row Index)*/
 function removeRow(){
  document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex); 
 }
 
 /*添加列，采用insertCell(列位置)方法*/
 function addCell(){
 /*document.getElementById("table").rows.item(0).cells.length
  用来获得表格的列数
 */
    for(var i=0;i<document.getElementById("table").rows.length;i++){
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="第"+(i+1)+"/"+3+"列";

}
 }
 /*删除列，采用deleteCell(列位置)的方法*/
 function removeCell(){
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("table").rows[i].deleteCell(0);
}
}
</script>
</head>


<body onLoad="init();">
 <table  id="table" align="center">  
     <tbody id="newbody"></tbody>
 </table> 
  <div>
 <table width="800px" border="1px" align="center">
<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="添加行"/></td><td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="删除行"/></td></tr>
　　<tr><td align="center"><input type="button" id="delCell"　name="delCell"  onClick="removeCell();" value="删除列"/></td><td align="center"><input type="button"　id="addCell" name="addCell" onClick=" addCell();" value="添加列"/></td></tr>
　<tr><td align="center" colspan="2"><input type="button" id="addRows"　name="addRows"  onClick="addRow_withInsert();" value="添加行"/></td></tr>
</table>
 </div>
 <div>
  <table width="800px" border="1px" align="center">
<tr><td>从第<input type="text" id="beginRow" name="beginRow"  value=""/>行到<input type="text"  name="endRow"  id="endRow" value=""/>行</td><td rowspan="2"  id="test"><input type="button" name="hebing" id="hebing" value="合并" onClick="rebulid();"/></td></tr>
　　<tr><td>从第<input type="text" name="beginCol" id="beginCol" value=""/>列到<input type="text" name="endCol" id="endCol" value=""/>列</td></tr>
</table>
 </div>
</body>
</html>
hsany330
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript 动态创建表格
DB2菜鸟的专栏
11-24 1113
关键字: javascript 动态创建表格 利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。 1、inserRow()和insertCell()函数 insertRow()函数可以带参数，形式如下： insertRow(index)：ind
JavaScript动态操作表格实例(添加,删除行,列及单元格)
01-21
代码如下:<html><head><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″><title>js动态操作表格</title>[removed]function init(){_table=document.getElementById(“table”);_table.border=”1px”;_table.width=”800px”;for(var i=1;i<6;i++){var row=document.createElement(“tr”);row.id=
Javascript动态创建表格及删除行列的方法
10-24
主要介绍了Javascript动态创建表格及删除行列的方法,涉及javascript动态操作表格的相关技巧,需要的朋友可以参考下
JavaScript动态生成表格案例
05-23
这是一个动态生成表格的 HTML 页面，使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息，包括姓名、科目和得分，并提供了删除操作。 在页面中，先声明了一个 table 元素，并设置了 id 为 "student-table"。该表格包含了表头和表体，其中表头包含了四列：姓名、科目、成绩和操作。 在 JavaScript 脚本中，首先定义了一个数组 students 存储了几个学生的信息。然后获取了表格元素及其 tbody 元素，通过 for 循环遍历数组中的每个学生，动态创建了表格的每一行和每个单元格，并将学生的信息填充到对应的单元格中。 最后，为每行的删除操作添加了点击事件处理程序。当用户单击删除链接时，通过 this.parentNode.parentNode 找到要删除的行，再通过 tbody 删除该行。
JavaScript学习（六）——表格的动态添加与删除
张宜强的博客
08-03 2998
首先是去创建一个基本页面，上面有一个表格来展示信息 动态删除 步骤：为a标签设置一个点击事件，a标签的父节点是td，td的父节点是tr，tr的父节点是table，所以函数将a标签传入，通过parentNode可以获取父节点 定义删除函数 点击删除，可以删除表格的信息接下来实现如何动态添加信息步骤首先给添加按钮增加点击事件,在add方法中添加之后的所有操作 从输入框中获取到需要添加的属性 将属性转换为节点，这样才能添加到DOM树中，创建td节点，td节点中添加展示的属性，其余两个td节点是一样的操作 ...
使用JavaScript动态生成表格，并实现删除操作
qq_46112274的博客
12-21 1050
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=\, initial-scale=1.0"> <title>Document</t
js实现动态添加删除表格数据的两种方式
m0_56713342的博客
11-30 924
思路：先把整体的html结构写出来，table表格分为3部分，其中tbody中的内容通过节点创建出来，删除时，找到其祖先元素的节点进行remove（），表单内的各个框的值对应表格的内容。思路：先把整体的效果图写出来，再通过js渲染到页面上，每次添加一组数据就相当于给数组添加数据，删除事件用事件委托，给祖先元素绑定事件，子元素触发事件会冒泡到祖先元素。
使用 JS 对 table 对象增加/删除行、列
Damionew的博客
01-08 897
一：增加行、列 增加行 // quTableObj是一个table对象 var quTableObj=quItemBody.find(".quCoItem table.quCoChenTable"); // 行数 var rowNum = quTableObj[0].rows.length; // 列数 var colNum = quTable...
如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法）
m0_64053511的博客
02-08 8313
1方法一： 使用table的insertRow()方法插入一行，使用table.removeChild(tr)删除一行，具体的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ text-align: c.
javascript小案例-----动态生成删除表格
weixin_45904557的博客
06-11 485
javascript部分:分为4部分:1.先准备好学生数据 ,用数组存放对象2.在tbody里面创建行,有几个人就创建几行(通过数组长度得到)3.行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数4.创建有删除元素的单元格...
table动态增加删除行列
08-11
使用javascript实现table动态增加删除行列。
原生js可编辑表格实现动态添加表格行数和删除表格行数
11-11
原生js可编辑表格实现动态添加表格行数和删除表格行数
js 自定义表格的合并单元格、插入行列、删除行列
我见青山多妩媚,料青山见我应如是
09-09 2445
js 自定义表格的合并单元格、插入行列、删除行列
js动态的添加删除表格的行和列
09-10 5357
声明：本文摘自网络 js动态操作表格  function init(){       _table=document.getElementById("table");   _table.border="1px";   _table.width="800px";     for(var i=1;i    var row=document.createElem
动态添加删除行
从心开始，重新开始
03-01 132
[code="html"] function add(obj) { var username = document.form.username.value;// 姓名 var flag = -1; //性别 for(var i=0;i
使用 Fetch API 执行 GraphQL 查询和变体
ikxin的博客
04-15 1117
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
JEECG表格选中状态怎么去掉
最新发布
weixin_39031037的博客
04-19 147
官网代码（在取消选中状态的时候不生效）
js动态添加删除表格行
06-10
可以使用JavaScript动态添加和删除表格行，以下是一个简单的示例： 添加行： ```javascript // 获取表格对象 var table = document.getElementById("myTable"); // 创建一个新的行 var newRow = table.insertRow(); // 创建单元格并添加到新行 var cell1 = newRow.insertCell(); var cell2 = newRow.insertCell(); cell1.innerHTML = "内容1"; cell2.innerHTML = "内容2"; ``` 删除行： ```javascript // 获取表格对象 var table = document.getElementById("myTable"); // 删除最后一行 table.deleteRow(-1); ``` 注意，这只是一个简单的示例，实际应用中需要根据具体需求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值