JQuery හි වගු පේළිය එක් කරන්න

අවසාන පේළිය ලෙස වගුවකට අතිරේක පේළියක් එක් කිරීමට jQuery හි ඇති හොඳම ක්‍රමය කුමක්ද?

මෙය පිළිගත හැකිද?

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

ඔබට මේ වගේ වගුවකට එකතු කළ හැකි දේට සීමාවන් තිබේද (ආදාන, තේරීම්, පේළි ගණන වැනි)?

ඔබ යෝජනා කරන ප්‍රවේශය ඔබ සොයන ප්‍රති result ලය ලබා දීමට සහතික නොවේ - ඔබට 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 පවතින තාක් කල් ඔබට ඕනෑම දෙයක් ඇතුළත් කළ හැකිය .

යාවත්කාලීන කිරීම: මෙම ප්‍රශ්නය සමඟ මෑත කාලීන ක්‍රියාකාරකම් වලින් පසුව මෙම පිළිතුර නැවත බැලීම. අක්ෂි රහිත භාවය හොඳ ප්‍රකාශයක් කරන්නේ සෑම විටම tbodyDOM තුළ ඇති බවය; මෙය සත්‍යයකි, නමුත් අවම වශයෙන් එක් පේළියක්වත් තිබේ නම් පමණි. ඔබට පේළි නොමැති tbodyනම්, ඔබ විසින්ම එකක් නියම කර ඇත්නම් මිස කිසිවක් නැත .

DaRKoN_ වත් කිරීමට appending tbodyපසුගිය පසුව අන්තර්ගතය එක් වඩා tr. මෙය පේළි නොමැති වීම පිළිබඳ ගැටළුව විසඳයි, නමුත් ඔබට න්‍යායාත්මකව බහුවිධ ප්‍රමාණයක් තිබිය හැකි බැවින් තවමත් වෙඩි නොවදින යtbody මූලද්‍රව්‍ය අතර පේළිය ඒ සෑම දෙයකටම එකතු වේ.

සෑම දෙයක්ම කිරා මැන බැලීමේදී, හැකි සෑම අවස්ථාවකටම එක-පේළියේ විසඳුමක් ඇති බව මට විශ්වාස නැත. ඔබේ සලකුණු කිරීම සමඟ jQuery කේතය උස බව සහතික කිරීමට ඔබට අවශ්‍ය වනු ඇත.

පේළි නොමැති වුවද, ඔබේ සලකුණු tableකිරීමේදී අවම වශයෙන් එකක්වත් ඇතුළත් වන බව සහතික කිරීම ආරක්ෂිතම විසඳුම යැයි මම සිතමි tbody. මෙම පදනම මත, ඔබට පේළි කීයක් වැඩ කළත් (සහ බහු tbodyමූලද්‍රව්‍ය සඳහාද) පහත සඳහන් දෑ භාවිතා කළ හැකිය :

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

jQuery හි පියාසර කරන DOM මූලද්‍රව්‍ය හැසිරවීමට පහසුකමක් ඇත.

ඔබට මේ ආකාරයට ඔබේ මේසයට ඕනෑම දෙයක් එකතු කළ හැකිය:

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

$('<some-tag>')JQuery හි ඇති දෙය ටැග් වස්තුවක් වන අතර attrඑය සැකසිය හැකි සහ ලබා ගත හැකි ගුණාංග කිහිපයක් තිබිය හැකි textඅතර, මෙහි ඇති ටැගය අතර පෙළ නිරූපණය කරයි:<tag>text</tag> .

මෙය තරමක් අමුතු ඉන්ඩෙන්ටින් කිරීමකි, නමුත් මෙම උදාහරණයේ සිදුවන්නේ කුමක්ද යන්න ඔබට දැකීම පහසුය.

@ ලූක් බෙනට් මෙම ප්‍රශ්නයට පිළිතුරු දුන් දා සිට මේ දක්වා තත්වය වෙනස් වී ඇත. මෙන්න යාවත්කාලීන කිරීමකි.

