今天偶然发现表格隐藏行和列挺好用的,觉得还不错,下面是隐藏和显示table行、隐藏table列(显示的类同)的js函数,直接调用这些函数就可以实现表格行和列的显示和隐藏。
1.显示行
function setShowRow(oTable,iRow){
    oTable.rows[iRow].style.display = oTable.rows[iRow].style.display = "block";
}
2.隐藏行
function setHiddenRow(oTable,iRow){
    oTable.rows[iRow].style.display = oTable.rows[iRow].style.display = "none";
}

3.隐藏列
function setHiddenCol(oTable,iCol)
{
    for (i=0;i < oTable.rows.length ; i++)
    {
       oTable.rows[i].cells[iCol].style.display =        
                  oTable.rows[i].cells[iCol].style.display=="none";
//如果该列隐藏则让其显示,反之则让其隐藏
//oTable.rows[i].cells[iCol].style.display=="none"?"block":"none";
       }
}
oTable为表的id,iRow和iCol是从0开始的,iRow=0表示的是第一行,iCol=0表示的是第一列。

例如:
     <table>
        <tr>
          <td width="15%">Country</td>
          <td width="35%" height="30"><select name="type" id="type"οnchange="selectType();" style="height:20;width:150" >
            <option value="China" <c:if test="${type == 'China'}">selected</c:if>>中国</option>
           <option value="A" <c:if test="${type == 'A'}">selected</c:if>>美国</option>            
            </td>
          </tr>
       </table>

<table id="table1" width="100%">
         <tr>
           <td width="15%">时间</td>
           <td width="35%" height="30"><s:textfield id="time" name="time"  maxlength="20"         cssStyle="width:150" /></td>         
            </tr>

<tr>
             <td width="15%">地点</td>
             <td width="35%" height="30"><s:select id="address" name="address"                   list="addressList"  οnblur="findStorage()"  cssStyle="height:20;width:150" />
             <td width="15%">人物</td>
             <td width="35%" height="30"><s:textfield id="person" name="person"                 cssStyle="width:150" disabled="true" /></td>
           </tr>
        </table>

<script type="text/javascript">
//显示某一行
function setShowRow(oTable,iRow){
    oTable.rows[iRow].style.display = oTable.rows[iRow].style.display = "block";
}
//隐藏某一行
function setHiddenRow(oTable,iRow){
    oTable.rows[iRow].style.display = oTable.rows[iRow].style.display = "none";
}
//选择某一类型时,显示所要显示的行
function selectType(){
    var obj = $('type').value;
    var oTable = document.getElementByIdx_x('Table1');
    if(obj=='China'){
        setHiddenRow(oTable,0);//隐藏id=Table1的第1行数据
        setShowRow(oTable,1);//显示id=Table1的第2行数据
    }
  if(obj=='A'){
        setShowRow(oTable,0);//显示id=Table1的第1行数据
        setHiddenRow(oTable,1);//隐藏id=Table1的第2行数据
    }
}

table的行和列的隐藏和显示相关推荐

  1. Aspose.Cells 隐藏行和列(隐藏单行、隐藏多行、隐藏单列、隐藏多列

    1 隐藏单行 1.1 HideRow(int row) Workbook workbook=new Workbook(); WorkSheet worksheet=workbook.WorkSheet ...

  2. html表格table冻结行和列

    2019独角兽企业重金招聘Python工程师标准>>> 转自http://liyinlei.iteye.com/blog/2077714 这种固定行列的方式只适用于IE,并且只适用于 ...

  3. 动态隐藏ALV的行和列

    本例和行列例程转换不同,内表结构是固定的,仅仅是通过ALV的fieldcat和Filter来隐藏/显示ALV的行和列 列: FORM changefield .   LOOP AT gt_fieldc ...

  4. excel隐藏不需要的所有行和列

    常看到别人做的excel只显示需要的行和列,其他都是空白,一直没搞懂怎么实现的,其实很简单,转抄一下. 1.首先选中你要显示的最后一列的下一列:如你只想显示D列以前的内容,则选到E列,然后按住ctrl ...

  5. tableWidget隐藏行和列

    要隐藏tableWidget指定行和列,代码如下 // 隐藏列 ui->tableWidget->setColumnHidden(0, true); // 隐藏第一列 ui->tab ...

  6. Qtablewidget隐藏行和列

    要隐藏Qtablewidget指定行和列,代码如下 // 隐藏列 ui->tableWidget->setColumnHidden(0, true); // 隐藏第1列 ui->ta ...

  7. element table表格合并行和列

    element-ui 官网案例: table合并行或列 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当前行号row ...

  8. html表格显示列与隐藏列_在宽表上隐藏/显示HTML表格列

    html表格显示列与隐藏列 I was recently asked to create an report based on an HTML table. The report needed to ...

  9. excel隐藏了列数和行数_快速隐藏Excel行和列

    excel隐藏了列数和行数 In some of my Excel workbooks there are calculation rows or columns that are required ...

最新文章

  1. util.Date与sql.Date的相互转换以及区别
  2. Java实现读取pdf文件内容(how to read pdf in java)
  3. 双向TVS二极管 8KP33CA参数详解
  4. 全面讲解OpenStack技术知识
  5. 河南洛阳计算机操作题,洛阳中招理化生实验操作考试、信息技术考试下月1日开考...
  6. 当强人工智能时代来临,哪些人不会失业?
  7. Android 系统(242)---Android init.rc执行顺序
  8. 【软件测试】边界测试中所选择的输入测试数据一定是有效数据(错)
  9. [js高手之路] dom常用节点属性兼容性详解与应用
  10. 18年6月英语六级第一套听力单词
  11. safari打不开cookies_从Mac和iOS上的safari阻止cookies的设置方法
  12. 看了它就能看懂心电图室大部分心电图
  13. win7台式计算机型号怎么查,win7系统电脑查看主板型号的四种方法
  14. OPPO手机设备安装谷歌服务套件GMS,使用Play商店
  15. 公众号多题库查题系统
  16. WorkLess可量化的团队协作软件源码下载
  17. Nett源码剖析ServerBootstrap的设置2021SC@SDUSC
  18. [连载] 深入理解Java虚拟机(JVM高级特性与最佳实践)之 【走近Java】
  19. 越权漏洞简介及靶场演示
  20. 电子商务复习笔记二:电子商务相关知识与技术

热门文章

  1. # CF #808 Div.2(A - C)
  2. 给初学者:用VB写外挂 ———— 序言
  3. 怎样换通达信服务器文件夹,通达信的指标模版保存在那个文件夹,如何迁移
  4. STM32WB55使用————Zigbee信息收发
  5. Qt,C++多功能二维码实现,绘制与解析
  6. adobe 安装需要帐号
  7. 【近几天电脑经常蓝屏后重启,蓝屏时提供错误代码,本文是解决电脑蓝屏问题的记录,看到最后希望对大家有用。】
  8. 网页版outlook邮箱慢如蜗牛登不上,解决办法
  9. 解决vscode电脑卡顿问题
  10. oracle创建列默认值,表列添加默认值的方法