2013-02-01 31 views
6

के लिए colspan/rowspan सेट करें मेरे पास एक टेबल है और मैं colspan/rowspan रनटाइम पर किसी सेल की संपत्ति को बदलना चाहता हूं। यहां एक उदाहरण दिया गया है:एक सेल

<html> 
    <head> 
     <script type="text/javascript"> 
      function setColSpan() { 
       document.getElementById('myTable').rows[0].cells[0].colSpan = 2 
      } 
     </script> 
    </head> 

    <body> 
     <table id="myTable" border="1"> 
      <tr> 
       <td>cell 1</td> 
       <td>cell 2</td> 
      </tr> 
      <tr> 
       <td>cell 3</td> 
       <td>cell 4</td> 
      </tr> 
     </table> 
     <form> 
      <input type="button" onclick="setColSpan()" value="Change colspan"> 
     </form> 
    </body> 

</html> 

मेरी समस्या यह है कि कोशिकाएं स्थानांतरित होती हैं। क्या मैं उन कोशिकाओं को हटाना चाहता हूं जिन पर सेल फैलता है?

क्या मैं हटाने के बिना कर सकता हूं?

मैं एक साधारण स्प्रेडशीट को कार्यान्वित करना चाहता हूं। अभी के लिए मैं कोशिकाओं की एक आयताकार सीमा का चयन करने में सक्षम होने में सक्षम हूं और "चयनित कक्षों को मर्ज करें" विकल्प वाला मेनू दिखाता हूं। मैं कोशिकाओं को "अनमर्ज" करने में सक्षम होना चाहता हूं, इसलिए अन्य कोशिकाओं को हटाने के बिना कोशिकाओं को फैलाना अच्छा होगा।

+0

यदि आप कोशिकाओं को मर्ज करना चाहते हैं, तो उसमें मूल्य के बारे में कैसे? क्या आप दोनों कोशिकाओं से मूल्यों को जोड़ना चाहते हैं? – DON

+0

@DON, आदर्श रूप से मैं किसी भी तरह का मूल्य रखना चाहता हूं (शायद यह "अधिलेखित" कोशिकाओं को छिपाने के लिए संभव है?)। यदि नहीं, तो बस हटाएं। – warvariuc

उत्तर

15

मुझे लगता है कि आपको सेल को हटाने की आवश्यकता है। निम्नलिखित कोड के साथ जांचें। क्या मैंने किया पूरी पंक्ति हटा दिया और नया स्तंभ अवधि

function setColSpan() { 
    var table = document.getElementById('myTable'); 
    table.deleteRow(0); 
    var row = table.insertRow(0); 
    var cell = row.insertCell(0); 
    cell.innerHTML= "cell 1" 
    cell.colSpan = 2 
} 
0

कोशिकाओं बदलाव है क्योंकि आप यह करने के लिए कह रहे हैं क्या उस के साथ नई पंक्ति जोड़ दिया गया। आप इस तरह की एक तालिका को परिभाषित कर रहे हैं:

<tr> 
    <td colspan="2">cell 1</td> 
    <td>cell 2</td> 
</tr> 
<tr> 
    <td>cell 3</td> 
    <td>cell 4</td> 
</tr> 

तो जो बदलाव आप देख रहे हैं वह मैं चाहता हूं।

यदि आप कोशिकाओं को मर्ज करना चाहते हैं, तो आपको सभी विलय कोशिकाओं की सामग्री लेनी होगी, उन्हें एक ही सेल में जोड़ना होगा, और बाकी को हटा दें। मामूली उदाहरण के लिए, यह इस तरह होगा:

function setColSpan() { 
    var myTable = document.getElementById('myTable'); 
    var cell2html = myTable.rows[0].cells[1].innerHTML; 
    myTable.rows[0].deleteCell(1); 
    myTable.rows[0].cells[0].innerHTML = myTable.rows[0].cells[0].innerHTML + ' ' + cell2html; 
    myTable.rows[0].cells[0].colSpan = 2; 
} 

हालांकि एक और मजबूत समाधान है ... जटिल। विशेष रूप से यदि आप अनमोल करने की क्षमता चाहते हैं। आपको पुरानी सेल संरचना की जानकारी को किसी भी तरह से संरक्षित करना होगा ... संभावित रूप से मर्ज किए गए डेटा के आसपास <span class="oldCell">cell 2</span> जैसे कुछ डालने के साथ? और फिर "पुरानीसेल" के अस्तित्व की जांच करते समय अनमर्जिंग करते हैं? लेकिन फिर आपको उस जानकारी को उपयोगकर्ता संपादन के माध्यम से संरक्षित करना होगा। और पंक्तियों और स्तंभों में विलय करने के लिए इसका अर्थ क्या है इसका पता लगाएं। और यह भी पता लगाएं कि विलय ओवरलैप करने के लिए इसका क्या अर्थ है।

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^