JQuery এ টেবিল সারি যুক্ত করুন

Question

শেষ সারি হিসাবে কোনও টেবিলে অতিরিক্ত সারি যুক্ত করার জন্য jQuery এর সর্বোত্তম পদ্ধতি কী?

এটা কি গ্রহণযোগ্য?

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

আপনি এই জাতীয় টেবিলে কী যুক্ত করতে পারেন তার সীমাবদ্ধতা রয়েছে (যেমন ইনপুট, নির্বাচন, সারি সংখ্যা)?

Comments

থেক্সস অ্যাশ আমিও কেবল jQuery শিখছি এবং সর্বোত্তম উপায়, বিশেষত সহজ জিনিসগুলি খুঁজে বের করতে খুব কঠিন। এগুলি 2 টি প্রশ্ন হওয়ার কারণ হ'ল আমি একটি পোস্ট করেছি এবং প্রায় এক ঘন্টা পরে আমি বুঝতে পেরেছিলাম যে আমার অন্যটিটি রাখা উচিত ছিল এবং আমার মনে হয় না যে আমার প্রথমটি পরিবর্তন করা উচিত।

— ড্যারিল হেইন

এর কারণে: google.com/search?q=jquery+add+table+row

— ড্যারিল হেইন

এফওয়াইআই - একাধিক সংযোজন (প্রচুর পরিমাণে পারফরম্যান্সকে হ্রাস করে) ব্যবহার করা এড়িয়ে চলুন, বরং আপনার স্ট্রিংটি তৈরি করুন বা জাভাস্ক্রিপ্ট যুক্ত করুন যা আরও দ্রুত।

— জেরিট ব্রিংক

দেখুন: স্ট্যাকওভারফ্লো.com

— সুপার মডেল

সারি খুব জটিল হলে, আমি যা করি তা হ'ল, প্রয়োজনীয় কাঠামোর সাথে প্রথম সারিটি লুকিয়ে রাখুন, একটি ক্লোন তৈরি করুন এবং পাঠ্যটি সংশোধন করুন এবং প্রথম সারির পরে সন্নিবেশ করুন, আপনি যদি এইজ্যাক্স প্রতিক্রিয়া থেকে ডেটা আনেন তবে আপনার টেবিলটি তৈরি হবে, মনে রাখবেন এটি লুপের বাইরে ক্লোন করুন, তারপরে এটি লুপের অভ্যন্তরে সামগ্রী পরিবর্তন করতে ব্যবহার করুন। $ ("# মেইন টেবিল টবি") appপেনড (সারি); সারিটি হল পরিবর্তিত ক্লোন অনুলিপি :)

— আডাম

Answer 1

আপনি যে পদ্ধতির পরামর্শ দিচ্ছেন তার ফলাফল আপনাকে সন্ধানের গ্যারান্টিযুক্ত নয় - যদি আপনার কাছে 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()উপরের উদাহরণ অনুসারে একাধিক সারি সহ বৈধ এইচটিএমএল হওয়া পর্যন্ত আপনি কোনও পদ্ধতিতে অন্তর্ভুক্ত করতে পারেন ।

আপডেট: এই প্রশ্নের সাথে সাম্প্রতিক ক্রিয়াকলাপ অনুসরণ করে এই উত্তরের পুনর্বিবেচনা। চোখের পলকহীনতা একটি ভাল মন্তব্য করে যে ডমটিতে সর্বদা একটি থাকবে tbody; এটি সত্য, তবে কেবলমাত্র যদি সেখানে কমপক্ষে একটি সারি থাকে। আপনার যদি কোনও সারি না থাকে tbodyতবে আপনি নিজেই নির্দিষ্ট না করে থাকলে কোনও হবে না ।

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

সবকিছুর ওজন সহ, আমি নিশ্চিত নই যে এখানে একটি একক লাইন সমাধান রয়েছে যা প্রতিটি সম্ভাব্য দৃশ্যের জন্য দায়ী। আপনার নিশ্চিত করতে হবে যে jQuery কোডটি আপনার মার্কআপের সাথে লম্বা।

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

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

