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




html-table (24)

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

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

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

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

यदि आपके पास एक और चर है तो आप <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);

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

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


मुझे पता है कि आपने एक 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>

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


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

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

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

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


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

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

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

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

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

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

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

$('#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 देखें


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

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

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

किसी भी THEAD या TFOOT उपस्थिति के आधार पर तालिका के पहले TBODY में एक नई पंक्ति जोड़ देगा। (मुझे .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>

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


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

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>

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

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

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

style.css:

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

xxx.html

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

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

...

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

एचटीएमएल

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

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

मैंने इंटरनेट एक्सप्लोरर 8, इंटरनेट एक्सप्लोरर 9, फ़ायरफ़ॉक्स, क्रोम, ओपेरा, नोकिया लुमिया 800 , नोकिया सी 7 ( Symbian 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 के बिना जावास्क्रिप्ट प्रोग्रामिंग - मैं उस दुःस्वप्न के बारे में भी सोचना नहीं चाहता।


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

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

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

$("#tableId").last().append("<tr><td>New row</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>




html-table