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 相关文章推荐
Jquery焦点图实例代码
Nov 25 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 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实现搜索相似图片
2015/09/22 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
JS运动特效之链式运动分析
2018/01/24 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
python制作websocket服务器实例分享
2016/11/20 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
中青班党性分析材料
2014/02/16 职场文书
爱心捐书活动总结
2014/07/05 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
求职简历自我评价2015
2015/03/10 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
德劲DE1102数字调谐收音机机评
2022/04/07 无线电