Comments

@ রমা, না এটা হবে না। এর চেয়ে আরও ভাল সমাধান হওয়া দরকার।

— ব্রায়ান লিয়াং

ডিওমে সর্বদা একজন টোডি থাকবে।

— চোখের পলকহীনতা

একটি খালি টডি যদিও আপনার এইচটিএমএলকে বৈধতা দেয় না

— ২২

অন্যথায় চমৎকার সমাধানের ক্ষেত্রে একটি সামান্য উন্নতি হবে নির্বাচকদের অনুকূল করা। আপনি এর $('#myTable').find('tbody:last')পরিবর্তে : গতি উন্নতি করতে পারেন $('#myTable > tbody:last')।

— এরিক ট্যারি সিলফ্রেসওয়ার্ড

"চোখের পলকহীনতা একটি ভাল মন্তব্য করে যে ডমটিতে সর্বদা একজন লোক থাকবে" - আমি কেবল একজনকে ছাড়াই এটি চেষ্টা করেছিলাম এবং এটি কাজ করে না - সেখানে কেবল কোনও ব্যক্তি থাকলে এটি কাজ করে।

— BrainSlugs83

Answer 2

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

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

Comments

যারা এটি চেষ্টা করছেন তাদের জন্য, বন্ধনীগুলির অবস্থানগুলি সাবধানে নোট করুন। যথাযথ বাসা বাঁধাই অত্যন্ত গুরুত্বপূর্ণ।

— রায়ান লুন্ডি

ক্লোজিং ট্যাগগুলির কী হবে? এগুলি কি প্রয়োজনীয় নয়?

— সেনফো

H ("# টেবিলক্লাসের নাম") আসলে $ ("# টেবিলআইডি") হওয়া উচিত না কেন হ্যাশ প্রতীকটি আইডিকে বোঝায় না ক্লাসের নামটি?

— ডেভ

আমি এই ধরনের অদ্ভুত শৃঙ্খলা ঘৃণা করি। এই জাতীয় জিনিসে পূর্ণ কোড বজায় রাখা দুঃস্বপ্ন।

— ব্যাঙ্কার

@senfo যুক্ত শিশু উপাদানগুলি সেগুলি স্বয়ংক্রিয়ভাবে তৈরি করবে।

— মিশেল ডি রুইটার

Answer 3

@ লুক বেনেট এই প্রশ্নের উত্তর দেওয়ার পর থেকে পরিস্থিতি পরিবর্তন হয়েছে । এখানে একটি আপডেট আছে।

jQuery এর যদি উপাদান আপনি (কোন ব্যবহার সন্নিবেশ করার চেষ্টা করছেন সংস্করণ 1.4 (?) স্বয়ংক্রিয়ভাবে সনাক্ত করে যেহেতু append(), prepend(), before(), অথবা after()পদ্ধতি) একটি হল <tr>এবং এটি টিপে প্রথম মধ্যে <tbody>আপনার টেবিল অথবা একটি নতুন সেটিকে গোপন <tbody>যদি এক না বিদ্যমান।

সুতরাং হ্যাঁ আপনার উদাহরণ কোডটি গ্রহণযোগ্য এবং jQuery 1.4+ এর সাথে দুর্দান্ত কাজ করবে। ;)

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

Comments

এই ধারণা নিয়ে সতর্ক থাকুন। যদি আপনার সংযুক্ত মার্কআপটি \ n বা \ n \ r দিয়ে শুরু হয়, jQuery সনাক্ত করবে না যে এটি একটি <tr> এবং এটি <table> এ সংযুক্ত করবে, <tbody> তে নয়। আমি কেবলমাত্র এমভিসি ভিউ দ্বারা উত্পাদিত মার্কআপের সাথে এর মুখোমুখি হয়েছিল যার শুরুতে একটি অতিরিক্ত লাইন ছিল।

— মিক

