javascript - JQuery মধ্যে টেবিল সারি যোগ করুন




html-table (20)

আপনার প্রস্তাবিত পদ্ধতিটি আপনাকে যা ফলাফল খুঁজছেন তা দেওয়ার নিশ্চয়তা দেয় না - উদাহরণস্বরূপ, যদি আপনার কাছে কোনও 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 একটি ভাল মন্তব্য করে যে সবসময় DOM একটি tbody হতে হবে; এই সত্য, কিন্তু অন্তত একটি সারি থাকলে শুধুমাত্র। যদি আপনার কোন সারি না থাকে, তবে আপনি যদি নিজেকে নির্দিষ্ট না tbody তবে কোনও tbody না।

DaRKoN_ শেষ tr পরে বিষয়বস্তু যোগ করার পরিবর্তে tbody যোগদান suggests । এটি কোনও সারি না থাকলেও বুলেটপ্রুফ হয় না কারণ আপনি তাত্ত্বিকভাবে একাধিক tbody উপাদানগুলি পেতে পারেন এবং সারিটি তাদের প্রতিটিতে যোগ করা হবে।

সবকিছু আপ ঝাঁকুনি, আমি নিশ্চিত না যে একটি একক এক লাইন সমাধান আছে যা প্রতিটি সম্ভাব্য দৃশ্যের জন্য হিসাব করে। আপনি আপনার মার্কআপ সঙ্গে jQuery কোড লম্বা নিশ্চিত করতে হবে।

আমার মনে হয় নিরাপদ সমাধান সম্ভবত আপনার table সবসময় আপনার মার্কআপে কমপক্ষে এক tbody রয়েছে কিনা তা নিশ্চিত করার জন্য, এটিতে কোনও সারি নেই। এই ভিত্তিতে, আপনি নিম্নলিখিতগুলি ব্যবহার করতে পারেন যা আপনার অনেকগুলি সারির কাজ করবে (এবং একাধিক tbody উপাদানের জন্যও অ্যাকাউন্ট):

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

শেষ সারির মতো একটি টেবিলের অতিরিক্ত সারি যোগ করতে 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'));

আমার মতে দ্রুততম এবং পরিষ্কার উপায়

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


আমার সমাধান:

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

ব্যবহার:

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

আমি এই AddRow প্লাগিন টেবিল সারি পরিচালনার জন্য বেশ দরকারী খুঁজে পাওয়া যায় নি। যদিও, আপনি যদি কেবল একটি নতুন সারি যুক্ত করতে চান তবে লূকের solution সবচেয়ে ভাল হবে।


আমি এই ভাবে সমাধান যা আমি মনে করি সবচেয়ে পাঠযোগ্য :)

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

আমি কিছু সম্পর্কিত বিষয় ছিল, ক্লিক সারি পরে একটি টেবিল সারি সন্নিবেশ করার চেষ্টা। সব পরে ভাল .after () কল শেষ সারির জন্য কাজ করে না।

$('#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 পদ্ধতি জন্য জিজ্ঞাসা করেছেন। আমি অনেক কিছু দেখেছি এবং আমরা নিম্নোক্ত ফাংশন দ্বারা সরাসরি জাভাস্ক্রিপ্ট ব্যবহার করার চেয়ে আরও ভাল ভাবে এটি করতে পারি।

tableObject.insertRow(index)

index একটি পূর্ণসংখ্যা যা সন্নিবেশ করানোর জন্য সারির অবস্থান নির্দিষ্ট করে (0 থেকে শুরু হয়)। -1 এর মানও ব্যবহার করা যেতে পারে; যার ফলে সর্বশেষ সারিতে নতুন সারি ঢোকানো হবে।

এই পরামিতিটি ফায়ারফক্স ও Opera , তবে এটি ইন্টারনেট এক্সপ্লোরার, Chrome এবং Safari ঐচ্ছিক।

যদি এই প্যারামিটারটি বাদ দেওয়া হয়, insertRow() ইন্টারনেট এক্সপ্লোরারের সর্বশেষ অবস্থান এবং ক্রোম এবং সাফারিতে প্রথম অবস্থানে একটি নতুন সারি 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').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

একটি সহজ পদ্ধতিতে:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</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>');

এটি jQuery এর "সর্বশেষ ()" ফাংশনটি ব্যবহার করে সহজে সম্পন্ন করা যেতে পারে।

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

ফ্লাইওভারের DOM উপাদানগুলি কাজে লাগানোর জন্য 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>

এটি কিছু চমত্কার অদ্ভুত ইন্ডেন্টিং, তবে এই উদাহরণটিতে কী চলছে তা আপনার পক্ষে সহজ।


বিষয়টিতে একটি ভাল উদাহরণ যোগ করার জন্য, যদি আপনি নির্দিষ্ট অবস্থানে একটি সারি যুক্ত করতে চান তবে এখানে সমাধান সমাধান রয়েছে।

অতিরিক্ত সারিটি 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>

যদি আপনার কাছে <tbody> এবং <tfoot> ?

যেমন:

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

তারপর এটি আপনার নতুন সারি পাদচরণে ঢোকাবে - শরীরের নয়।

অতএব সর্বোত্তম সমাধান হল <tbody> ট্যাগ <tbody> ট্যাগ অন্তর্ভুক্ত করা এবং ব্যবহার করা।

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

নিল এর উত্তরটি এখন পর্যন্ত সেরা। তবে জিনিস সত্যিই দ্রুত নোংরা পেতে। আমার পরামর্শ উপাদান সংরক্ষণ এবং ভেরিয়েবল ব্যবহার করা হবে তাদের DOM অনুক্রমের যোগ করুন।

এইচটিএমএল

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

আপনি পাদচরণ পরিবর্তনশীল ক্যাশে এবং DOM অ্যাক্সেস হ্রাস করতে পারেন (দ্রষ্টব্য: ফুটার পরিবর্তে একটি জাল সারি ব্যবহার করা ভাল হতে পারে)।

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






html-table