`
xxtianxiaxing
  • 浏览: 707300 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

javaScript 操作 table tr

    博客分类：
  • web
JavaScriptJ# 
阅读更多 
  <HTML>   
  <HEAD>   
  <TITLE>真正意义上的动态插入表格</TITLE>   
  <META   NAME="Generator"   CONTENT="Microsoft   FrontPage   4.0">   
  <META   NAME="Author"   CONTENT="">   
  <META   NAME="Keywords"   CONTENT="">   
  <META   NAME="Description"   CONTENT="">   
  </HEAD>   
    
  <BODY>   
  <TABLE   width=400   id="mytable"   border=1>   
      <TR>     
          <TD   width="121">     
              <input   type="checkbox"   name="chk"   value="">   
              <input   type="text"   name="txt_0"   size="8">   
          </TD>   
          <TD   width="84">     
              <input   type="text"   name="txt_1"   size="8">   
          </TD>   
          <TD   width="83">     
              <input   type="text"   name="txt_2"   size="8">   
          </TD>   
          <TD   width="84">     
              <input   type="text"   name="txt_3"   size="8">   
          </TD>   
      </TR>   
  </TABLE>   
  <input   type="button"   value="插入下行"   onClick="add_tr(1)"   name="button">   
  <input   type="button"   value="插入上行"   onClick="add_tr(0)"   name="button">   
  <input   type="button"   value="删除行"   onClick="del_tr()"   name="button2">   
  <input   type="button"   name="move"   value="上移"   onclick="move_txt(-1)">   
  <input   type="button"   name="move2"   value="下移"   onClick="move_txt(1)">   
  </BODY>   
  </HTML>   
  <SCRIPT   LANGUAGE="vbScript">   
  <!--   
  function   get_chk(i,mc)   
  '检查所要检查的长度是多少，如果为1，则直接检查；如果大于1，则循环引用索引检查   
  '这个是一个特殊的方式，不知道为什么。   
  '返回值是停止的数值i,如果选中，则返回值为空   
  set   my_chk=document.all(mc)   
  get_chk=""   
  '如果只有一行，则用直选，如有选中，则返回值为0   
  if   i=0   then   
  if   my_chk.checked   then   
  get_chk=0   
  end   if   
  else   
  for   j=0   to   i   
  if   my_chk(j).checked   then   
  get_chk=j   
  exit   for   
  end   if   
  next   
  end   if   
  end   function   
  function   move_txt(a)   
  '移动行时，如果移动到－1的位置，则其实是跑到最后面一行，但如果移动到最后一行再下移则出错   
  set   my_tab=document.all("mytable")   
  set   my_chk=document.all("chk")   
  b=get_chk(my_tab.rows.length-1,"chk")   
  if   b<>""   and   b<>"0"   then   
  if   (b+a)<=(my_tab.rows.length-1)   then   
  my_tab.moverow   b,b+a   
  if   (b+a)>=0   then   
  my_chk(b+a).checked=true   
  else   
  my_chk(my_chk.length-1).checked=true   
  end   if   
  else   
  my_tab.moverow   b,0   
  my_chk(0).checked=true   
  end   if   
  else   
  if   b="0"   and   my_tab.rows.length>1   then   
  if   a="1"   then   
  my_tab.moverow   b,1   
  my_chk(1).checked=true   
  else   
  my_tab.moverow   0,my_tab.rows.length-1   
  my_chk(my_tab.rows.length-1).checked=true   
  end   if   
  end   if   
  end   if   
  end   function   
  function   add_tr(a)   
  set   my_tab=document.all("mytable")   
  set   my_chk=document.all("chk")   
  tab_rows=my_tab.rows.length                                 '现有行数   
  tab_cells=my_tab.cells.length                             '现有列数   
  b=get_chk(my_tab.rows.length-1,"chk")   
  '如果有被选中的行，则根据传递来的参数判断是在行前插入或在行后插入；如果没有选中，则自然插入   
  if   b<>""   then   
  '如果选中的是第一行而又是向上插入的话，那么，先在该行之后插入一行，再将两者调换   
  if   b="0"   and   a="0"   then   
  set   new_row=my_tab.insertrow(1)   
  sf_move="1"   
  else   
  set   new_row=my_tab.insertRow(b+a)           '插入一行   
  end   if   
  else   
  set   new_row=my_tab.insertRow(tab_rows)   
  end   if   
  '在新插入的行中再循环插入列，并赋值   
  for   i=0   to   my_tab.rows(0).cells.length-1   
  Set   new_cell=new_row.insertcell()   
  if   i=0   then   
  new_cell.InnerHtml="<input   type=checkbox   name=chk>"&chr(13)&"<input   type='text'   name=txt_0   size='8'>"   
  else   
  new_cell.InnerHtml="<input   type='text'   name=txt_"&i&"   size='8'>"   
  end   if   
  next   
  if   sf_move="1"   then   
  my_tab.moverow   1,0   
  if   my_tab.rows.length<=2   then   
  my_chk.checked=true   
  else   
  my_chk(1).checked=true   
  end   if   
  end   if   
  end   function   
  '检测某行的所有输入框是否有值   
  function   txt_null(s,i)   
  '如果传递来的选择框行数只有1行，则直接选；否则用索引方式   
  txt_null=false   
  if   s="0"   then   
  for   j=0   to   3   
  if   document.all("txt_"&j).value<>""   then   
  txt_null=true   
  exit   for   
  end   if   
  next   
  else   
  for   j=0   to   3   
  if   document.all("txt_"&j)(i).value<>""   then   
  txt_null=true   
  exit   for   
  end   if   
  next   
  end   if   
  end   function   
  function   del_tr()   
  set   my_chk=document.all("chk")   
  set   my_tab=document.all("mytable")   
  if   my_tab.rows.length>1   then   
  for   i=my_chk.length-1   to   0   step   -1             '倒着删除   
  if   my_chk(i).checked   then                       '检测该行中的输入框内有没有值，有则退出循环并将变量赋值为1   
  if   txt_null(my_chk.length-1,i)=true   then           '如果该行有值   
  if   msgbox("第"&i+1&"行中的输入框内有值，确认删除吗？",1,"")=1   then   
  my_tab.deleterow(i)   
  else   
  my_chk(i).checked=false   
  end   if   
  else   
  my_tab.deleterow(i)   
  end   if   
  end   if   
  next   
  end   if   
  end   function   
  //-->   
  </SCRIPT>

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript 实现table展开折叠

    javascript 实现table展开折叠,table的th部分不变，下端的tr折叠

    javascript 操作 Table 排序

    在JavaScript中，操作HTML表格（Table）进行排序是一项常见的任务，尤其在动态数据展示和用户交互中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML表格的基本结构。一个HTML...

    js动态创建table点击按钮dom table tr添加操作

    本主题主要聚焦于如何利用JavaScript动态创建一个包含表格（table）的DOM结构，并且在表格行（tr）中添加可点击的按钮。这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要...

    javascript 操作table的特性.docx

    ### JavaScript操作Table的特性 #### 一、概述 在Web开发中，`&lt;table&gt;`元素是一种常见的HTML结构，用于展示数据。随着JavaScript的发展，我们可以通过脚本来动态地控制表格的行为和外观，从而实现更加丰富的用户...

    JavaScript获取tr td 的三种方式全面总结（推荐）

    /* 第一种，原生的js，先获取table然后获取tr标签，然后遍历td */ // $('#selectIds').val(); // var table = document.getElementById(tb_table);//获取第一个表格 // var array = table.getElementsByTagName(tr...

    javascript动态添加tr节点

    本文将深入探讨如何使用JavaScript动态地向HTML表格（table）中添加`tr`（行）节点，同时结合“工具”类标签，我们可以理解这是一个关于网页开发实用技巧的主题。 首先，我们需要了解HTML表格的基本结构。一个表格...

    javascript对table的添加，删除行的操作

    在JavaScript中，对HTML表格（`&lt;table&gt;`元素）进行添加和删除行的操作是常见的前端开发任务，尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先，我们需要理解HTML表格...

    Table相关整理及Javascript操作table,tr,td

    复制代码代码如下: &lt;table cellSpacing=”0″ cellPadding=”0″ border=’1′ bordercolor=”black” xss=removed&gt;&lt;/table&gt; 很多人都有这种经历：当某个td中没有内容或者没有可见元素时，td的border也会消失。解决...

    js控制table的tr变色

    在 Web 开发中，通过 JavaScript 动态地改变表格 (`table`) 的样式是一种常见的操作。这种方式可以增强用户体验，使得数据展示更加直观、友好。本文将详细介绍如何利用 JavaScript 来实现鼠标悬停时表格行 (`tr`) ...

    jq 隐藏table中的tr或td

    在JavaScript的世界里，jQuery（简称jq）是一个非常流行的库，它极大地简化了DOM操作、事件处理和动画制作等任务。本篇文章将详细讲解如何在不预先知道table ID的情况下，使用jQuery来隐藏table中的tr或td元素，以及...

    javascript table 增加删除行,巧妙实现

    在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    jsj table tr td 增删改

    下面将详细介绍如何使用JavaScript操作`table`、`tr`和`td`元素。 首先，创建一个HTML表格非常简单，如下所示： ```html &lt;table id="myTable"&gt; &lt;tr&gt; 数据1 数据2 &lt;/tr&gt; &lt;tr&gt; 数据3 数据4 &lt;/tr&gt; &lt;/table&gt; `...

    给 Table 增加行的 JavaScript 函数

    JavaScript 作为浏览器端的主要脚本语言，提供了丰富的 API 和方法来操作 DOM 元素，包括表格。 在 HTML 中，`&lt;table&gt;`元素用于创建表格，而行由`&lt;tr&gt;`元素定义，单元格则由`&lt;td&gt;`或`&lt;th&gt;`元素表示。要使用 ...

    JavaScript的Table表格对象

    在JavaScript的世界里，Table表格对象是网页动态交互中不可或缺的一部分，尤其在处理用户数据展示和操作时。本文将深入探讨如何使用JavaScript来操作HTML中的表格元素，包括获取单元格、行的数据以及各种属性。 ...

    JavaScript Table排序

    一个HTML表格由`&lt;table&gt;`标签开始，包含若干行`&lt;tr&gt;`和单元格`&lt;td&gt;`。表头通常位于`&lt;thead&gt;`部分，而数据行在`&lt;tbody&gt;`中。例如： ```html &lt;table&gt; &lt;tr&gt; 姓名 年龄 城市 &lt;/tr&gt; &lt;tr&gt; 张三 &lt;td&gt;25 ...

    javascript 将table数据导出到excel中（支持表格线的导出）

    var rows = table.getElementsByTagName('tr'); var data = []; for (var i = 0; i ; i++) { var cells = rows[i].getElementsByTagName('td'); var rowData = []; for (var j = 0; j ; j++) { rowData.push...

    使用 JavaScript 获取 table 行号和列号

    在JavaScript编程中，表格（table）是网页布局和数据展示常用的一种元素。有时我们需要获取用户在表格中选中或点击的行号和列号，以便进行相应的操作或处理。这篇博客将详细介绍如何实现这一功能。 首先，让我们...

    JS操作table大全

    在JavaScript的世界里，HTML表格（Table）是一种常用的数据展示方式，而JS操作表格则成为网页动态交互的关键。本文将深入探讨如何使用JavaScript进行表格的创建、修改、删除以及实现一些特殊效果。 首先，我们从...

Magicbox
Global site tag (gtag.js) - Google Analytics