ඔබ (හෝ භාවිතා ඇතුල් කිරීමට උත්සාහ කරන අංගයක් නම් අනුවාදය 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>');

ඔබට a <tbody>සහ a තිබේ නම් කුමක් කළ <tfoot>යුතුද?

එවැනි:

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

එවිට එය ඔබගේ නව පේළිය පාදකයේ ඇතුළත් කරනු ඇත - ශරීරයට නොවේ.

එබැවින් හොඳම විසඳුම වන්නේ <tbody>ටැගයක් සහ භාවිතයට .appendවඩා ඇතුළත් .afterකිරීමයි.

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

මම දන්නවා ඔබ jQuery ක්‍රමයක් ඉල්ලා ඇති බව. පහත දැක්වෙන ශ්‍රිතය මඟින් ජාවාස්ක්‍රිප්ට් කෙලින්ම භාවිතා කරනවාට වඩා අපට එය වඩා හොඳ ආකාරයකින් කළ හැකි බව මම සොයා බැලුවෙමි.

tableObject.insertRow(index)

indexඇතුළත් කිරීමට පේළියේ පිහිටීම නියම කරන පූර්ණ සංඛ්‍යාවක් (0 සිට ආරම්භ වේ). -1 හි අගය ද භාවිතා කළ හැකිය; එහි ප්‍රති result ලය වනුයේ නව පේළිය අවසාන ස්ථානයේ ඇතුළත් කිරීමයි.

මෙම පරාමිතිය ෆයර්ෆොක්ස් සහ ඔපෙරා වල අවශ්‍ය වේ , නමුත් එය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර්, ක්‍රෝම් සහ සෆාරි වල අත්‍යවශ්‍ය නොවේ .

මෙම පරාමිතිය මඟ හැරී ඇත්නම්, insertRow()ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි අවසාන ස්ථානයේ සහ ක්‍රෝම් සහ සෆාරි හි පළමු ස්ථානයේ නව පේළියක් ඇතුළත් කරයි.

HTML වගුවේ පිළිගත හැකි සෑම ව්‍යුහයක් සඳහාම එය ක්‍රියා කරනු ඇත.

පහත උදාහරණය මඟින් පේළියක් අන්තිමට ඇතුළත් කරනු ඇත (-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 > 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>');

මෙන්න ඩෙමෝ ෆිදෙල්

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

මෙන්න ඩෙමෝ ෆිදෙල්

JQuery හි "අවසාන ()" ශ්‍රිතය භාවිතයෙන් මෙය පහසුවෙන් කළ හැකිය.

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

වගුවේ කිසිදු පේළියක් නොමැති විට මම මේ ආකාරයෙන් භාවිතා කරමි, එසේම සෑම පේළියක්ම තරමක් සංකීර්ණ වේ.

style.css:

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

xxx.html

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

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

...

මෙහි පළ කර ඇති හොඳම විසඳුම සඳහා, අවසාන පේළියේ කැදැලි වගුවක් තිබේ නම්, නව පේළිය ප්‍රධාන වගුව වෙනුවට කැදැලි වගුවට එකතු වේ. ඉක්මන් විසඳුමක් (ටොබී සමඟ / රහිතව වගු සහ කැදැලි සහිත වගු සලකා බැලීම):

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

මම එය මේ ආකාරයෙන් විසඳුවා.

Jquery භාවිතා කිරීම

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

ස්නිපෙට්

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>New York</td>
  </tr>
</table>

මට අදාළ ගැටළු කිහිපයක් ඇති අතර, ක්ලික් කළ පේළියට පසුව වගු පේළියක් ඇතුළු කිරීමට උත්සාහ කරමි. .Aft () ඇමතුම හැර අන් සියල්ලම අවසන් පේළිය සඳහා ක්‍රියා නොකරයි.

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

මම ගොඩ බැස්සේ ඉතා අපිරිසිදු විසඳුමක් සමඟයි:

පහත වගුව සාදන්න (එක් එක් පේළිය සඳහා හැඳුනුම්පත):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

etc ...

ඊළගට :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

ඔබට මෙම විශිෂ්ට jQuery එකතු කිරීමේ වගු පේළි ශ්‍රිතය භාවිතා කළ හැකිය . ඇති වගු සමඟ එය විශිෂ්ට ලෙස ක්‍රියා කරයි<tbody> සහ නැති . එය ඔබගේ අවසාන වගු පේළියේ කොල්ස්පන් ද සැලකිල්ලට ගනී.

මෙන්න උදාහරණ භාවිතය:

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

මගේ විසඳුම:

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

භාවිතය:

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

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

නීල්ගේ පිළිතුර බොහෝ දුරට හොඳම පිළිතුරයි . කෙසේ වෙතත් දේවල් වේගයෙන් අවුල් සහගත වේ. මගේ යෝජනාව වනුයේ මූලද්‍රව්‍ය ගබඩා කිරීම සඳහා විචල්‍යයන් භාවිතා කර ඒවා DOM ධූරාවලියට එකතු කිරීමයි.

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

ජාවාස්ක්‍රිප්ට්

// 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">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

ජාවාස්ක්‍රිප්ට් ශ්‍රිතයක් සමඟ ලියන්න

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

වගු පේළි කළමනාකරණය කිරීම සඳහා මෙම AddRow ප්ලගිනය බෙහෙවින් ප්‍රයෝජනවත් බව මට පෙනී ගියේය . ඔබට නව පේළියක් එක් කිරීමට අවශ්‍ය නම් ලූක්ගේ විසඳුම වඩාත් සුදුසුය.

මෙන්න හැක්ටි හැක් කේත කිහිපයක්. HTML පිටුවක පේළි අච්චුවක් පවත්වා ගැනීමට මට අවශ්‍ය විය . වගු පේළි 0 ... n ඉල්ලුම් කරන වේලාවේදී ඉදිරිපත් කර ඇති අතර, මෙම උදාහරණයේ එක් දෘඩ කේත පේළියක් සහ සරල කළ අච්චු පේළියක් ඇත. අච්චු වගුව සැඟවී ඇති අතර පේළි ටැගය වලංගු වගුවක් තුළ තිබිය යුතුය, නැතහොත් බ්‍රව්සර් එය DOM ගසෙන් ඉවත් කළ හැකිය . පේළියක් එක් කිරීම කවුන්ටරය + 1 හදුනාගැනීමක් භාවිතා කරන අතර දත්ත අගය තුළ වත්මන් අගය පවත්වා ගනී. සෑම පේළියකටම අද්විතීය URL පරාමිතීන් ලැබෙන බව සහතික කරයි .

මම ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9, ෆයර්ෆොක්ස්, ක්‍රෝම්, ඔපෙරා, නොකියා ලුමියා 800 , නොකියා සී 7 ( සිම්බියන් 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();
}

PS: මම jQuery කණ්ඩායමට සියලු බැර කිරීම් ලබා දෙනවා; ඔවුන් සියල්ලටම සුදුසුයි. JQuery නොමැතිව ජාවාස්ක්‍රිප්ට් ක්‍රමලේඛනය - මට ඒ බියකරු සිහිනය ගැන සිතීමටවත් අවශ්‍ය නැත.

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

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

මම හිතන්නේ මම මගේ ව්‍යාපෘතියේ කර ඇති බව, මෙන්න එයයි:

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

මට ක්‍රමයක් ඇති බැවින් අන්තිමට හෝ කිසියම් නිශ්චිත ස්ථානයක පේළියක් එක් කරන්න, එබැවින් මම මෙයද බෙදා ගත යුතු යැයි සිතමි:

පළමුව දිග හෝ පේළි සොයා ගන්න:

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

ඉන්පසු ඔබේ පේළිය එක් කිරීමට පහත කේතය භාවිතා කරන්න:

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

මාතෘකාව පිළිබඳ හොඳ උදාහරණයක් එකතු කිරීම සඳහා, ඔබට නිශ්චිත ස්ථානයක පේළියක් එක් කිරීමට අවශ්‍ය නම් වැඩ කිරීමේ විසඳුම මෙන්න.

අමතර පේළිය 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);
}

