Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML DOM Table ऑब्जेक्ट


HTML DOM Table ऑब्जेक्ट HTML दस्तावेज़ के <table> एलिमेंट को दर्शाता है।

आइए देखते हैं कि टेबल ऑब्जेक्ट कैसे बनाया जाता है:

सिंटैक्स

निम्नलिखित सिंटैक्स है:

document.createElement("TABLE");

प्रॉपर्टीज

टेबल ऑब्जेक्ट की निम्नलिखित प्रॉपर्टीज हैं:

प्रॉपर्टीव्याख्या
captionHTML दस्तावेज़ में टेबल के <caption> एलिमेंट को लौटाता है।
tFootHTML दस्तावेज़ में टेबल के <tfoot> एलिमेंट को लौटाता है।
tHeadHTML दस्तावेज़ में टेबल के <thead> एलिमेंट को लौटाता है।

मेथड्स

टेबल ऑब्जेक्ट के निम्नलिखित मेथड्स हैं:

मेथडव्याख्या
createCaption()एक खाली <caption> एलिमेंट बनाता है और इसे टेबल में जोड़ता है।
createTFoot()एक खाली <tfoot> एलिमेंट बनाता है और इसे टेबल में जोड़ता है।
createTHead()एक खाली <thead> एलिमेंट बनाता है और इसे टेबल में जोड़ता है।
deleteCaption()टेबल से पहला <caption> एलिमेंट डिलीट करता है।
deleteRow()टेबल से <tr> एलिमेंट डिलीट करता है।
deleteThead()टेबल से <thead> एलिमेंट डिलीट करता है।
deleteTFoot()टेबल से <tfoot> एलिमेंट डिलीट करता है।
insertRow()एक खाली <tr> एलिमेंट बनाता है और इसे टेबल में जोड़ता है।

उदाहरण

आइए टेबल ऑब्जेक्ट का एक उदाहरण देखें:

<!DOCTYPE html> <html> <head> <style> 
    body { 
        text-align: center; 
        background-color: #fff; 
        color: #0197F6; 
    } 
    h1 { 
        color: #23CE6B; 
    } 
    .btn { 
        background-color: #fff; 
        border: 1.5px dashed #0197F6; 
        height: 2rem; 
        border-radius: 2px; 
        width: 60%; 
        margin: 2rem auto; 
        display: block; 
        color: #0197F6; 
        outline: none; 
        cursor: pointer; 
    } 
</style> </head> <body> 
<h1>DOM table Object Demo</h1> 
<button onclick="createTable()" class="btn">Create a table object</button> 
<script> 
    function createTable() { 
        var table = document.createElement("TABLE"); 
        table.innerHTML = `<tr> 
            <td>Data 1</td> 
            <td>Data 2</td> 
            </tr> 
            <tr> 
            <td>Data 3</td> 
            <td>Data 4</td> 
            </tr>`; 
        table.setAttribute('border', "2"); 
        table.style.margin = "2rem auto"; 
        document.body.appendChild(table); 
    } 
</script> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

HTML DOM Table ऑब्जेक्ट

Create a table object बटन पर क्लिक करके टेबल ऑब्जेक्ट बनाएं:

HTML DOM Table ऑब्जेक्ट


  1. HTML DOM HR ऑब्जेक्ट HTML DOM HR ऑब्जेक्ट

    विवरण HTML DOM HR ऑब्जेक्ट HTML दस्तावेज़ के तत्व को दर्शाता है। HR ऑब्जेक्ट बनाएं सिंटैक्स document.createElement(HR); उदाहरण आइए hr ऑब्जेक्ट का एक उदाहरण देखें: <!DOCTYPE html> <html> <style> body { text-align: center; background-color: #fff; color: #0197F6;

  1. HTML DOM Object ऑब्जेक्ट HTML DOM Object ऑब्जेक्ट

    परिचय HTML DOM Object Object HTML में <object> एलिमेंट को दर्शाता है। <object> एलिमेंट बनाना var objectElement = document.createElement(OBJECT) यहां, objectElement में निम्नलिखित प्रॉपर्टीज हो सकती हैं: प्रॉपर्टी विवरण data ऑब्जेक्ट एलिमेंट द्वारा उपयोग किए जा रहे रिसोर्स का UR

  1. HTML DOM Ul ऑब्जेक्ट HTML DOM Ul ऑब्जेक्ट

    HTML DOM Ul ऑब्जेक्ट HTML में <ul> एलिमेंट को दर्शाता है। <ul> एलिमेंट बनाना var ulObject = document.createElement(UL) यहां, ulObject के निम्नलिखित गुण हो सकते हैं लेकिन HTML5 में समर्थित नहीं हैं - गुणविवरण compactअनऑर्डर्ड लिस्ट को सामान्य से छोटा प्रदर्शित करना चाहिए या नहीं, सेट