JavaScript Table Object : สอน method และ property ของ Table Object, เรียน method และ property ของ Table Object
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • Table() ใช้สร้าง table object
    write() ใช้กำหนดให้แสดงตาราง ตรงหน้าเอกสาร
    set() ใช้กำหนดค่าข้อมูลให้กับ table
    setValue() ใช้กำหนดค่าข้อมูลให้กับ table ในแถวและคอลัมน์ที่กำหนด
    getValue() ใช้คืนค่าค่าข้อมูลของ table ในแถวและคอลัมน์ที่กำหนด
    createCaption() ใช้สร้าง element caption ให้กับ table
    deleteCaption() ใช้ลบ element caption ออกจาก table
    createTHead() ใช้ลบ element thead ให้กับ table
    deleteTHead() ใช้ลบ element thead ออกจาก table
    createTFoot() ใช้ลบ element tfoot ให้กับ table
    deleteTFoot() ใช้ลบ element tfoot ออกจาก table
    insertRow() ใช้เพิ่มแถว ให้กับ table ในตำแหน่งแถวที่กำหนด
    deleteRow() ใช้ลบแถว ออกจาก table ในตำแหน่งแถวที่กำหนด
    tHead ใช้อ้างถึง element thead แบบ array
    tBodies ใช้อ้างถึง element tbody แบบ array
    tFoot ใช้อ้างถึง element tfoot แบบ array
    rows ใช้อ้างถึง element tr แบบ array
    id ใช้กำหนดค่า หรือคืนค่า id ของ table
    caption ใช้กำหนดค่า หรือคืนค่า caption ของ table
    summary ใช้กำหนดค่า หรือคืนค่า summary ของ table
    background ใช้กำหนดค่า หรือคืนค่า url ของรูปภาพ ที่เป็นพื้นหลังของ table
    bgColor ใช้กำหนดค่า หรือคืนค่า สีพื้นหลังของ table
    frame ใช้ตรวจสอบว่า table มีการแสดงเส้นขอบหรือไม่
    border ใช้กำหนดค่า หรือคืนค่า ขนาดเส้นขอบของ table
    borderColor ใช้กำหนดค่า หรือคืนค่า สีเส้นขอบของ table
    rules ใช้กำหนดค่า หรือคืนค่า รูปแบบของเส้นขอบของ table
    width ใช้กำหนดค่า หรือคืนค่า ความกว้างของ table
    height ใช้กำหนดค่า หรือคืนค่า ความสูงของ table
    cellPadding ใช้กำหนดค่า หรือคืนค่า ระยะห่างระหว่างข้อมูลกับเส้นขอบของ table
    cellSpacing ใช้กำหนดค่า หรือคืนค่า ระยะห่างระหว่างเส้นขอบของ table
    align ใช้กำหนดค่า หรือคืนค่า ตำแหน่งของข้อมูลใน table เมื่อเทียบจากแนวนอน
    vAlign ใช้กำหนดค่า หรือคืนค่า ตำแหน่งของข้อมูลใน table เมื่อเทียบจากแนวตั้ง
    accessKey ใช้กำหนดค่า หรือคืนค่า คีย์ลัด ( จากการกด alt + key ) ของ table
    disabled ใช้ตรวจสอบ ว่า table นี้ disabled อยู่หรือไม่
    onfocus ใช้กำหนดให้ function ทำงานเมื่อ table ได้รับ focus
    onblur ใช้กำหนดให้ function ทำงานเมื่อ table สูญเสีย focus
    onclick ใช้กำหนดให้ function ทำงานเมื่อ table ถูก click
    onselectstart ใช้กำหนดให้ function ทำงานเมื่อ มีการเริ่มลากแถบสีคลุมข้อความใน table
    insertRow() ใช้เพิ่มแถวเข้าไปใน element tbody ในตำแหน่งที่กำหนด
    deleteRow() ใช้ลบแถวออกจาก element tbody ในตำแหน่งที่กำหนด
    rows ใช้อ้างถึง element tr ของ element tbody แบบ array
    insertCell() ใช้เพิ่มคอลัมน์เข้าไปใน element tr ในตำแหน่งที่กำหนด
    deleteCell() ใช้ลบคอลัมน์ออกจาก element tr ในตำแหน่งที่กำหนด
    cells ใช้อ้างถึง element td ของ element tr แบบ array
  • method :
    Table ( row, col );

    return type :
    table

    content :
    ใช้สร้าง table object

    example :
    var table = new Table ( 5, 10 );

  • method :
    write ( document );

    return type :
    void

    content :
    ใช้กำหนดให้แสดงตาราง ตรงหน้าเอกสาร

    example :
    var table = new Table ( 5, 3 );
    table.write( document );

  • method :
    set ( string_array );

    return type :
    void

    content :
    ใช้กำหนดค่าข้อมูลให้กับ table

    example :
    var table = new Table ( 5, 3 );
    var arr = new Array ( "bamboo", "lab", "code", "dot", "com" );
    table.set( arr );

  • method :
    setValue ( row, col, value );

    return type :
    void

    content :
    ใช้กำหนดค่าข้อมูลให้กับ table ในแถวและคอลัมน์ที่กำหนด

    example :
    var table = new Table ( 5, 3 );
    table.setValue( 3, 2, "BambooLabCode" );

  • method :
    getValue ( row, col );

    return type :
    string

    content :
    ใช้คืนค่าค่าข้อมูลของ table ในแถวและคอลัมน์ที่กำหนด

    example :
    var table = new Table ( 5, 3 );
    alert ( table.getValue( 3, 2 ) );

  • method :
    createCaption ();

    return type :
    void

    content :
    ใช้สร้าง element caption ให้กับ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.createCaption();

  • method :
    deleteCaption ();

    return type :
    void

    content :
    ใช้ลบ element caption ออกจาก table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.deleteCaption();

  • method :
    createTHead ();

    return type :
    void

    content :
    ใช้ลบ element thead ให้กับ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.createTHead();

  • method :
    deleteTHead ();

    return type :
    void

    content :
    ใช้ลบ element thead ออกจาก table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.deleteTHead();

  • method :
    createTFoot ();

    return type :
    void

    content :
    ใช้ลบ element tfoot ให้กับ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.createTFoot();

  • method :
    deleteTFoot ();

    return type :
    void

    content :
    ใช้ลบ element tfoot ออกจาก table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.deleteTFoot();

  • method :
    insertRow ( position );

    return type :
    void

    content :
    ใช้เพิ่มแถว ให้กับ table ในตำแหน่งแถวที่กำหนด

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.insertRow( 1 );

  • method :
    deleteRow ( position );

    return type :
    void

    content :
    ใช้ลบแถว ออกจาก table ในตำแหน่งแถวที่กำหนด

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.deleteRow( 1 );

  • property :
    tHead;

    return type :
    node array

    content :
    ใช้อ้างถึง element thead แบบ array

    example :
    var tagTable = document.getElementById( "bamboo" );
    alert ( tagTable.tHead.item(0).tagName );

  • property :
    tBodies;

    return type :
    node array

    content :
    ใช้อ้างถึง element tbody แบบ array

    example :
    var tagTable = document.getElementById( "bamboo" );
    alert ( tagTable.tBodies.item(0).tagName );

  • property :
    tFoot;

    return type :
    node array

    content :
    ใช้อ้างถึง element tfoot แบบ array

    example :
    var tagTable = document.getElementById( "bamboo" );
    alert ( tagTable.tFoot.item(0).tagName );

  • property :
    rows;

    return type :
    node array

    content :
    ใช้อ้างถึง element tr แบบ array

    example :
    var tagTable = document.getElementById( "bamboo" );
    alert ( tagTable.rows.item(0).tagName );

  • property :
    id;

    return type :
    node array

    content :
    ใช้กำหนดค่า หรือคืนค่า id ของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    alert ( tagTable.id );

  • property :
    caption;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า caption ของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.caption = "table of graph bamboolabcode";

  • property :
    summary;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า summary ของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.summary = "summary of table bamboolabcode";

  • property :
    background;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า url ของรูปภาพ ที่เป็นพื้นหลังของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    alert ( tagTable.background );

  • property :
    bgColor;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า สีพื้นหลังของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    alert ( tagTable.bgColor );
    

  • property :
    frame;

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า table มีการแสดงเส้นขอบหรือไม่

    example :
    var tagTable = document.getElementById( "bamboo" );
    if ( tagTable.frame )
    {
         alert ( "table have border" );
    }

  • property :
    border;

    return type :
    number, void

    content :
    ใช้กำหนดค่า หรือคืนค่า ขนาดเส้นขอบของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.border = "5px";

  • property :
    borderColor;

    return type :
    number, void

    content :
    ใช้กำหนดค่า หรือคืนค่า สีเส้นขอบของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.borderColor = "#ffffff";

  • property :
    rules;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า รูปแบบของเส้นขอบของ table
    โดยค่าที่เป็นไปได้คือ cols หมายถึงให้แสดงเส้นในแนวตั้ง
    และ rows หมายถึงให้แสดงเส้นในแนวนอน

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.rules = "cols";

  • property :
    width;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า ความกว้างของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.width = "500px";

  • property :
    height;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า ความสูงของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.height = "200px";

  • property :
    cellPadding;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า ระยะห่างระหว่างข้อมูลกับเส้นขอบของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.cellPadding = "2px";

  • property :
    cellSpacing;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า ระยะห่างระหว่างเส้นขอบของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.cellSpacing = "4px";
    

  • property :
    align;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า ตำแหน่งของข้อมูลใน table เมื่อเทียบจากแนวนอน
    โดยค่าที่เป็นไปได้คือ left, right, center

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.align = "left";

  • property :
    vAlign;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า ตำแหน่งของข้อมูลใน table เมื่อเทียบจากแนวตั้ง
    โดยค่าที่เป็นไปได้คือ top, bottom, center

    example :
    var tagTable = document.getElementById( "bamboo" );
    tagTable.vAlign = "bottom";

  • property :
    accessKey;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า คีย์ลัด ( จากการกด alt + key ) ของ table

    example :
    var tagTable = document.getElementById( "bamboo" );
    alert ( tagTable.accessKey );
    

  • property :
    disabled;

    return type :
    boolean

    content :
    ใช้ตรวจสอบ ว่า table นี้ disabled อยู่หรือไม่

    example :
    var tagTable = document.getElementById ( "bamboo" );
    if ( tagTable.disabled )
    {
         alert ( "table disabled" );
    }

  • property :
    onfocus = function;

    return type :
    void

    content :
    ใช้กำหนดให้ function ทำงานเมื่อ table ได้รับ focus

    example :
    var tagTable = document.getElementById ( "bamboo" );
    tagTable.onload = function()
    {
         alert ( "table gain focus" );
    }

  • property :
    onblur = function;

    return type :
    void

    content :
    ใช้กำหนดให้ function ทำงานเมื่อ table สูญเสีย focus

    example :
    var tagTable = document.getElementById ( "bamboo" );
    tagTable.onblur = function()
    {
         alert ( "table loss focus" );
    }

  • property :
    onclick = function;

    return type :
    void

    content :
    ใช้กำหนดให้ function ทำงานเมื่อ table ถูก click

    example :
    var tagTable = document.getElementById ( "bamboo" );
    tagTable.onclick = function()
    {
         alert ( "table be clicked" );
    }

  • property :
    onselectstart = function;

    return type :
    void

    content :
    ใช้กำหนดให้ function ทำงานเมื่อ มีการเริ่มลากแถบสีคลุมข้อความใน table

    example :
    var tagTable = document.getElementById ( "bamboo" );
    tagTable.onselectstart = function()
    {
         alert ( "table be selected" );
    }

  • method :
    insertRow ( position );

    object :
    tbody

    return type :
    void

    content :
    ใช้เพิ่มแถวเข้าไปใน element tbody ในตำแหน่งที่กำหนด

    example :
    var tagTable = document.getElementById ( "bamboo" );
    tagTable.tBodies.item(0).insertRow(0);

  • method :
    deleteRow ( position );

    object :
    tbody

    return type :
    void

    content :
    ใช้ลบแถวออกจาก element tbody ในตำแหน่งที่กำหนด

    example :
    var tagTable = document.getElementById ( "bamboo" );
    tagTable.tBodies.item(0).deleteRow(0);

  • property :
    rows;

    object :
    tbody

    return type :
    node array

    content :
    ใช้อ้างถึง element tr ของ element tbody แบบ array

    example :
    var tagTable = document.getElementById ( "bamboo" );
    alert ( tagTable.tBodies.item(0).rows.item(0).tagName );

  • method :
    insertCell ( position );

    object :
    tr

    return type :
    void

    content :
    ใช้เพิ่มคอลัมน์เข้าไปใน element tr ในตำแหน่งที่กำหนด

    example :
    var tagTable = document.getElementById ( "bamboo" );
    tagTable.tBodies.item(0).rows.item(0).insertCell(3);

  • method :
    deleteCell ( position );

    object :
    tr

    return type :
    void

    content :
    ใช้ลบคอลัมน์ออกจาก element tr ในตำแหน่งที่กำหนด

    example :
    var tagTable = document.getElementById ( "bamboo" );
    tagTable.tBodies.item(0).rows.item(0).deleteCell(3);

  • property :
    cells;

    object :
    tr

    return type :
    node array

    content :
    ใช้อ้างถึง element td ของ element tr แบบ array

    example :
    var tagTable = document.getElementById ( "bamboo" );
    alert ( tagTable.tBodies.item(0).rows.item(0).cells.item(0).tagName );
    

 
Share This Chapter Login with Facebook