මම අන්තර්ගතය මේසයට පහළින් සූදානම් (සැඟවුණු) බහාලුමක් මත තැබුවෙමි .. එබැවින් ඔබ (හෝ නිර්මාණකරු) වෙනස් කළ යුතු නම් එය JS සංස්කරණය කිරීම අවශ්‍ය නොවේ.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

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

ඔබට පාදක විචල්‍යය හැඹිලිගත කර DOM වෙත ප්‍රවේශය අඩු කළ හැකිය (සටහන: පාදකය වෙනුවට ව්‍යාජ පේළියක් භාවිතා කිරීම වඩා හොඳ වනු ඇත).

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

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

කිසිවක් හෝ වර්තමානයක් මත පදනම්ව, වගුවේ පළමු කොටසට නව පේළියක් එක් කරයි . (JQuery හි කුමන අනුවාදයෙන්ද මට තොරතුරු හමු නොවීයTBODYTHEADTFOOT.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>

දෙවන උදාහරණයෙන් පසුව නොව a bපේළිය ඇතුළත් කරන්නේ කුමන උදාහරණයේදීද? වගුව හිස් නම්, jQuery නව පේළියක් සඳහා නිර්මාණය කරයි .1 23 4TBODY

ඔබ දත්ත සමුදා 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);

Datatables fnAddData Datatables API බලන්න

සරල ආකාරයකින්:

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

මෙය උත්සාහ කරන්න: ඉතා සරල ක්‍රමයක්

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>