zoukankan      html  css  js  c++  java
  • JS基础13-DOM访问表格子元素的常用属性和方法

    一、DOM访问表格子元素的常用属性和方法如下:

    caption

    返回表格的标题对象

    rows

    返回该表格里的所有表格行(数组)

    tbodies

    返回该表格里所有<tbody.../>元素组成的数组

    tfoot

    返回该表格里所有<tfoot.../>元素

    thead

    返回该表格里所有<thead.../>元素

    二、通过rows[index]返回表格指定的行所对应的属性:

     

    cells

    返回该表格行内所有的单元格组成的数组

    rowIndex

    返回该表格行在表格内的索引值

    sectionRowIndex

    返回该表格行在其所在元素(tbodythead等元素)的索引值

    三、通过cells[index]返回表格指定的列所对应的属性:

    cellIndex

    返回该单元格在表格行内的索引值

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOM访问表格子元素的常用属性和方法</title>
    <style>
        #t,tr,td{
            border: 1px solid black;
        }
        </style>
    </head>
    
    <body>
    <table id="t" border="1px">
    <caption>甲骨文练习</caption>
        <tr>
            <td>HTML</td>
            <td>JavaScript</td>
        </tr>
        <tr>
            <td>JavaSE</td>
            <td>Oracle</td>
        </tr>
        <tr>
            <td>MySQL</td>
            <td>Struts2</td>
        </tr>
    </table><br>
    <input type="button" value="表格标题" onClick="show(test.caption)">
    <input type="button" value="第一行、第一格" onClick="show(test.rows[0].cells[0])">
    <input type="button" value="第二行、第二格" onClick="show(test.rows[1].cells[1])">
    <input type="button" value="第三行、第二格" onClick="show(test.rows[2].cells[1])"><br>
    设置指定单元格的值:
    第<input type="text" id="r">行,第<input type="text" id="c">列的值为<input type="text" id="q"><input type="button" value="修改"  onClick="update()">
    <script type="text/javascript">
        var test=document.getElementById('t');
        function show(dan){
            alert(dan.innerHTML);
        }
        function update(){
            var a1=document.getElementById('r').value;//用户输入的行
            var a2=document.getElementById('c').value;
            var a3=document.getElementById('q').value;
            test.rows[a1-1].cells[a2-1].innerHTML=a3;
        }
        </script>
    </body>
    </html>

     

  • 相关阅读:
    day 34
    day 33 线程锁
    day 32 操作系统、线程和进程(GIL锁)
    day 31 网络基础的补充
    day 30 多线程 socketserver模块补充
    python自学笔记 2019/07/01
    类与对象的概念
    递归及三种二分法
    好看的颜色
    zend 汉化
  • 原文地址:https://www.cnblogs.com/LuckyGJX/p/8654759.html
Copyright © 2011-2022 走看看