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




html-table (25)

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

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

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

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


Answers

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

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> और <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>");

मेरा समाधान:

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

उपयोग:

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

एचटीएमएल

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

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

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

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

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

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

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

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

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

यदि आप <tr> पहले बच्चे से पहले row जोड़ना चाहते हैं।

$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");

यदि आप <tr> अंतिम बच्चे के बाद row जोड़ना चाहते हैं।

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

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

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

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

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

मुझे स्थानीय, सत्र, कुकीज़ पर उन तरह की समस्या से बचने के लिए लगता है आप opendb लाइब्रेरी का उपयोग कर सकते हैं ..

पूर्व- जिसमें आप इस स्निपेट का उपयोग करके इसे हल कर सकते हैं

// for set object in db
db.local.setJSON("key", {name: "xyz"});  

// for get object form db
db.local.getJSON("key");

https://github.com/pankajbisht/openDB

वेब स्टोरेज के बारे में अधिक जानकारी के लिए आप वेब स्टोरेज आलेख पढ़ सकते हैं ।





javascript jquery html-table