@ মিক্স মাথা চালানোর জন্য ধন্যবাদ! আমার ধারণা yourString.trim()এই প্রতিকার হতে পারে।

— সালমান ভন আব্বাস

অবশ্যই, তবে আপনাকে এটি সম্পর্কে ভাবতে হবে। <tbody> এ যুক্ত করার অভ্যাস করা ভাল তবে যদি আপনি জানেন যে একটি আছে।

— মিক

jQuery 3.1 এর জন্য এখনও একটি টডি নির্দিষ্ট করা দরকার। এটি এখানে দেখুন: jsfiddle.net/umaj5zz9/2

— user984003

এর ফলে আমার পৃষ্ঠাটি রিফ্রেশ হয়। আমি কীভাবে এটি প্রতিরোধ করতে পারি?

— আভি

Answer 4

আপনি যদি একটি <tbody>এবং একটি ছিল <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>");

Comments

আপনি আপনার টিফুটটি ভুলভাবে প্রয়োগ করেছেন। এটি টিডিটির আগে আসা উচিত, পরে নয় - w3.org/TR/html4/struct/tables.html#h-11.2.3 দেখুন । অতএব আমার সমাধানটি এখনও কাজ করে যদি না আপনি মানগুলি ভঙ্গ করতে চান (এই ক্ষেত্রে আপনি অন্যান্য জিনিসগুলিও ভুল হওয়ার আশা করতে পারেন)। আমার সলিউশনটিও আপনার কাজ করার ক্ষমতা রাখে বা না রাখে তা কার্যকর করে, অন্যদিকে যদি কেউ উপস্থিত না থাকে তবে আপনার প্রস্তাবটি ব্যর্থ হবে।

— লুক বনেট

<Tfoot /> এ কোনও ত্রুটি থাকা সত্ত্বেও এটি একটি আরও ভাল সমাধান। কোনও <টডি /> না থাকলে আপনি <টেবিল /> নিজেই একই কৌশলটি ব্যবহার করতে পারেন। যদিও "স্বীকৃত উত্তর" বিদ্যমান সারি রয়েছে কিনা তা দেখার জন্য একটি অতিরিক্ত চেক প্রয়োজন। (আমি জানি ওপি এই প্রয়োজনীয়তাটি নির্দিষ্ট করে নি, তবে এটি কোনও ব্যাপার নয় - এই কৌশলটির জন্য গুগল অনুসন্ধানে এই পোস্টটি প্রথম অবস্থানে এসেছে এবং সর্বোত্তম উত্তরটি শীর্ষে নেই))

— ক্লিভারপ্যাট্রিক

এটি অনুসন্ধানের চেয়ে ভাল সমাধান। বেশ কয়েকটি পুনরাবৃত্তিতে এই কৌশলটি সর্বদা কাজ করে বলে মনে হয়। একটি যুক্ত এফওয়াইআই হিসাবে, আপনি টেবিলের শুরুতে সারি যুক্ত করতে .pendend ব্যবহার করতে পারেন যেখানে .পেন্ড সারণির শেষে সারি রাখে।

— ল্যান্স ক্লিভল্যান্ড

এটি ভুল, এটি প্রত্যেকের সারিটিতে সারি যুক্ত করবে

— g

@ Garg10may আপনি কীভাবে পরামর্শ দিতে পারেন? এটি কোনও শিশু উপাদানকে নয়, টিবিটিকে টার্গেট করছে।

— চাদটি

Answer 5

আমি জানি আপনি একটি jQuery পদ্ধতি জিজ্ঞাসা করেছেন। আমি অনেকটা দেখেছি এবং দেখতে পেয়েছি যে আমরা নিম্নলিখিত ফাংশনটি দ্বারা সরাসরি জাভাস্ক্রিপ্ট ব্যবহার করার চেয়ে আরও ভাল উপায়ে এটি করতে পারি।

tableObject.insertRow(index)

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

এই প্যারামিটারটি ফায়ারফক্স এবং অপেরাতে প্রয়োজনীয় , তবে এটি ইন্টারনেট এক্সপ্লোরার, ক্রোম এবং সাফারিতে alচ্ছিক ।

