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





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

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

javascript jquery html-table

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

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

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



मेरा सुझाव है

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



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

$("#tableId").last().append("<tr><td>New row</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 एड टेबल पंक्ति समारोह का उपयोग कर सकते हैं। यह टेबल के साथ बहुत अच्छा काम करता है जिसमें <tbody> और वह नहीं है। इसके अलावा यह आपकी आखिरी टेबल पंक्ति के कॉलस्पेन पर विचार करता है।

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

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



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



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




यहां कुछ हैकेट हैक कोड है। मैं एक 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 के बिना जावास्क्रिप्ट प्रोग्रामिंग - मैं उस दुःस्वप्न के बारे में भी सोचना नहीं चाहता।




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

एचटीएमएल

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



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

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

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

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

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



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

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

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



$('#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 बनाता है।




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

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



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

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





Related