JQuery में तालिका पंक्ति जोड़ें

Question

अंतिम पंक्ति के रूप में तालिका में एक अतिरिक्त पंक्ति जोड़ने के लिए jQuery में सबसे अच्छी विधि क्या है?

क्या यह स्वीकार्य है?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

क्या आप इस तरह की तालिका में जोड़ सकते हैं (जैसे इनपुट, चयन, पंक्तियों की संख्या)?

Comments

Thxs ऐश। मैं भी सिर्फ jQuery सीख रहा हूं और सबसे अच्छा तरीका, विशेष रूप से सरल चीजों का पता लगाना मुश्किल है। वे 2 प्रश्नों के कारण हैं क्योंकि मैंने एक पोस्ट किया है और फिर लगभग एक घंटे बाद मुझे एहसास हुआ कि मुझे दूसरे को अंदर लाना चाहिए था और मुझे नहीं लगा कि मुझे पहले को बदलना चाहिए।

— डैरिल हेन

इस वजह से: google.com/search?q=jquery+add+table+row

— Darryl Hein

FYI करें - कई एपेंड का उपयोग करने से बचें (प्रदर्शन को धीमा कर देता है), बल्कि अपने स्ट्रिंग का निर्माण करें या जावास्क्रिप्ट जॉइन का उपयोग करें जो बहुत तेज है।

— गेरिट ब्रिंक

देखें: stackoverflow.com/a/50365764/7186739

— सुपर मॉडल

यदि पंक्ति बहुत जटिल है, तो मैं क्या कर रहा हूं, पहली पंक्ति को आवश्यक संरचना के साथ छिपा कर रखें, एक क्लोन बनाएं और एक पाठ संशोधित करें और पहली पंक्ति के बाद डालें, इस तरह यदि आप ajax प्रतिक्रिया से डेटा प्राप्त करते हैं तो आपकी तालिका बनाई जाएगी, याद रखें इसे लूप के बाहर क्लोन करें, फिर इसका उपयोग लूप के अंदर सामग्री को संशोधित करने के लिए करें। $ ("# मेनटेबल tbody")। एपेंड (पंक्ति); पंक्ति संशोधित क्लोन प्रति है :)

— आदाम

Answer 1

आपके द्वारा सुझाया गया दृष्टिकोण आपको वह परिणाम देने की गारंटी नहीं है जिसकी आप तलाश कर रहे हैं - tbodyउदाहरण के लिए आपके पास क्या है :

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

आप निम्नलिखित के साथ समाप्त करेंगे:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

इसलिए मैं इसके बजाय इस दृष्टिकोण की सिफारिश करूंगा:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

आप after()विधि के भीतर कुछ भी शामिल कर सकते हैं जब तक कि यह वैध HTML है, ऊपर दिए गए उदाहरण के अनुसार कई पंक्तियों सहित।

अद्यतन: इस प्रश्न के साथ हाल की गतिविधि के बाद इस उत्तर को फिर से देखना। पलकहीनता एक अच्छी टिप्पणी करती है कि tbodyडोम में हमेशा रहेगा ; यह सच है, लेकिन केवल अगर कम से कम एक पंक्ति है। यदि आपके पास कोई पंक्तियाँ नहीं हैं, तो कोई भी ऐसा नहीं होगा tbodyजब तक कि आपने स्वयं को निर्दिष्ट न किया हो।

DaRKoN_ सुझाव देता हैtbody कि अंतिम के बाद सामग्री जोड़ने के बजाय इसे जोड़ना है tr। यह कोई पंक्तियाँ नहीं होने के मुद्दे के आसपास है, लेकिन अभी भी बुलेटप्रूफ नहीं है क्योंकि आप सैद्धांतिक रूप से कई tbodyतत्व हो सकते हैं और पंक्ति उनमें से प्रत्येक में जुड़ जाएगी।

सब कुछ वजन करते हुए, मुझे यकीन नहीं है कि एक एकल-पंक्ति समाधान है जो हर एक संभव परिदृश्य के लिए खाता है। आपको यह सुनिश्चित करना होगा कि आपके मार्कअप के साथ jQuery कोड लंबा हो।

मुझे लगता है कि सबसे सुरक्षित समाधान संभवतः यह सुनिश्चित करना है कि आपके मार्कअप में tableहमेशा कम से कम एक शामिल हो tbody, भले ही उसकी कोई पंक्तियाँ न हों। इस आधार पर, आप निम्नलिखित का उपयोग कर सकते हैं जो आपके पास कई पंक्तियों के लिए काम करेंगे (और कई tbodyतत्वों के लिए भी खाते हैं):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