যদি এই প্যারামিটারটি বাদ দেওয়া 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>

আমি আসা করি এটা সাহায্য করবে.

Comments

এই পদ্ধতির সমস্যাটি (যেমন আমি কেবল খুঁজে পেয়েছি) হ'ল যদি আপনার পাদলেখ থাকে তবে এটি ফুটারের পরে -1 সূচক হিসাবে যুক্ত করবে।

— kdubs

Answer 6

আমি সুপারিশ

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

Answer 7

আমার মতে দ্রুত এবং সুস্পষ্ট উপায় হ'ল

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

এখানে ডেমো ফিডল

আরও এইচটিএমএল পরিবর্তন করতে আমি একটি ছোট ক্রিয়াকলাপের প্রস্তাব দিতে পারি

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

এখানে ডেমো ফিডল

Comments

আপনার যদি একাধিক থাকে তবে tbodyআপনি একাধিক সন্নিবেশ পেতে পারেন

— মার্ক শুলথিস

হ্যাঁ আপনি পারেন :) আপনি $("SELECTOR").last()নিজের ট্যাগ সংগ্রহ সীমাবদ্ধ করার চেষ্টা করতে পারেন

— 818

Answer 8

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

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

Comments

ভাল ধারণা, তবে আমি মনে করি আপনি এই মুহূর্তে নির্বাচককে # টেবিলআইড ট্রিতে পরিবর্তন করতে চান আপনি টেবিলের নীচে সারিটি সারণীটি যুক্ত করতে চাইবেন।

— ড্যারিল হেইন

Answer 9

আমি এইভাবে ব্যবহার করছি যখন টেবিলের কোনও সারি নেই, পাশাপাশি প্রতিটি সারিটি বেশ জটিল।

style.css:

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

xxx.html

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

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

...

Comments

ধন্যবাদ. এটি খুব মার্জিত সমাধান। আমি পছন্দ করি এটি কীভাবে গ্রিডের মধ্যে টেমপ্লেটটি রাখে। এটি কোডটিকে এত সহজ এবং পড়া এবং বজায় রাখা সহজ করে তোলে। আবার ধন্যবাদ.

— রডনি

Answer 10

এখানে পোস্ট করা সেরা সমাধানের জন্য, যদি সর্বশেষ সারিতে নেস্টেড টেবিল থাকে তবে নতুন সারিটি মূল টেবিলের পরিবর্তে নেস্টেড টেবিলে যুক্ত হবে। একটি দ্রুত সমাধান (নীচে টেবিলযুক্ত টোডি এবং টেবিলগুলি বিবেচনা করে):

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

Answer 11

আমি এটি এইভাবে সমাধান।

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>

Comments

আমি সফলভাবে এখন একটি নতুন সারিতে গতিশীল ডেটা যোগ করতে পারেন কিন্তু এই পদ্ধতি ব্যবহার করে পরে, আমার কাস্টম ফিল্টার কাজ করছে না ..Do আপনি যে কোন সমাধান আছে T যখন আপনি হ্যাঁক

— অর্জুন

আমি মনে করি আপনাকে কোনও ধরণের আপডেট ফাংশন কল করতে হবে। উদাহরণ না দিয়ে বলতে চাইছি।

— অ্যান্টন ভিবিআর

Answer 12

আমার কিছু সম্পর্কিত সমস্যা ছিল, ক্লিক করা সারির পরে একটি সারণী সারি sertোকানোর চেষ্টা করছিলাম। শেষের সারির জন্য কল (কাজ) শেষ না করে ব্যতীত সমস্ত ঠিক আছে।

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

Comments

আমি মনে করি এটি বিদ্যমান প্রশ্নের উত্তর পরিবর্তে একটি নতুন প্রশ্ন হওয়া উচিত ...

— ড্যারিল হেইন

Answer 13

