Jquery एक निश्चित सूचकांक पर तालिका में नई पंक्ति सम्मिलित

Question

मैं जानता हूँ कि संलग्न या jQuery का उपयोग कर एक तालिका में एक नई पंक्ति पहले जोड़ें करने के लिए कैसे:

$('#my_table > tbody:last').append(html); 

मैं कैसे में पंक्ति (एचटीएमएल चर में दी गई) सम्मिलित करने के लिए एक विशिष्ट "पंक्ति सूचकांक" i। तो यदि i=3, उदाहरण के लिए, पंक्ति तालिका में चौथी पंक्ति के रूप में डाली जाएगी।

Answer 1

आप .eq() और इस तरह .after() उपयोग कर सकते हैं:

$('#my_table > tbody > tr').eq(i-1).after(html); 

अनुक्रमित 0 आधारित हैं, इसलिए 4 पंक्ति होने के लिए आपको i-1 की जरूरत है, के बाद से .eq(3) 4 पंक्ति में होगा, तो आप वापस जाने की जरूरत है तीसरी पंक्ति (2) तक और .after() डालें।

Answer 2

$($('#my_table > tbody:last')[index]).append(html); 

Answer 3

इस प्रयास करें:

var i = 3; 

$('#my_table > tbody > tr:eq(' + i + ')').after(html); 

या इस:

var i = 3; 

$('#my_table > tbody > tr').eq(i).after(html); 

या इस:

var i = 4; 

$('#my_table > tbody > tr:nth-child(' + i + ')').after(html); 

ये सब एक ही स्थिति में पंक्ति स्थापित करेंगे। nth-child एक 1 आधारित सूचकांक का उपयोग करता है।

Answer 4

उपयोग eq selector वें पंक्ति (0-आधारित) selct और अपने पंक्ति जोड़ने के बाद यह after का उपयोग कर, तो:

$('#my_table > tbody:last tr:eq(2)').after(html); 

जहां एचटीएमएल एक tr

Answer 5

$('#my_table tbody tr:nth-child(' + i + ')').after(html); 

Answer 6

यह कोशिश है:

$("table#myTable tr").last().after(data); 

Answer 7

नोट:

$('#my_table > tbody:last').append(newRow); // this will add new row inside tbody 

$("table#myTable tr").last().after(newRow); // this will add new row outside tbody 
              //i.e. between thead and tbody 
              //.before() will also work similar 

Answer 8

मैं जानता हूँ कि यह देर से आ रहा है, लेकिन उन लोगों को जो विशुद्ध रूप से JavaScript का उपयोग कर इसे लागू करना चाहते हैं के लिए है, तो यहां आप यह कर सकते है:

1. वर्तमान tr जो क्लिक किया जाता है का संदर्भ लें।
2. नया tr डोम तत्व बनाएं।
3. इसे tr पैरेंट नोड में जोड़ें।

HTML:

<table> 
    <tr> 
        <td> 
         <button id="0" onclick="addRow()">Expand</button> 
        </td> 
        <td>abc</td> 
        <td>abc</td> 
        <td>abc</td> 
        <td>abc</td> 
    </tr> 

    <tr> 
        <td> 
         <button id="1" onclick="addRow()">Expand</button> 
        </td> 
        <td>abc</td> 
        <td>abc</td> 
        <td>abc</td> 
        <td>abc</td> 
    </tr> 
    <tr> 
        <td> 
         <button id="2" onclick="addRow()">Expand</button> 
        </td> 
        <td>abc</td> 
        <td>abc</td> 
        <td>abc</td> 
        <td>abc</td> 
    </tr> 

जावास्क्रिप्ट में:

function addRow() { 
     var evt = event.srcElement.id; 
     var btn_clicked = document.getElementById(evt); 
     var tr_referred = btn_clicked.parentNode.parentNode; 
     var td = document.createElement('td'); 
     td.innerHTML = 'abc'; 
     var tr = document.createElement('tr'); 
     tr.appendChild(td); 
     tr_referred.parentNode.insertBefore(tr, tr_referred.nextSibling); 
     return tr; 
    } 

यही पंक्ति जिस पर बटन क्लिक नीचे नई तालिका पंक्ति जोड़ देगा।