Comments

@ राम, नहीं, यह नहीं होगा। एक बेहतर समाधान की जरूरत है।

— ब्रायन लियांग

डोम में हमेशा एक व्यक्ति होगा।

— पलक रहित होना

एक खाली व्यक्ति आपके html को मान्य नहीं करता है

— 2ni

अन्यथा समाधान के लिए एक अच्छा सुधार चयनकर्ताओं को अनुकूलित करना होगा। आप $('#myTable').find('tbody:last')इसके साथ गति सुधार प्राप्त कर सकते हैं: के बजाय $('#myTable > tbody:last')।

— एरिक टोइरा सिलफेवरवार्ड

"पलकविहीनता एक अच्छी टिप्पणी करती है कि डोम में हमेशा एक व्यक्ति होगा" - मैंने सिर्फ एक व्यक्ति के बिना यह कोशिश की और यह काम नहीं किया - यह केवल काम करता है अगर कोई व्यक्ति है।

— BrainSlugs83

Answer 2

jQuery के पास फ्लाई पर DOM तत्वों में हेरफेर करने के लिए एक अंतर्निहित सुविधा है।

आप अपनी तालिका में कुछ भी इस तरह जोड़ सकते हैं:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

$('<some-tag>')JQuery की चीज़ एक टैग ऑब्जेक्ट है जिसमें कई attrविशेषताएँ हो सकती हैं जिन्हें सेट और प्राप्त किया जा सकता है, साथ ही साथ text, जो यहां टैग के बीच पाठ का प्रतिनिधित्व करता है <tag>text</tag>:।

यह कुछ बहुत ही अजीब संकेत है, लेकिन आपके लिए यह देखना आसान है कि इस उदाहरण में क्या हो रहा है।

Comments

जो लोग यह कोशिश कर रहे हैं, उनके लिए कोष्ठक के स्थानों पर ध्यान दें। उचित नेस्टिंग महत्वपूर्ण है।

— रयान लुनडी

समापन टैग के बारे में क्या? क्या वे आवश्यक नहीं हैं?

— सेनफ

$ ("# TableClassname") वास्तव में $ ("# tableID") नहीं होना चाहिए क्योंकि हैश चिन्ह ID को संदर्भित करता है और वर्गनाम नहीं है?

— डेव

मुझे इस तरह की अजीब चैनिंग से नफरत है। इस तरह की चीजों से भरे कोड को बनाए रखना एक बुरा सपना है।

— 22

@ एलएसएफओ में बाल तत्वों को जोड़ने से वे स्वचालित रूप से बन जाएंगे।

— मिशेल डी रुएटर

Answer 3

तो जब से @Luke बेनेट ने इस सवाल का जवाब दिया है तब से चीजें बदल गई हैं । यहाँ एक अद्यतन है।

jQuery अगर तत्व आप (के किसी भी उपयोग सम्मिलित करने के लिए कोशिश कर रहे हैं संस्करण 1.4 (?) अपने आप पता लगाता के बाद से append(), prepend(), before(), या after()विधि) एक है <tr>और यह आवेषण पहले में <tbody>अपनी तालिका में या एक नए रूप में लपेटता <tbody>अगर एक नहीं है मौजूद।

तो हाँ आपका उदाहरण कोड स्वीकार्य है और jQuery 1.4+ के साथ ठीक काम करेगा। ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Comments

इस धारणा से सावधान रहें। यदि आपका अपडाउन्ड मार्कअप \ n या \ n \ r से शुरू होता है, तो jQuery यह पता नहीं लगाएगा कि यह एक <tr> है और इसे <table> में जोड़ देगा और <tbody> के लिए नहीं। मुझे इसका सामना एमवीसी के दृष्टिकोण से उत्पन्न मार्कअप से हुआ, जिसकी शुरुआत में एक अतिरिक्त लाइन थी।

— मीक

@ सिर के लिए धन्यवाद! मुझे लगता है कि yourString.trim()यह उपाय कर सकता है।

— सलमान वॉन अब्बास

बेशक, लेकिन आपको इसके बारे में सोचना होगा। बेहतर है कि अगर आपको पता है कि एक है तो <tbody> को जोड़ने की आदत डालें।

— मिक

jQuery 3.1 के लिए अभी भी आवश्यक है कि एक व्यक्ति निर्दिष्ट किया जाए। इसे यहाँ देखें: jsfiddle.net/umaj5zz9/2

