[javascript] JQuery में टेबल पंक्ति जोड़ें


Answers

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

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

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

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

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

Question

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

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

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

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




क्लिक किए गए पंक्ति के बाद तालिका पंक्ति डालने का प्रयास कर रहा था, मुझे कुछ संबंधित समस्याएं थीं। सभी को छोड़कर ठीक है।) () कॉल अंतिम पंक्ति के लिए काम नहीं करता है।

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



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

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



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

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



    // 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);



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

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



मेरा सुझाव है

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



एक साधारण तरीके से:

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



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

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

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



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

जैसे कि:

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

फिर यह आपकी नई पंक्ति को पाद लेख में डालेगा - शरीर के लिए नहीं।

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

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



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

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

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



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




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

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

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

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

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



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

यहां एक उदाहरण उपयोग है:

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



मैंने इसे इस तरह हल किया जो मुझे लगता है कि सबसे अधिक पठनीय है :)

$('#tab').append($('<tr>')
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
  )



Related