js 操作table

最新推荐文章于 2021-07-06 15:24:08 发布
最新推荐文章于 2021-07-06 15:24:08 发布
阅读量984 收藏
点赞数
分类专栏： JavaScript 文章标签： table button function input border insert
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fox123871/article/details/6734061
版权

 记得以前面试的时候遇到过这样一个问题：有一个表格，然后有４个输入框，一个合并按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并。当时我从学校出来，js知识只是知道一些，根本做不到！现在想想，其实这个问题也还是考基础功夫是否扎实！大家有兴趣可以自己做做看，测下自己是不是能够做出来。题目的截图： 

第1/1列 第1/2列 第1/3列 第1/4列 第1/5列 
第2/1列 第2/2列 第2/3列 第2/4列 第2/5列 
第3/1列 第3/2列 第3/3列 第3/4列 第3/5列 
第4/1列 第4/2列 第4/3列 第4/4列 第4/5列 
第5/1列 第5/2列 第5/3列 第5/4列 第5/5列 
第6/1列 第6/2列 第6/3列 第6/4列 第6/5列 
第7/1列 第7/2列 第7/3列 第7/4列 第7/5列 
第8/1列 第8/2列 第8/3列 第8/4列 第8/5列 
第9/1列 第9/2列 第9/3列 第9/4列 第9/5列 
从第 行到 行  
从第 列到 列 

     现在做这个问题，看起来简单，但我还是花了很长时间，可能是我的思路不对吧？主要就是用js来操作html，我现在实现了添加行，删除行，添加列，删除列，但合并单元格却不能完整的实现 ，主要是表格会乱掉。现在把这个问题发出来，有兴趣的同仁可以自己在有空的时候研究下，看自己能不能做出来！主要是合并单元格的问题！也可以帮我看看合并单元格的问题。 

　我自己实现的部分代码： 

html部分 写道 
<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> 
  
生成表格，采用appendChild 写道 
function init(){ 
_table=document.getElementByIdx ("table"); 
_table.border="1px"; 
_table.width="800px"; 

for(var i=1;i<10;i++){ 
　　var row=document.createElement_x ("tr"); 
　　row.id=i; 
　　for(var j=1;j<6;j++){ 
　　　var cell=document.createElement_x ("td"); 
　　　cell.id =i+"/"+j; 
　　　cell.appendChild(document.createTextNode ("第"+cell.id+"列")); 
　　　row.appendChild (cell); 
　　} 
　　document.getElementByIdx("newbody").appendChild (row); 
　} 
} 
  
添加行，使用appendChild方法 写道 
function addRow(){ 
var length=document.getElementByIdx("table").rows.length; 
 
　　var tr=document.createElement_x("tr"); 
　　tr.id=length+1; 
　　var td=document.createElement_x("td"); 
　　for(i=1;i<4;i++){ 
　　　　td.id=tr.id+"/"+i; 
　　　　td.appendChild(document.createTextNode("第"+td.id+"列")); 
　　　　tr.appendChild(td); 

　　} 
　　document.getElementByIdx("newbody").appendChild (tr); 
} 
  