— user984003

इससे मेरा पृष्ठ ताज़ा हो जाता है। मैं इसे कैसे रोक सकता हूं?

— एवी

Answer 4

यदि आपके पास ए <tbody>और ए है तो क्या होगा <tfoot>?

जैसे कि:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

तब यह पाद में आपकी नई पंक्ति सम्मिलित करेगा - शरीर को नहीं।

इसलिए सबसे अच्छा समाधान एक <tbody>टैग और उपयोग को शामिल करना है .append, बजाय .after।

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

Comments

आपने अपना tfoot गलत तरीके से लागू किया है। यह tbody से पहले आना चाहिए, उसके बाद नहीं - w3.org/TR/html4/struct/tables.html#h-11.2.3 देखें । इसलिए मेरा समाधान तब भी काम करता है जब तक आप मानकों को तोड़ने का चयन नहीं करते हैं (जिस स्थिति में आप अन्य चीजों के गलत होने की उम्मीद कर सकते हैं)। मेरा समाधान यह भी काम करता है कि आपके पास कोई व्यक्ति है या नहीं, जबकि आपका प्रस्ताव विफल होगा यदि कोई व्यक्ति मौजूद नहीं है।

— ल्यूक बेनेट

<Tfoot /> में किसी भी गलती के बावजूद, यह एक बेहतर समाधान है। यदि कोई <tbody /> नहीं है, तो आप <table /> पर उसी तकनीक का उपयोग कर सकते हैं। जबकि "स्वीकार किए गए उत्तर" के लिए एक मौजूदा जाँच की आवश्यकता है कि क्या कोई मौजूदा पंक्ति है या नहीं। (मुझे पता है कि ओपी ने इस आवश्यकता को निर्दिष्ट नहीं किया था, लेकिन इससे कोई फर्क नहीं पड़ता - यह पोस्ट इस तकनीक के लिए Google खोज में 1 पर आती है, और सबसे अच्छा उत्तर शीर्ष नहीं है।)

— क्लीवरपैट्रिक

यह खोजने से बेहतर उपाय है। कई पुनरावृत्तियों में यह तकनीक हमेशा काम करती दिखाई देती है। जोड़े गए FYI के रूप में, आप उपयोग कर सकते हैं। पंक्ति को तालिका के आरंभ में जोड़ने के लिए .append तालिका के अंत में पंक्ति डालता है।

— लांस क्लीवलैंड

यह गलत है, यह हर पंक्ति में पंक्ति को जोड़ देगा

— garg10may

@ garg10may क्या आप सलाह दे सकते हैं कि कैसे? यह किसी भी बाल तत्व को नहीं, बल्कि व्यक्ति को लक्षित कर रहा है।

— चाडट

Answer 5

मुझे पता है कि आपने jQuery विधि के लिए कहा है। मैंने बहुत कुछ देखा और पाया कि हम निम्नलिखित फ़ंक्शन द्वारा सीधे जावास्क्रिप्ट का उपयोग करने से बेहतर तरीके से कर सकते हैं।

tableObject.insertRow(index)

indexएक पूर्णांक है जो सम्मिलित करने के लिए पंक्ति की स्थिति को निर्दिष्ट करता है (0 पर शुरू होता है)। -1 का मान भी इस्तेमाल किया जा सकता है; जिसके परिणामस्वरूप नई पंक्ति को अंतिम स्थिति में डाला जाएगा।

फ़ायरफ़ॉक्स और ओपेरा में इस पैरामीटर की आवश्यकता है , लेकिन यह इंटरनेट एक्सप्लोरर, क्रोम और सफारी में वैकल्पिक है ।

यदि यह पैरामीटर छोड़ा जाता है, तो insertRow()इंटरनेट एक्सप्लोरर में अंतिम स्थिति में और क्रोम और सफारी में पहले स्थान पर एक नई पंक्ति सम्मिलित करता है।

यह HTML तालिका की हर स्वीकार्य संरचना के लिए काम करेगा।

निम्नलिखित उदाहरण अंतिम में एक पंक्ति सम्मिलित करेगा (-1 को सूचकांक के रूप में प्रयोग किया जाता है):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </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>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

मुझे उम्मीद है यह मदद करेगा।

Comments

इस विधि के साथ समस्या (जैसा कि मुझे अभी पता चला है) यह है कि यदि आपके पास एक पाद है तो यह -1 अंक सूचकांक के साथ पाद लेख को जोड़ देगा।

