जावास्क्रिप्ट/jQuery: टेबल बॉडी (सरणी का उपयोग करके) पंक्तियों को गतिशील रूप से जोड़ने के लिए कैसे करें

Question

मैं जावास्क्रिप्ट में नया हूं और उम्मीद करता हूं कि यहां कोई मेरी मदद कर सकता है।

मेरे पास एक टेबल वाला एक HTML पृष्ठ है और तालिका का शरीर पर कुछ सामग्री के साथ पंक्तियों को गतिशील रूप से जोड़ने के लिए जेएस का उपयोग करना चाहता है।

1. जब मैं इस चलाने यह गतिशील HTML सम्मिलित करता है:

   अब तक मैं नीचे दिए गए कोड है जो यहाँ छोटा है है जो मुझे निम्न समस्याओं खड़ी कर रहा है (वास्तव में वहाँ अधिक पंक्तियों और स्तंभों आदि कर रहे हैं) तालिका के शरीर के अंदर के बजाय तालिका के ऊपर।

2. यह यह करने के लिए किसी भी शैली (जो मेरी सीएसएस में कक्षाएं द्वारा परिभाषित कर रहे) लागू नहीं होता है, तो यह सिर्फ सीमा या स्तंभ की चौड़ाई शैलियों आदि लागू किए बिना कोशिकाओं 'सामग्री से पता चलता मैं इसे किसी भी तरह बताने के लिए कि है इसे सीएसएस शैलियों को भी लागू करना है?
3. इसके अलावा, मैं सोच रहा था कि पहले वैरिएबल I में अलग-अलग नंबरों को अलग-अलग सूचीबद्ध करने की आवश्यकता नहीं है, बल्कि इसके बजाय पहले (1) और अंतिम (5) श्रृंखला की संख्या लिखें क्योंकि वे केवल अनुक्रम जैसे 1, 2, 3, 4, 5.

क्या कोई मुझे बता सकता है कि मैं यहां क्या कर रहा हूं?

मेरे जे एस:

$('#btnStart').on('click', function(){ 
    var cols = [1, 2, 3, 4, 5]; 
    var tbody = ''; 
    var i; 
    for (i = 0; i < cols.length; i++) { 
     tbody += cols[i] + "<tr> \ 
       <td class='td col1'>1</td> \ 
       <td class='td col2'>2</td> \ 
       <td class='td col3'><div contenteditable='true' class='editable'></div></td> \ 
      </tr>"; 
    } 
    $('#bodyCal').html(tbody); 
}); 

मेरे HTML:

<table class="tblCal"> 
    <colgroup> 
     <col class="col1" /> 
     <col class="col2" /> 
     <col class="col3" /> 
    </colgroup> 
    <thead> 
     <tr> 
      <th colspan="3" class="th th2">Col 1</th> 
     </tr> 
    </thead> 
    <tbody> 
     <div id="bodyCal"></div> 
    </tbody> 
</table> 

Answer 1

आप tbody को लक्षित करने के लिए तो यह पहचान प्रदान करना चाहिए। यह भी ध्यान रखें divtbody

अनुमति सामग्री के बच्चे नहीं हो सकता: शून्य या अधिक <tr> तत्वों।

प्रासंगिक एचटीएमएल परिवर्तन:

<tbody id="bodyCal"> 
</tbody> 

3 प्रश्न के लिए:

var tbody = ''; 
for (var i = 1; i <= 5; i++) { 
    tbody += "<tr> <td class='td col1'>" + i +" </td> \ 
       <td class='td col2'>2</td> \ 
       <td class='td col3'><div contenteditable='true' class='editable'></div></td> \ 
      </tr>"; 
} 
$('#bodyCal').html(tbody); 

DEMO

Answer 2

अपने 3 प्रश्न के लिए:

var cols = [1, 5]; 

for (i = cols[0]; i <= cols[1]; i++) { 

अब आपका लूप i के लिए मान 1, 2, 3, 4 और 5 के साथ चलाएगा।

आप इसे आगे सरल हो सकता है:

के लिए

(i = 1; मैं < = 5; i ++) {

लेकिन यह एक आरंभ और समाप्ति पैरामीटर गुजर की संभावना निकाल देता है, तो के रूप में व्यावहारिक नहीं है जब विभिन्न श्रेणियों का परीक्षण।

Answer 3

आपको टेबल बॉडी टैग के बगल में "बॉडीकल" आईडी रखना होगा, क्योंकि तालिका में एक डीडी टैग नहीं है जब तक कि यह एक टीडी टैग में लपेटा न जाए। इस प्रयास करें:

$('#btnStart').on('click', function(){ 
 
    var cols = [1, 2, 3, 4, 5]; 
 
    var tbody = ""; 
 
    var i; 
 
    for (h = 0; h < 5; h++) 
 
    { 
 
     tbody += "<tr>\ 
 
"; 
 
     for (i = 0; i < cols.length; i++) { 
 
      tbody += "<td class='td col" + cols[i] + "'>" + cols[i] + "</td> \ 
 
"; 
 
     }   
 
     tbody += "<\tr>\ 
 
"; 
 
    } 
 
    $('#bodyCal').html(tbody); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tblCal"> 
 
    <colgroup> 
 
     <col class="col1" /> 
 
     <col class="col2" /> 
 
     <col class="col3" /> 
 
    </colgroup> 
 
    <thead> 
 
     <tr> 
 
      <th colspan="3" class="th th2">Col 1</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="bodyCal"> 
 
    </tbody> 
 
</table> 
 

 
<button id="btnStart">Start</button>