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




html-table (20)

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

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

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

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


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

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

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

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

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

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

$('#myTable').append('<tr><td>my data</td><td>more data</td></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>");

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

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

जिस दृष्टिकोण का आप सुझाव देते हैं वह आपको वह परिणाम देने की गारंटी नहीं देता है जिसे आप ढूंढ रहे हैं - उदाहरण के लिए यदि आपके पास कोई 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 है, जिसमें ऊपर दिए गए उदाहरण के अनुसार एकाधिक पंक्तियां शामिल हैं।

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

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

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

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

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

फ्लाई पर डीओएम तत्वों में हेरफेर करने के लिए 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>

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


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

tableObject.insertRow(index)

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

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

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

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

निम्नलिखित उदाहरण अंतिम में एक पंक्ति डालेंगे (-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>

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


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

एचटीएमएल

<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');
    });
      });
});

मेरा सुझाव है

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

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

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

यहां डेमो Fiddle

इसके अलावा मैं अधिक 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'
}));

यहां डेमो Fiddle


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

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

यदि आप डेटाटेबल 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);

डेटाटेबल्स fnAddData डेटाटेबल्स API देखें


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

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

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

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

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

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

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

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>

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

एचटीएमएल

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

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

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

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

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

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

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

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




html-table