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

Question

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

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

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

Comments

समान नहीं, लेकिन stackoverflow.com/questions/171027/add-table-row-in-jquery

— नाथन कोप

Answer 1

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

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

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

Comments

यह ध्यान दिया जाना चाहिए कि यदि jQuery के eq फ़ंक्शन को एक नकारात्मक मान दिया गया है, तो यह तालिका के अंत में लगभग लूप करेगा। इसलिए इसे चलाने और इसे 0 इंडेक्स पर डालने की कोशिश करने से नई पंक्ति को अंत में डाला जाएगा

— rossisdead

और .before(html)अगर आप इसे उस इंडेक्स से पहले

— डालना

यह विफल रहता है, यदि तालिका में कोई पंक्तियाँ नहीं हैं, तो क्या किसी के पास कोई समाधान (सूचकांक आधारित) है जो पहली पंक्ति के लिए भी काम करता है?

— मार्टिन

@MartinM यदि आप पंक्तियाँ न होने के बावजूद भी सम्मिलित कर रहे हैं , तो यह बिलकुल अलग परिदृश्य है (जहाँ सूचकांक कोई फर्क नहीं पड़ता?) - क्या आप अंत में कोई बात नहीं करना चाहते हैं?

— निक Craver

@NickCraver, नहीं, मैं सिर्फ सामान्य सूचकांक आधारित समाधान (इस तरह) की तलाश कर रहा हूं, लेकिन मेरी मेज भिखारी पर खाली है..मैं निश्चित रूप से जांच सकता हूं, यदि तालिका खाली है और पहली पंक्ति डालें और फिर जारी रखें आपकी विधि, लेकिन यह मुझे सही नहीं लगता है ..

— मार्टिनएम

Answer 2

इसे इस्तेमाल करे:

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-child1 आधारित सूचकांक का उपयोग करता है।

Answer 3

ध्यान दें:

$('#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 4

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

1. trजो वर्तमान क्लिक किया गया है उसका संदर्भ प्राप्त करें ।
2. एक नया trDOM एलिमेंट बनाओ ।
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;
    }

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

Answer 5

इसे इस्तेमाल करे:

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

Answer 6

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

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

जहाँ html एक है tr

Answer 7

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

Answer 8

निक क्रैवर के उत्तर को जोड़ना और रॉसडीड द्वारा उठाए गए बिंदु पर भी विचार करना, अगर परिदृश्य मौजूद है जैसे कि किसी को खाली टेबल पर या किसी निश्चित पंक्ति से पहले जोड़ना होगा, मैंने ऐसा किया है:

var arr = []; //array
if (your condition) {
  arr.push(row.id); //push row's id for eg: to the array
  idx = arr.sort().indexOf(row.id);

  if (idx === 0) {   
    if (arr.length === 1) {  //if array size is only 1 (currently pushed item)
        $("#tableID").append(row);
    }
    else {       //if array size more than 1, but index still 0, meaning inserted row must be the first row
       $("#tableID tr").eq(idx + 1).before(row);
    }   
  }          
  else {     //if index is greater than 0, meaning inserted row to be after specified index row
      $("#tableID tr").eq(idx).after(row);
  }    
}

आशा है कि यह किसी की मदद करता है।

Answer 9

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

Comments

यह हमेशा सीमा अपवाद से बाहर एक सूचकांक में परिणाम होगा।

— निक Craver