— kdubs

Answer 6

मेरा सुझाव है

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

विरोध के रूप में

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>'); 

firstऔर lastपहले या अंतिम टैग पर कीवर्ड के काम शुरू किया जा करने के लिए, नहीं बंद कर दिया। इसलिए, यह नेस्टेड टेबल के साथ अच्छे से खेलता है, यदि आप नहीं चाहते कि नेस्टेड टेबल को बदला जाए, लेकिन इसके बजाय समग्र तालिका में जोड़ें। कम से कम, यह वही है जो मैंने पाया।

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

Answer 7

मेरी राय में सबसे तेज़ और स्पष्ट तरीका है

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

यहाँ डेमो फिडल है

इसके अलावा, मैं और अधिक HTML परिवर्तन करने के लिए एक छोटे समारोह की सिफारिश कर सकते हैं

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

यदि आप मेरे स्ट्रिंग कंपोजर का उपयोग करते हैं तो आप ऐसा कर सकते हैं

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

यहाँ डेमो फिडल है

Comments

यदि आपके पास कई हैं, तो tbodyआप कई आवेषण प्राप्त कर सकते हैं

— मार्क स्कुलथिस

हां आप कर सकते हैं :) आप $("SELECTOR").last()अपने टैग संग्रह को सीमित करने का प्रयास कर सकते हैं

— sulest

Answer 8

यह jQuery के "अंतिम ()" फ़ंक्शन का उपयोग करके आसानी से किया जा सकता है।

$("#tableId").last().append("<tr><td>New row</td></tr>");

Comments

अच्छा विचार है, लेकिन मुझे लगता है कि आप चयनकर्ता को #tableId tr में बदलना चाहेंगे क्योंकि अभी आपको तालिका के नीचे की पंक्ति जोड़ने की तालिका मिल जाएगी।

— डैरिल हेन

Answer 9

मैं इस तरह का उपयोग कर रहा हूं जब तालिका में कोई पंक्ति नहीं है, साथ ही साथ, प्रत्येक पंक्ति काफी जटिल है।

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

Comments

धन्यवाद। यह बहुत सुरुचिपूर्ण समाधान है। मुझे पसंद है कि यह कैसे ग्रिड के भीतर टेम्पलेट रखता है। यह कोड को इतना सरल और पढ़ने और बनाए रखने में आसान बनाता है। एक बार फिर धन्यवाद।

— रोडनी

Answer 10

यहां पोस्ट किए गए सबसे अच्छे समाधान के लिए, यदि अंतिम पंक्ति में एक नेस्टेड टेबल है, तो नई पंक्ति को मुख्य तालिका के बजाय नेस्टेड तालिका में जोड़ा जाएगा। एक त्वरित समाधान (नेस्टेड टेबल के साथ / बिना टेबल वाले और बिना टेबल वाले)

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

उपयोग उदाहरण:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

Answer 11

मैंने इसे इस तरह हल किया।

Jquery का उपयोग करना

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

---

टुकड़ा

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>New York</td>
  </tr>
</table>

Comments

? मैं सफलतापूर्वक अब एक नई पंक्ति में गतिशील डेटा जोड़ सकते हैं लेकिन इस पद्धति का उपयोग करने के बाद, अपने कस्टम फिल्टर काम नहीं कर रहा ..Do आपको लगता है कि किसी भी समाधान है टी के लिए हांक

— अर्जुन

मुझे लगता है कि आपको किसी प्रकार के अपडेट फ़ंक्शन को कॉल करने की आवश्यकता है। एक उदाहरण के बिना बताने के लिए हेक।

— एंटोन vBR

Answer 12

मुझे कुछ संबंधित समस्याएँ थीं, क्लिक की गई पंक्ति के बाद तालिका पंक्ति सम्मिलित करने का प्रयास करना। अंतिम पंक्ति के लिए .after () कॉल काम नहीं करने के अलावा सब ठीक है।

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

मैं एक बहुत ही बेकार समाधान के साथ उतरा:

निम्नानुसार तालिका बनाएं (प्रत्येक पंक्ति के लिए आईडी):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

आदि ...

और फिर :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

Comments

मुझे लगता है कि यह एक नया सवाल होना चाहिए, एक मौजूदा एक के जवाब के बजाय ...

— डेरिल हेन

Answer 13

आप इस महान jQuery ऐड टेबल पंक्ति फ़ंक्शन का उपयोग कर सकते हैं । यह उन तालिकाओं के साथ बहुत अच्छा काम करता है जो है <tbody>और जो नहीं है। इसके अलावा यह आपके अंतिम तालिका पंक्ति के कोलस्पैन को ध्यान में रखता है।

यहाँ एक उदाहरण है:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

Comments

मैं नहीं देख सकता कि बहुत उपयोगी है। यह सब करता है एक मेज के लिए एक खाली तालिका पंक्ति जोड़ रहा है। आमतौर पर, यदि हमेशा नहीं, तो आप इसमें कुछ डेटा के साथ एक नई तालिका पंक्ति जोड़ना चाहते हैं।

— डैरिल हेन

लेकिन आमतौर पर वही होता है जो आप चाहते हैं। यह फ़ंक्शन आपको अपनी किसी भी तालिका में कोई भी खाली पंक्ति जोड़ने की अनुमति देता है, चाहे आपके पास कितने कॉलम और पंक्ति स्पैन हों, इस प्रकार यह UNIVERSAL फ़ंक्शन बनाता है। आप उदाहरण के लिए $ ('tbl tr: last td') के साथ वहां से ले जा सकते हैं। पूरे बिंदु के लिए सार्वभौमिक कार्य है !!!

— उज़्बेकोन

यदि आपका फ़ंक्शन आपकी नई पंक्तियों में डेटा भी जोड़ता है, तो आप अगली बार अपने अगले प्रोजेक्ट पर इसका उपयोग नहीं कर पाएंगे। मुद्दा क्या है?! यह मेरी राय में है, हालांकि, आपको इसे साझा करने की आवश्यकता नहीं है ...

— उज़्बेगोन

यदि आप उस फ़ंक्शन का प्रस्ताव रखते हैं जो एक सामान्य पैकेज का हिस्सा नहीं है, तो कृपया यहां पूर्ण फ़ंक्शन कोड डालें। धन्यवाद।

— येवगेनी अफानसैयेव

Answer 14

मेरा समाधान:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

उपयोग:

$('#Table').addNewRow(id1);

Comments

तो क्या हुआ अगर tbodyमेज में कोई नहीं है .. ?? इसका अर्थ है <table>कि बिना किसी हेडर के भी सीधे तत्व के अंदर पंक्ति हो सकती है ।

— शाश्वत

मैं आपको अत्यधिक सलाह देता हूं कि आप अपने टीचअप को <TBody> के साथ अपने HTML 5 मानकों तक करें, अगर नहीं तो आप हमेशा $ (यह) .append ('<tr id = "' + rowId + '"> </ कर सकते हैं टीआर> '); यह सिर्फ तालिका में एक पंक्ति जोड़ता है।

— रिकी जी

मुझे लगता है कि यदि आप इसे एक ऐसा समारोह बनाने जा रहे हैं, तो आप शायद नई पंक्ति के लिए एक jQuery ऑब्जेक्ट वापस कर सकते हैं, इसलिए यह श्रृंखला योग्य है।

— अराजकता

Answer 15

    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);

Comments

हालांकि यह एक उत्तर हो सकता है, यह बाद में एक आगंतुक के लिए बहुत उपयोगी नहीं है ... कृपया अपने उत्तर के आसपास कुछ स्पष्टीकरण जोड़ें।

— जयन

Answer 16

नील का जवाब अब तक का सबसे अच्छा है। हालांकि चीजें बहुत तेजी से गड़बड़ हो जाती हैं। मेरा सुझाव तत्वों को स्टोर करने के लिए चर का उपयोग करना और उन्हें डोम पदानुक्रम में जोड़ना होगा।

एचटीएमएल

<table id="tableID">
    <tbody>
    </tbody>
</table>

JAVASCRIPT

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);

Answer 17

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

एक जावास्क्रिप्ट फ़ंक्शन के साथ लिखें

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

Answer 18

मुझे यह AddRow प्लगइन तालिका पंक्तियों के प्रबंधन के लिए काफी उपयोगी लगा। हालाँकि, ल्यूक का समाधान सबसे अच्छा होगा यदि आपको एक नई पंक्ति जोड़ने की आवश्यकता है।

Answer 19