添加行的另一种方法insertRow 写道 
function addRow_withInsert(){ 
　　　varrow=document.getElementByIdx("table").insertRow( document.getElementByIdx("table").rows.length); 
　var rowCount =document.getElementByIdx("table").rows.length; 

　var countCell=document.getElementByIdx("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.getElementByIdx("newbody").deleteRow(document.getElementByIdx(document.getElementByIdx("table").rows.length).rowIndex);
} 
  
添加列，采用insertCell(列位置)方法 写道 
function addCell(){ 
 
for(var i=0;i<document.getElementByIdx("table").rows.length;i++){ 
　　var cell=document.getElementByIdx("table").rows[i].insertCell(2); 
　　cell.innerHTML="第"+(i+1)+"/"+3+"列"; 

} 
} 
  
删除列，采用deleteCell(列位置)的方法 写道 
 
function removeCell(){ 
　　for(var i=0;i<document.getElementByIdx("table").rows.length;i++){ 
　　　　document.getElementByIdx("table").rows[i].deleteCell(0); 
　　} 
} 
  
合并单元格（未实现） 写道 
我的代码有问题，主要是表格会乱掉，一直没有改好 ： 
function rebulid(){ 
var beginRow=document.getElementByIdx("beginRow").value; 
var endRow=document.getElementByIdx("endRow").value; 

var beginCol=document.getElementByIdx("beginCol").value; 
var endCol=document.getElementByIdx("endCol").value; 

var tempCol=beginRow+"/"+beginCol; 
alert(tempCol); 
var td=document.getElementByIdx(tempCol); 

 
for(var x=beginRow;x<=endRow;x++){ 
　　for(var i=beginCol;i<=endCol;i++){ 
　　　　if(x==beginRow){ 

　　　　　　document.getElementByIdx("table").rows[x].deleteCell(i+1); 

　　　　} 
　　　　else{ 

　　　　　　document.getElementByIdx("table").rows[x].deleteCell(i); 

　　　　} 

　　　} 
　　} 
　　　td.rowSpan=(endRow-beginRow)+1; 
} 

 

javascript操作table（insertRow()，deleteRow()，insertCell()，deleteCel...

 

insertRow() 方法

定义和用法

insertRow() 方法用于在表格中的指定位置插入一个新行。

语法

tableObject.insertRow(index)

返回值

返回一个 TableRow，表示新插入的行。

说明

该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。

新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。

如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。

抛出

若参数 index 小于 0 或大于等于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

例子

<html>
<head>
<script type="text/javascript">
function insRow()
  {
  document.getElementById('myTable').insertRow(0)
  }
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" οnclick="insRow()"
value="Insert new row">

</body>
</html>

 

deleteCell()

定义和用法

deleteCell() 方法用于删除表格行中的单元格（<td> 元素）。

语法

tablerowObject.deleteCell(index)

说明

参数 index 是要删除的表元在行中的位置。

该方法将删除表行中指定位置的表元。

抛出

若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

例子

<html>
<head>
<script type="text/javascript">
function delRow()
  {
  document.getElementById('myTable').deleteRow(0)
  }
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" οnclick="delRow()"
value="Delete first row">

</body>
</html>

insertCell()

定义和用法

insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。

语法

tablerowObject.insertCell(index)

返回值

一个 TableCell 对象，表示新创建并被插入的 <td> 元素。

说明

该方法将创建一个新的 <td> 元素，把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。

请注意，该方法只能插入 <td> 数据表元。若需要给行添加头表元，必须用 Document.createElement() 方法和 Node.insertBefore() 方法（或相关的方法）创建并插入一个 <th> 元素。

抛出

若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

例子

<html>
<head>
<script type="text/javascript">
function insCell()
  {
  var x=document.getElementById('tr2').insertCell(0)
  x.innerHTML="John"
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" οnclick="insCell()" value="Insert cell">

</body>
</html>

deleteCell()

定义和用法

deleteCell() 方法用于删除表格行中的单元格（<td> 元素）。

语法

tablerowObject.deleteCell(index)

说明

参数 index 是要删除的表元在行中的位置。

该方法将删除表行中指定位置的表元。

抛出

若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

例子

<html>
<head>
<script type="text/javascript">
function delCell()
  {
  document.getElementById('tr2').deleteCell(0)
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" οnclick="delCell()" value="Delete cell">

</body>
</html>

来源：http://www.w3school.com.cn/

 

项目中的应用：

<script type="text/javascript">

var trIndex = 0;

//动态增加行
unction appendConvert(){
 
  //var sel = document.getElementById("selectConvertName");
  var sel = document.getElementsByName("selectConvertName")[0];
  
  var className;
  if(null!=sel){
   for(var i = 0; i < sel.options.length; i++){
    if(sel.options[i].selected)
     className=sel.options[i].value;
   }
  }
  //数据来源于ajax，json形式。
convert.getConvertBean2Json(className,
    function(result) {
   var obj = eval('('+result+')');
   var table = document.getElementById("convertTable");
   
   var newRow = table.insertRow(trIndex+1);
   newRow.insertCell(0).innerHTML = obj.name+"<input type='button' value='删除' οnclick='deleteRow(this)'>";
   newRow.insertCell(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name' value='"+obj.name+"'>";
   if(null!=obj.paramList){
    var paramStr = "";
    for(var i = 0; i < obj.paramList.length; i++){
     paramStr = paramStr+
      "参数名："+obj.paramList[i].name+
      "；参数类型："+obj.paramList[i].type+
      "；参数值：<input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
      "<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
      "<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
    }
    newRow.insertCell(2).innerHTML = paramStr;
   }
   trIndex++;
  });
  
 }
 

//删除行
on deleteRow(r){
  var i=r.parentNode.parentNode.rowIndex;
  document.getElementById('convertTable').deleteRow(i);
  trIndex--;
 }

</script>

 

 

fox123871
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 操作table的特性
10-29
javascript操作table的特性，大家可以看下，发挥下，实现更多的功能。
js操作table导出excel
05-27
资源提供js操作html、table导出生成excel文件，代码简介易懂
JS----实用小知识-------对表格 增删 行操作
八戒的工厂
11-04 139
function addRow(){ var table=document.getElementById("mytable"); var rowindex=table.rows.length; var row=table.insertRow(rowindex); row.insertCell(0).innerHTML="3"; row.
Html+js实现表格可编辑，并能动态添加删除行 （赞）
chelen_jak的专栏
07-18 2万+
原文出处：https://blog.csdn.net/qqliang1314/article/details/41850919 （建义阅读原文） 效果如下：       功能描述：单击页面使单元格td变成可编辑状态，输入内容后，当单元格失去焦点时，保存输入的内容。 点击增加行，在table的末尾增加一行；点击删除行，删除table中最末尾的一行。         &lt;!DOCTYP...
js里面使用insertCell() onclick事件获取原控件信息
u010956354的专栏
07-08 2963
http://zhidao.baidu.com/question/39824420.html 这个是原始的比较笨的方法，这个方法一旦在tab多行的情况下就不管用了，请看下面的改进方法 应该是这个方法setAttribute("id","yourName"); 例子; function createTr(){ var tb=document.all.tb; var tr=tb.
js操作table的各种用法
u010045996的专栏
07-14 1万+
最近用做的公司内部管理系统的工时管理，需求是要在table中随意添加、删除工作项，前台全部用js控制table ,所以用到了table中常用 的集中方法。(1)得到table 中tbody 的内容 ：$('#simple-table').find('tbody').html();(2)点击td时，获取点击的行号：                        $('#simple-table tb...
JavaScript学习-操作table
且行且珍惜
11-02 1256
文章目录一、标签创建1.1 直接创建tr/td1.2 直接创建table二 、标签增加2.1 行2.2 列三、标签删除2.1 行2.2 列四、内容替换 一、标签创建 1.1 直接创建tr/td &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;
JS 对table的一些操作
光羽住一
04-20 7844
1.遍历整个table function showtable(tableId) { //获取table序号 var tab = document.getElementById(tableId); //获取行数 var rows = tab.rows; //遍历行 for(var i=1;i<rows.length;i...
js——table常用操作
a805814077的博客
12-31 1359
js中table常用操作的模板
js操作table中tr的顺序实现上移下移一行的效果
10-17
主要介绍了js操作table中tr的顺序实现上移下移一行的效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
js操作table示例(个人心得)
10-26
有一个表格，然后有4个输入框，一个合并按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并
javaScript实现table表格的一些简单操作
小福气的博客
07-06 1130
题目： JS代码如下： <script> //获取操作对象 vartbody=document.querySelector('table').firstElementChild //获取所有按钮对象 varbtns=document.querySelectorAll('button') //给第一个按钮绑定点击事件 btns[0].onclick=function(){ ...
js省市联动代码
热门推荐
fox123871的专栏
08-23 4万+
以下是JS省市联动菜单代码： 代码一： //定义 城市 数据数组 cityArray = new Array(); cityArray[0] = new Array("北京市","东城|西城|崇文|宣武
JavaScript mailto
fox123871的专栏
10-12 2万+
若您忘记了密码，可发邮件至ahref="mailto:[email protected]">[email protected]> 对于MAILTO 中文标题乱码的问题 是由于outlook的编码方式为GBK，设置HTMLmeta编码格式即可解决。   body里面换行可以这样实现，换行在URL编码里面就是“%0A” 点击一 大家知道，mailto是网页设计制作中的一个非
JS获得月最后一天和js得到一个月最大天数
fox123871的专栏
08-26 1万+
标题页 function getLastDay(year,month) { var new_year = year; //取当前的年份 var new_month = month++;//取下一个月的第
nodeValue以及其与value的区别以及JS nodeName、nodeValue、nodeType返回类型
fox123871的专栏
08-28 1万+
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。 nodeName 属性含有某个节点的名称。 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文
js 剪切板应用clipboardData
fox123871的专栏
05-30 1万+
注意：ie7，与ie8 对网页有个复制的权限，需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问。 三个方法 1.clearData(sDataFormat) 删除剪贴板中指定格式的数据。 2.ge
html tr加样式,Javascript操作table,tr,td和表格CSS样式设置小常识
最新发布
05-27
2. JavaScript操作table、tr、td的方法： 可以使用DOM操作来获取并修改table、tr、td元素的属性和内容，例如： ```javascript // 获取table元素 var table = document.getElementById("myTable"); // 获取第二行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值