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 相关文章推荐
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
js实现前端分页页码管理
Jan 06 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
javascript实现商品图片放大镜
Nov 28 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/11/07 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python实现Const详解
2015/01/27 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python常见异常分类与处理方法
2017/06/04 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python实现点云投影到平面显示
2020/01/18 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
python如何操作mysql
2020/08/17 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
会计电算化专业自荐信
2014/03/15 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP