জ্যাকুই একটি নির্দিষ্ট সূচকে নতুন সারিটি সারণিতে সন্নিবেশ করান

113

আমি jquery ব্যবহার করে কোনও টেবিলের মধ্যে কীভাবে একটি নতুন সারি সংযোজন বা যুক্ত করতে হবে তা আমি জানি:

$('#my_table > tbody:last').append(html);

আমি কীভাবে একটি সুনির্দিষ্ট "সারি সূচক" এ সারিটি (এইচটিএমএল ভেরিয়েবলে দেওয়া) সন্নিবেশ করব i। সুতরাং i=3, উদাহরণস্বরূপ, সারণিটি টেবিলের 4 র্থ সারি হিসাবে সন্নিবেশ করা হবে।

javascript jquery html-table

— aeq
সূত্র

একই নয়, তবে স্ট্যাকওভারফ্লো

— নাথান কোপ

158

আপনি এটি ব্যবহার করতে .eq()এবং .after()পছন্দ করতে পারেন :

$('#my_table > tbody > tr').eq(i-1).after(html);

সূচকগুলি 0 ভিত্তিক, সুতরাং 4 র্থ সারি i-1হওয়ার জন্য আপনার প্রয়োজন , যেহেতু .eq(3)4 র্থ সারি হবে, আপনাকে তৃতীয় সারিতে ফিরে যেতে হবে ( 2) এবং এটি সন্নিবেশ .after()করতে হবে।

— নিক ক্র্যাভার
সূত্র

8

এটি লক্ষ করা উচিত যে jQuery এর এক ফাংশনটিকে যদি একটি নেতিবাচক মান দেওয়া হয় তবে এটি টেবিলের শেষের দিকে লুপ করবে। সুতরাং এটি চালানো এবং 0 টি সূচীতে এটি সন্নিবেশ করানোর চেষ্টা করা হলে নতুন সারিটি শেষের দিকে সন্নিবেশিত হবে

— রসিসেডেড

2

এবং .before(html)আপনি যদি সেই সূচকের আগে এটি

— .োকাতে

1

এটি ব্যর্থ হয়, যদি টেবিলে কোনও সারি না থাকে, কারও কি এমন কোনও সমাধান রয়েছে (সূচী ভিত্তিক) যা প্রথম সারিতেও কাজ করে?

— মার্টিনএম

@ মার্টিনএম আপনি যদি কোনও সারি না থাকা সত্ত্বেও ?োকাচ্ছেন তবে এটি সম্পূর্ণ ভিন্ন দৃশ্য (যেখানে সূচকটি কোনও বিষয় নয়) - আপনি কি শেষ পর্যন্ত যুক্ত করতে চান?

— নিক Craver

@ নিকক্রাভার, না আমি কেবলমাত্র একটি সাধারণ সূচক ভিত্তিক সমাধান খুঁজছি (এটির মতো), তবে আমার টেবিলটি ভিক্ষার ফাঁকা রয়েছে..আমি অবশ্যই পরীক্ষা করতে পারি, টেবিলটি খালি রয়েছে এবং প্রথম সারিতে সন্নিবেশ করানো হয়েছে এবং তারপরে চালিয়ে যেতে হবে আপনার পদ্ধতি, তবে এটি আমার কাছে মার্জিত মনে হয় না ..

— মার্টিন এম

17

এটা চেষ্টা কর:

var i = 3;

$('#my_table > tbody > tr:eq(' + i + ')').after(html);

অথবা এটা:

var i = 3;

$('#my_table > tbody > tr').eq( i ).after(html);

অথবা এটা:

var i = 4;

$('#my_table > tbody > tr:nth-child(' + i + ')').after(html);

এগুলি সমস্ত সারি একই অবস্থানে রাখবে। nth-child1 ভিত্তিক সূচক ব্যবহার করে।

— user113716
সূত্র

4

বিঃদ্রঃ:

$('#my_table > tbody:last').append(newRow); // this will add new row inside tbody

$("table#myTable tr").last().after(newRow);  // this will add new row outside tbody 
                                             //i.e. between thead and tbody
                                             //.before() will also work similar

— নিলেশ আর মকওয়ানা
সূত্র

4

আমি জানি এটি দেরি হয়ে আসছে তবে যারা এই ব্যক্তিকে খাঁটিভাবে ব্যবহার করে এটি বাস্তবায়ন করতে চান তাদের জন্য JavaScriptআপনি কীভাবে এটি করতে পারেন তা এখানে:

trক্লিক করা বর্তমানের রেফারেন্স পান ।
একটি নতুন trডিওএম উপাদান তৈরি করুন ।
এটি রেফারেন্স trপ্যারেন্ট নোডে যুক্ত করুন।

এইচটিএমএল:

<table>
     <tr>
                    <td>
                        <button id="0" onclick="addRow()">Expand</button>
                    </td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
     </tr>

     <tr>
                    <td>
                        <button id="1" onclick="addRow()">Expand</button>
                    </td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
     </tr>
     <tr>
                    <td>
                        <button id="2" onclick="addRow()">Expand</button>
                    </td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
     </tr>

জাভাস্ক্রিপ্টে:

function addRow() {
        var evt = event.srcElement.id;
        var btn_clicked = document.getElementById(evt);
        var tr_referred = btn_clicked.parentNode.parentNode;
        var td = document.createElement('td');
        td.innerHTML = 'abc';
        var tr = document.createElement('tr');
        tr.appendChild(td);
        tr_referred.parentNode.insertBefore(tr, tr_referred.nextSibling);
        return tr;
    }

এটি বোতামটি ক্লিক করা সেই সারির ঠিক নীচে নতুন টেবিল সারি যুক্ত করবে।

— Prateek
সূত্র

2

এটা চেষ্টা কর:

$("table#myTable tr").last().after(data);

— আগুস পুরিয়ান্তো
সূত্র

1

ব্যবহার করুন EQ নির্বাচক n তম সারি (0 ভিত্তিক) selct এবং এটি ব্যবহার করার পর আপনার সারি যোগ করার জন্য পরে , তাই:

$('#my_table > tbody:last tr:eq(2)').after(html);

যেখানে এইচটিএমএল একটি tr

— আদম
সূত্র

1

$('#my_table tbody tr:nth-child(' + i + ')').after(html);

— Arjan
সূত্র

0

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

var arr = []; //array
if (your condition) {
  arr.push(row.id); //push row's id for eg: to the array
  idx = arr.sort().indexOf(row.id);

  if (idx === 0) {   
    if (arr.length === 1) {  //if array size is only 1 (currently pushed item)
        $("#tableID").append(row);
    }
    else {       //if array size more than 1, but index still 0, meaning inserted row must be the first row
       $("#tableID tr").eq(idx + 1).before(row);
    }   
  }          
  else {     //if index is greater than 0, meaning inserted row to be after specified index row
      $("#tableID tr").eq(idx).after(row);
  }    
}

আশা করি এটি কাউকে সাহায্য করবে।

— Jaggan_j
সূত্র

-1

$($('#my_table > tbody:last')[index]).append(html);

— এলি গ্রে
সূত্র

4

এটি সর্বদা পরিসীমা ব্যতিক্রমের বাইরে কোনও সূচকে ফলাফল করে।

— নিক Craver