আপনি এই দুর্দান্ত jQuery টেবিল সারি ফাংশন যোগ করতে পারেন । এটি রয়েছে এমন টেবিলগুলির সাথে দুর্দান্ত কাজ করে <tbody>। এছাড়াও এটি আপনার শেষ সারণির সারিটির কলস্প্যান বিবেচনায় নেয়।

এখানে একটি উদাহরণ ব্যবহার:

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

Comments

আমি দেখতে পাচ্ছি না যে ভয়াবহভাবে দরকারী। এটি কেবল একটি টেবিলে খালি টেবিল সারি যুক্ত করে row সাধারণত, যদি সর্বদা না হয়, আপনি এটিতে কিছু ডেটা যুক্ত করে একটি নতুন টেবিল সারি যুক্ত করতে চান।

— ড্যারিল হেইন

তবে এটি সাধারণত আপনি চান এই ফাংশনটি আপনাকে আপনার যে কোনও টেবিলের সাথে খালি সারি যুক্ত করতে দেয়, আপনার যতগুলি কলাম এবং সারি স্প্যান থাকে তা বিবেচনা করে না, এটি এটি ইউনিভার্সাল ফাংশন করে। আপনি সেখান থেকে উদাহরণস্বরূপ $ ('। Tbl tr: last td') দিয়ে চালিয়ে যেতে পারেন। পুরো বিষয়টি হ'ল সার্বজনীন ক্রিয়াকলাপ !!!

— উজবেজোন

যদি আপনার ফাংশনটি আপনার নতুন সারিগুলিতে ডেটা যুক্ত করে, আপনি পরের বারে আপনার পরবর্তী প্রকল্পে এটি ব্যবহার করতে সক্ষম হবেন না। আসলকথা কি?! যদিও এটি আমার মতে, আপনার ভাগ করে নেওয়ার দরকার নেই ...

— উজবেকজান

আপনি যদি কোনও সাধারণ প্যাকেজের অংশ নয় এমন ক্রিয়াকলাপটি প্রস্তাব করেন তবে দয়া করে পুরো ফাংশন কোডটি এখানে রাখুন। ধন্যবাদ.

— ইয়েভেগেনি আফানসিয়েভ

Answer 14

আমার সমাধান:

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

ব্যবহার:

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

Comments

তো tbodyটেবিলে না থাকলে কি হয় .. ?? মানে <table>কোনও শিরোনাম না থাকলেও উপাদানটির ভিতরে সরাসরি সারি থাকতে পারে ।

— শাশ্বত

আমি আপনাকে <TBody> দিয়ে আপনার মার্কআপ রাখার জন্য সুপারিশ করব যাতে এটি HTML 5 স্ট্যান্ডার্ড পর্যন্ত হয় তবে তা না হলে আপনি সর্বদা $ (এটি) করতে পারবেন app TR> '); এটি সারণীতে একটি সারি যুক্ত করে।

— রিকি জি

আমি মনে করি আপনি যদি এটি কোনও ফাংশন তৈরি করতে যাচ্ছেন তবে আপনি সম্ভবত নতুন সারিটির জন্য একটি jQuery অবজেক্ট ফিরিয়ে দিতে পারেন যাতে এটি চেইনযোগ্য।

— বিশৃঙ্খলা

Answer 15

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

Comments

যদিও এটি একটি উত্তর হতে পারে, এটি পরে দর্শকের পক্ষে খুব কার্যকর নয় ... দয়া করে আপনার উত্তরের আশেপাশে কিছু ব্যাখ্যা যুক্ত করুন।

— জয়ন

Answer 16

নীলের উত্তর এখন পর্যন্ত সেরা best তবে জিনিসগুলি সত্যিই অগোছালো হয়ে যায়। আমার পরামর্শটি হ'ল উপাদানগুলি সংরক্ষণ করতে ভেরিয়েবলগুলি ব্যবহার করা এবং সেগুলি ডিওএম শ্রেণিবদ্ধের সাথে যুক্ত করা হবে।

এইচটিএমএল

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

Answer 17

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

