js实现对table的增加行和删除行的操作方法


Posted in Javascript onOctober 13, 2016

如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript">
//添加方法
function addtr()
{
  //var trid=0;
  var tab=document.getElementByIdx_x("signFrame");
  //添加行
  var newTR = tab.insertRow(tab.rows.length);
 alert(tab.rows.length);
  //trid++;
  
  //获取序号=行索引
  var xuhao=newTR.rowIndex.toString();
 alert(xuhao);
  newTR.id = "tr" + xuhao;
  //添加列:序号
  var newNameTD=newTR.insertCell(0);
  //添加列内容
  newNameTD.innerHTML = xuhao;
  //添加列:日期
  var newNameTD=newTR.insertCell(1);
  //添加列内容
  newNameTD.innerHTML = "<input name='time" + xuhao + "' id='time" + xuhao + " size='19' onmouseover='this.style.backgroundColor=#6298E1;this.style.color=#000000;' onmouseout='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />";

  //添加列:方式
  var newEmailTD=newTR.insertCell(2);
  //添加列内容
  newEmailTD.innerHTML = "<select style='width:70px;' name='way" + xuhao + "' id='way" + xuhao + "'><option value='电话'>电话</option><option value='QQ'>QQ</option>  </select>";

  //添加列:备注
  var newTelTD=newTR.insertCell(3);
  //添加列内容
  newTelTD.innerHTML = "<input size='60' name='remark" + xuhao + "' id='remark" + xuhao + "' type='text' onclick='showid(this)' />";
    
  //添加列:删除按钮
  var newDeleteTD=newTR.insertCell(4);
  //添加列内容
  newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"deltr('tr" + xuhao + "')\">删除</a></div>";
    
}
</script>

<script type="text/javascript">
//删除其中一行
function deltr(trid)
{  //alert(trid);
  var tab=document.getElementByIdx_x("signFrame");
  var row=document.getElementByIdx_x(trid);  
  var index=row.rowIndex;//rowIndex属性为tr的索引值,从0开始 
  tab.deleteRow(index); //从table中删除

  //重新排列序号,如果没有序号,这一步省略
  var nextid;
  for(i=index;i<tab.rows.length;i++){
    tab.rows[i].cells[0].innerHTML = i.toString();
    nextid=i+1;
    remark=document.getElementByIdx_x("remark"+nextid);
    remark.id="remark";
  }
}

</script>


<script type="text/javascript">
  function showid(txt)
  {alert(txt.id);
    }

</script>
<body>
<input type="button" value="保存" onclick="addtr()" />


<table border="1px" width="70%" id="signFrame">
  <tr id="trHeader">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr id="trHeader">
    <td width="50px">序号</td>
    <td width="170px">时间</td>
    <td width="100px">方式</td>
    <td>备注</td>
    <td width="80px">操作</td>
  </tr>
  <tr id="trHeader">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr id="trHeader">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr id="trHeader">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr id="trHeader">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
</table>

 

</body>
</html>

以上就是小编为大家带来的js实现对table的增加行和删除行的操作方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
JS实现商品筛选功能
Aug 19 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 #Javascript
JS版微信6.0分享接口用法分析
Oct 13 #Javascript
js实现html table 行,列锁定的简单实例
Oct 13 #Javascript
微信小程序 SocketIO 实例讲解
Oct 13 #Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 #Javascript
使用jquery如何获取时间
Oct 13 #Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 #Javascript
You might like
PHP session会话的安全性分析
2011/09/08 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
vue二级路由设置方法
2018/02/09 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
python:动态路由的Flask程序代码
2019/11/22 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
大学新生军训自我鉴定
2014/03/18 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
DE1103使用报告
2022/04/05 无线电