यहाँ कुछ hacketi हैक कोड है। मैं एक HTML पृष्ठ में एक पंक्ति टेम्पलेट बनाए रखना चाहता था । तालिका पंक्तियाँ 0 ... n अनुरोध समय पर दी गई हैं, और इस उदाहरण में एक हार्डकोड पंक्ति और एक सरलीकृत टेम्पलेट पंक्ति है। टेम्प्लेट तालिका छिपी हुई है, और पंक्ति टैग किसी मान्य तालिका के भीतर होना चाहिए या ब्राउज़र इसे DOM ट्री से हटा सकते हैं । एक पंक्ति जोड़ने पर काउंटर + 1 पहचानकर्ता का उपयोग होता है, और डेटा विशेषता में वर्तमान मूल्य बनाए रखा जाता है। यह गारंटी देता है कि प्रत्येक पंक्ति को अद्वितीय URL पैरामीटर मिलते हैं ।

मैंने इंटरनेट एक्सप्लोरर 8, इंटरनेट एक्सप्लोरर 9, फ़ायरफ़ॉक्स, क्रोम, ओपेरा, नोकिया लूमिया 800 , नोकिया सी 7 ( सिम्बियन 3 के साथ ), एंड्रॉइड स्टॉक और फ़ायरफ़ॉक्स बीटा ब्राउज़र पर परीक्षण चलाए हैं।

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

पुनश्च: मैं jQuery टीम को सभी क्रेडिट देता हूं; वे सब कुछ पाने के लायक हैं। JQuery के बिना जावास्क्रिप्ट प्रोग्रामिंग - मैं उस दुःस्वप्न के बारे में सोचना भी नहीं चाहता।

Answer 20

<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

Answer 21

मुझे लगता है मैं अपनी परियोजना में किया है, यहाँ यह है:

एचटीएमएल

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

js

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});

Answer 22

यह मेरा समाधान है

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

Answer 23

यदि आपके पास एक और चर है तो आप <td>उस प्रयास की तरह टैग में पहुंच सकते हैं ।

इस तरह मुझे उम्मीद है कि यह मददगार होगा

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);

Answer 24

जैसा कि मुझे भी पिछले या किसी विशिष्ट स्थान पर एक पंक्ति जोड़ने का एक तरीका मिला है, इसलिए मुझे लगता है कि मुझे यह भी साझा करना चाहिए:

पहले लंबाई या पंक्तियों का पता लगाएं:

var r=$("#content_table").length;

और फिर अपनी पंक्ति जोड़ने के लिए नीचे दिए गए कोड का उपयोग करें:

$("#table_id").eq(r-1).after(row_html);

Answer 25

विषय पर एक अच्छा उदाहरण जोड़ने के लिए, यदि आप विशिष्ट स्थान पर एक पंक्ति जोड़ने की आवश्यकता है, तो यहां समाधान है।

अतिरिक्त पंक्ति को 5 वीं पंक्ति के बाद, या तालिका के अंत में जोड़ा जाता है यदि कम हैं तो 5 पंक्तियाँ।

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

मैंने सामग्री को टेबल के नीचे एक तैयार (छिपे हुए) कंटेनर पर रखा है। यदि आपको (या डिजाइनर) को बदलना है तो जेएस को संपादित करने की आवश्यकता नहीं है।

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

Answer 26

<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

आप पाद चर को कैश कर सकते हैं और DOM तक पहुँच को कम कर सकते हैं (नोट: हो सकता है कि पाद लेख के बजाय नकली पंक्ति का उपयोग करना बेहतर होगा)।

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")

Answer 27

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

किसी भी या वर्तमान के बिना, तालिका के पहले TBODY में एक नई पंक्ति जोड़ देगा । (मुझे जानकारी नहीं है कि jQuery के किस संस्करण से यह व्यवहार मौजूद है।)THEADTFOOT.append()

आप इसे इन उदाहरणों में आज़मा सकते हैं:

<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t"> <!-- table with two TBODYs -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
  <tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t">  <!-- table without TBODY -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>

<table class="t">  <!-- table with TR not in TBODY  -->
  <tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>

<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>

जिसमें उदाहरण a bपंक्ति के बाद डाला जाता है 1 2, 3 4दूसरे उदाहरण में नहीं । यदि तालिका खाली थी, तो jQuery TBODYएक नई पंक्ति बनाता है ।

Answer 28

यदि आप Datatable JQuery प्लगइन का उपयोग कर रहे हैं, तो आप कोशिश कर सकते हैं।

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

देखें DataTables fnAddData DataTables एपीआई

Answer 29

एक सरल तरीके से:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

Comments

क्या आप अपने समाधान के बारे में थोड़ा और विवरण जोड़कर अपने जवाब को विस्तृत कर सकते हैं?

— अबरीसन

Answer 30

इसे आज़माएँ: बहुत ही सरल तरीका

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>