একটি জাভাস্ক্রিপ্ট ফাংশন দিয়ে লিখুন

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

Answer 18

আমি এই অ্যাডআর প্লাগইনটি টেবিল সারিগুলি পরিচালনার জন্য বেশ দরকারী বলে মনে করেছি। যদিও, আপনার যদি নতুন একটি সারি যুক্ত করার প্রয়োজন হয় তবে লুকের সমাধানটি সবচেয়ে উপযুক্ত হবে।

Answer 19

এখানে কিছু হাক্টি হ্যাক কোড রয়েছে। আমি একটি HTML পৃষ্ঠায় একটি সারি টেম্পলেট বজায় রাখতে চেয়েছিলাম । সারণি সারি 0 ... n অনুরোধের সময় রেন্ডার করা হয় এবং এই উদাহরণটিতে একটি হার্ডকোডযুক্ত সারি এবং সরলীকৃত টেম্পলেট সারি রয়েছে। টেমপ্লেট টেবিলটি লুকানো আছে এবং সারি ট্যাগটি অবশ্যই একটি বৈধ টেবিলের মধ্যে থাকতে পারে বা ব্রাউজারগুলি এটি ডিওএম ট্রি থেকে ফেলে দিতে পারে । একটি সারি যুক্ত করা কাউন্টারে +1 সনাক্তকারী ব্যবহার করে এবং বর্তমান মানটি ডেটা অ্যাট্রিবিউটে বজায় থাকে। এটি প্রতিটি সারিতে অনন্য ইউআরএল প্যারামিটারের গ্যারান্টি দেয় ।

আমি ইন্টারনেট এক্সপ্লোরার 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();
}

পিএস: আমি সমস্ত ক্রেডিট jQuery টিমকে দিই; তারা সবকিছু প্রাপ্য। JQuery ছাড়াই জাভাস্ক্রিপ্ট প্রোগ্রামিং - আমি এমনকি সেই দুঃস্বপ্ন সম্পর্কে ভাবতে চাই না।

Answer 20

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

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

Answer 21

আমি অনুমান করি যে আমি আমার প্রকল্পে কাজ করেছি, এটি এখানে:

এইচটিএমএল

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

Answer 22

এটা আমার সমাধান

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

Answer 23

আপনার যদি অন্য ভেরিয়েবল থাকে তবে আপনি <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);

Answer 24

যেহেতু আমিও একটি উপায় পেয়েছি শেষ বা সুনির্দিষ্ট কোনও স্থানে সারি যুক্ত করা যাতে আমার মনে হয় আমারও এটি ভাগ করা উচিত:

প্রথমে দৈর্ঘ্য বা সারিগুলি সন্ধান করুন:

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

এবং তারপরে আপনার সারি যুক্ত করতে নীচের কোডটি ব্যবহার করুন:

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

Answer 25

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

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

Answer 26

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

আপনি পাদলেখের পরিবর্তনশীলটিকে ক্যাশে করতে পারেন এবং ডিওএমের অ্যাক্সেস হ্রাস করতে পারেন (দ্রষ্টব্য: পাদলেখের পরিবর্তে একটি জাল সারি ব্যবহার করা ভাল better

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

Answer 27

$('#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সারি পরে sertedোকানো হয় 1 2, 3 4দ্বিতীয় উদাহরণের পরে নয় । টেবিলটি ফাঁকা থাকলে, jQuery TBODYএকটি নতুন সারি তৈরি করে ।

Answer 28

আপনি যদি ডেটাটেবল জিকুয়েরি প্লাগইন ব্যবহার করেন তবে আপনি চেষ্টা করতে পারেন।

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 দেখুন Re

Answer 29

সরল উপায়ে:

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

Comments

আপনি যে উত্তরটি সরবরাহ করেন সে সম্পর্কে আরও কিছু বিবরণ যুক্ত করে আরও উত্তর দিতে পারেন?

— অ্যারিসোন

Answer 30

এটি চেষ্টা করুন: খুব সহজ উপায়

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