HTML DOM टेबलडेटा rowSpan प्रॉपर्टी: सेल को कई पंक्तियों में फैलाना

HTML DOM टेबलडेटा rowSpan प्रॉपर्टी HTML दस्तावेज़ में टेबल के rowspan एट्रिब्यूट का मान लौटाती और संशोधित करती है। यह एक सेल को लंबवत रूप से कई पंक्तियों में फैलाने की अनुमति देती है।

सिंटैक्स

1. rowSpan प्राप्त करना:

object.rowSpan

2. rowSpan सेट करना:

object.rowSpan = "number"

उदाहरण: एलन को दो पंक्तियों में फैलाना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; width: 400px; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
</style>
<body>
  <h1>DOM टेबलडेटा rowSpan प्रॉपर्टी डेमो</h1>
  <table border="2">
    <thead>
      <tr> <th>नाम</th> <th>भाषा</th> </tr>
    </thead>
    <tbody>
      <tr> <td>जॉन</td> <td>English</td> </tr>
      <tr> <td id="elon">एलन</td> <td>जर्मनी</td> </tr>
      <tr> <td>फ्रेंच</td> </tr>
    </tbody>
  </table>
  <button onclick="get()" class="btn">एलन को फैलाएं</button>
  <script>
    function get() {
      document.querySelector('#elon').rowSpan = "2";
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: 3 पंक्तियों वाली टेबल, एलन दूसरी पंक्ति में
2. "एलन को फैलाएं" क्लिक: एलन सेल तीसरी पंक्ति में भी फैल जाता है, "फ्रेंच" सेल दाएं खिसक जाता है

rowSpan के नियम

• मान: धनात्मक पूर्णांक (1 डिफ़ॉल्ट, कोई फैलाव नहीं)
• प्रभाव: सेल नीचे की पंक्तियों पर कब्जा कर लेता है
• अगली पंक्तियां: प्रभावित पंक्तियों में एक कम सेल होना चाहिए
• सीमा: टेबल की सीमा से आगे नहीं फैल सकता

दृश्य प्रतिनिधित्व

पहले:                    बाद (rowSpan=2):
+------+--------+        +------+--------+
| नाम  | भाषा  |        | नाम  | भाषा  |
+------+--------+        +------+--------+
| जॉन  | English|        | जॉन  | English|
+------+--------+        +------+--------+
| एलन  | जर्मनी |   →    | एलन  | जर्मनी |
+------+--------+        |      |        |
| फ्रेंच |        |        |      | फ्रेंच |
+------+--------+        +------+--------+

सामान्य उपयोग मामले

• श्रेणी हेडर्स जो कई पंक्तियों पर लागू होते हैं
• उप-योग/कुल पंक्तियों को मर्ज करना
• टाइमटेबल/शेड्यूल में सतत ब्लॉक
• पदानुक्रमित डेटा प्रदर्शन