• 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>

     

  • 相关阅读:
    【转】教你爱上Blocks(闭包)
    【转】iOS Developer:真机测试
    bzoj1231 混乱的奶牛
    bzoj2064 分裂
    洛谷P2051 中国象棋
    洛谷P2607 骑士
    洛谷P1879 玉米田
    洛谷P3694 邦邦的大合唱
    openjudge dp水题记录
    bzoj1191 超级英雄
  • 原文地址:https://www.cnblogs.com/LuckyGJX/p/8654759.html
Copyright © 2020-2023  润新知