আমি কীভাবে জাভাস্ক্রিপ্টে টেবিল সারি এবং ঘরগুলি দিয়ে পুনরাবৃত্তি করব?

Question

আমার যদি এইচটিএমএল টেবিল থাকে ... বলুন

<div id="myTabDiv">
<table name="mytab" id="mytab1">
  <tr> 
    <td>col1 Val1</td>
    <td>col2 Val2</td>
  </tr>
  <tr>
    <td>col1 Val3</td>
    <td>col2 Val4</td>
  </tr>
</table>
</div>

আমি কীভাবে সমস্ত টেবিল সারিগুলিতে পুনরাবৃত্তি করব (ধরে নিলাম প্রতিটি বার যখন সন্ধান করা হবে তখন সারিগুলির সংখ্যাটি পরিবর্তিত হতে পারে) এবং জাভাস্ক্রিপ্টের মধ্যে থেকে প্রতিটি সারিতে প্রতিটি কক্ষের মানগুলি উদ্ধার করব?

Answer 1

আপনি যদি প্রতিটি সারিতে ( <tr>) সারণীটি জেনে / সনাক্ত করতে ( <tr>এবং <td>) প্রতিটি সারির ( <tr>) কলামের ( ) মাধ্যমে পুনরাবৃত্তি করতে চান , তবে এই পথে যাওয়ার উপায়।

var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     //iterate through columns
     //columns would be accessed using the "col" variable assigned in the for loop
   }  
}

আপনি যদি <td>সারিটি ( ) ব্যবহার করেন তবে আপনি কোন সারিতে আছেন তা উপেক্ষা করে যদি আপনি যেতে চান তবে এই উপায়টি।

var table = document.getElementById("mytab1");
for (var i = 0, cell; cell = table.cells[i]; i++) {
     //iterate through cells
     //cells would be accessed using the "cell" variable assigned in the for loop
}

Comments

এক্স 2, টেবিল.সেলস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নয়

— এরিকজি

@ উইলিয়ামআরমাইকেল আমি প্রায় 4 বছর আগে এই উত্তরটি পোস্ট করেছি .. আইই 9 সময়ও একটি চিন্তাও ছিল না!

— জন হার্টসক

@ জোহন হার্টসক আমি জানি তবে আমি আপনার সমাধানটি ব্যবহার করেছি এবং বুঝতে পেরেছি যে এটি আইই তে কাজ করে না। অন্যকে সতর্ক করার জন্য এটি কেবল একটি মন্তব্য ... আমি যাইহোক আপনার উত্তরটি ভোট দিয়েছি ;-)

— উইলিয়াম রেমাইকেল

ফাংশন itTable () {document.writeln ("itTable"); var table = document.getElementById ("mytab"); (var i = 0, সারি; সারি = টেবিল.রোজ [i]; i ++) {ডকুমেন্ট.রাইটেলন (i); (var j = 0, করল; কল = সারি। সেলগুলি [জে]; জে ++) {ডকুমেন্ট.রাইটেলন (জে); ;} ডকুমেন্ট.উইটেলন ("শেষ-ইট টেবিল"); Code এই কোডটি আমাকে উপরের মতো সারণির মধ্য দিয়ে লুপ করতে দেবে না কেন।

— ডগ হাউফ

যারা (Google এর মাধ্যমে এখানে আসছে) একটি প্রয়োজন জন্য সহজ এবং ছোট জন্য shim table.cells(কিছু পুরোনো / আই ই ওরিয়েন্টেড কোড আপ প্যাচ করা), দেখতে আমার উত্তর করতে প্রশ্নঃ নেই ফায়ারফক্স ব্রাউজার table.cells চিনতে না?

— গীতারল্যাব

Answer 2

আপনি jQuery ব্যবহার বিবেচনা করতে পারেন। JQuery এর সাহায্যে এটি অতি-সহজ এবং এটির মতো দেখায়:

$('#mytab1 tr').each(function(){
    $(this).find('td').each(function(){
        //do your stuff, you can use $(this) to get current cell
    })
})

Comments

Jquery ব্যবহার করতে পারবেন না ... সংস্থা এটি অনুমতি দেয় না। কেন জিজ্ঞাসা করবেন না।

— গ্রেগ

এটি একটি ক্রেজি নীতি। আপনি jQuery থেকে আপনার নিজের অ্যাপ্লিকেশন কোডে প্রয়োজনীয় প্রাসঙ্গিক ফাংশনগুলি কেবল অনুলিপি-এন-পেস্ট করতে পারতেন। অনলাইনে অন্য ব্যক্তির কোড ব্যবহারের বিরুদ্ধে কোনও নীতি না থাকলে তবে আপনি এখানে থাকবেন না।

— ক্লিনটন

@ জুডি: "ক্রেজি নীতি" সম্পর্কে একমত নন .... jQuery ব্যবহার না করার প্রচুর কারণ রয়েছে

— বিগজিম

জিকুয়েরি এমন একটি জিনিস যা আমি কিছু সময়ের জন্য ব্যবহার করি নি এবং কেবল এক নজরে এমন কিছু মনে হচ্ছে যা জটিল এবং সহজেই inোকা সহজ নয় But তবে আমি মনে করি এটি কেবল কারণ আমি এতো বেশি ব্যবহার করি নি।

— ডগ হাউফ

জিকুয়েরিকে অস্বীকার করার আরেকটি কারণ হ'ল এম্বেড করা ওয়েবসাইটগুলির জন্য যেমন আমি একটি এম্বেডড ওয়াইফাই চিপ ব্যবহার করছি যা পুরো ওয়েবসাইটের জন্য কেবল 250 কেবি রয়েছে। এটি সমস্ত চিত্র যেমন হয় তেমন একটি পিচ্ছিল।

— নিক

Answer 3

var table=document.getElementById("mytab1");
var r=0; //start counting rows in table
while(row=table.rows[r++])
{
  var c=0; //start counting columns in row
  while(cell=row.cells[c++])
  {
    cell.innerHTML='[R'+r+'C'+c+']'; // do sth with cell
  }
}

<table id="mytab1">
  <tr>
    <td>A1</td><td>A2</td><td>A3</td>
  </tr>
  <tr>
    <td>B1</td><td>B2</td><td>B3</td>
  </tr>
  <tr>
    <td>C1</td><td>C2</td><td>C3</td>
  </tr>
</table>

প্রতিটি পাসের মধ্যে লুপ আর / সি পুনরাবৃত্তি বৃদ্ধি এবং সংগ্রহ থেকে নতুন সারি / সেল অবজেক্টটি সারি / সেল ভেরিয়েবলগুলিতে বরাদ্দ করা হয়। সংগ্রহের মধ্যে আর কোনও সারি / ঘর নেই, লুপটি থামার সময় (প্রস্থান করা) মাধ্যমে সারি / সেল পরিবর্তনশীল এবং পুনরাবৃত্তিকে মিথ্যা বরাদ্দ করা হয়।

Comments

পূর্ববর্তী পোস্টে: যখন (সেল = সারি [r]। সেলগুলি [সি ++] সারি হওয়া উচিত ce সেলগুলি [সি ++] হওয়া উচিত, সারিটি বর্তমান অবজেক্ট এবং স্টেচ কোডের একটি উদাহরণ: মাইক্রোডাটা = সেল ইন্ডিএইচটিএমএল

— ফাইব লিটুল

Answer 4

চেষ্টা

for (let row of mytab1.rows) 
{
    for(let cell of row.cells) 
    {
       let val = cell.innerText; // your code below
    }
}

for (let row of mytab1.rows) 
{
    for(let cell of row.cells) 
    {
       console.log(cell.innerText)
    }
}

<div id="myTabDiv">
<table name="mytab" id="mytab1">
  <tr> 
    <td>col1 Val1</td>
    <td>col2 Val2</td>
  </tr>
  <tr>
    <td>col1 Val3</td>
    <td>col2 Val4</td>
  </tr>
</table>
</div>

for ( let [i,row] of [...mytab1.rows].entries() ) 
{
    for( let [j,cell] of [...row.cells].entries() ) 
    {
       console.log(`[${i},${j}] = ${cell.innerText}`)
    }
}

<div id="myTabDiv">
<table name="mytab" id="mytab1">
  <tr> 
    <td>col1 Val1</td>
    <td>col2 Val2</td>
  </tr>
  <tr>
    <td>col1 Val3</td>
    <td>col2 Val4</td>
  </tr>
</table>
</div>

Comments

পরিষ্কার আমি বলব

— শোবি 17

Answer 5

এই সমাধানটি আমার পক্ষে নিখুঁতভাবে কাজ করেছে

var table = document.getElementById("myTable").rows;
var y;
for(i = 0; i < # of rows; i++)
{    for(j = 0; j < # of columns; j++)
     {
         y = table[i].cells;
         //do something with cells in a row
         y[j].innerHTML = "";
     }
}

Comments

এটি কি জাভাস্ক্রিপ্ট? কারণ আপনার জন্য লুপটি কিছুটা পিএইচপি-র মতো দেখাচ্ছে।

— aravk33

আপনি কী কী সন্ধান করবেন তা জানেন যখন প্রচুর ভাষাগুলি আশ্চর্যজনকরকম হয়। পিএইচপি প্রতিটি ভেরিয়েবলের সামনে একটি $ ব্যবহার করবে, এটি হয় না। var এছাড়াও জাভাস্ক্রিপ্ট দ্বারা ব্যবহৃত একটি কীওয়ার্ড, পিএইচপি নয় যদিও তারা এটি যুক্ত করলে আমি এটি মিস করেছি have - এডিট-গাহ নতুন লাইনের জন্য প্রবেশ করান না ... যেমনটি আমি বলেছি: যুক্তি সর্বজনীন। বিকল্প ভাষাতে এটি কীভাবে প্রতিলিপি করা যায় তা জানা একটি অবিশ্বাস্যভাবে কার্যকর দক্ষতা যা শিখতে অসুবিধা হয় না - আমরা দুর্দান্ত প্যাটার্নের সাথে মেলে এমন দক্ষতার বুদ্ধিমানের প্রাণী। প্রতিটি ভাষার মধ্যে পরিবর্তনগুলি চিহ্নিত করুন বা কেবল লেকসার ভাষার সংজ্ঞাটি ব্যবহার করুন ...

— এসেলকুল

Answer 6

আপনি যদি একটি কার্যকরী শৈলীর সাথে এটি চান তবে:

    const table = document.getElementById("mytab1");
    const cells = table.rows.toArray()
                  .flatMap(row => row.cells.toArray())
                  .map(cell => cell.innerHTML); //["col1 Val1", "col2 Val2", "col1 Val3", "col2 Val4"]

আপনি এইচটিএমএল কালেকশনের প্রোটোটাইপ অবজেক্টটি পরিবর্তন করতে পারেন (সি # তে এক্সটেনশন পদ্ধতির অনুরূপ এমনভাবে ব্যবহারের মঞ্জুরি দিয়ে) এবং এতে একটি ফাংশন এম্বেড করতে পারেন যা সংগ্রহকে অ্যারেতে রূপান্তর করে, উপরের শৈলীর সাথে উচ্চতর অর্ডার ফানকিশন ব্যবহার করার অনুমতি দেয় (এ জাতীয় লিঙ্ক স্টাইলের ধরণে সি #):

    Object.defineProperty(HTMLCollection.prototype, "toArray", {
        value: function toArray() {
            return Array.prototype.slice.call(this, 0);
        },
        writable: true,
        configurable: true
    });

Comments

আনকড টাইপ এরির: অপরিজ্ঞাত - এর 'টু অ্যারে' সম্পত্তিটি পড়তে পারি না -> এই সমাধানটি চেষ্টা করার পরে আমি এটি পেয়েছিলাম।

— ভিনিলা থোনুপুনুরি

স্ট্রেঞ্জ। আমি আবার চেষ্টা করেছি এবং এটি কাজ করেছে। যদিও আপনি নির্দেশ করেছেন ত্রুটিটি আমি পুনরুত্পাদন করতে পারিনি। সমস্যাটি হ'ল ব্রাউজারটি। আমি এজ এবং আইই ব্যবহার করে পরীক্ষা করেছি এবং উভয়ই কার্যকর হয়নি। ক্রোম, ফায়ারফক্স এবং সাফারি আশানুরূপ কাজ করেছিল।

— l30_4l3X

আমিও ক্রোম ব্যবহার করেছি।

— ভিনিলা থোনুপুনুরি

এটি আমার পক্ষেও কাজ করে। Object.definePropertyস্পষ্টত কোড বাকি আগে যেতে আছে, কিন্তু এটি কাজ করে। @ ভিনিলা থোনুপুনুরি আপনি কি সঠিক ক্রমে কোড দিয়ে চেষ্টা করেছেন?

— ফ্লিপিংবাইনারি

Answer 7

আরও ভাল সমাধান: জাভাস্ক্রিপ্টের নেটিভ ব্যবহার করুন Array.from()এবং এইচটিএমএল সংগ্রহের অবজেক্টটিকে একটি অ্যারেতে রূপান্তর করতে, এর পরে আপনি স্ট্যান্ডার্ড অ্যারে ফাংশন ব্যবহার করতে পারেন।

var t = document.getElementById('mytab1');
if(t) {
    Array.from(t.rows).forEach((tr, row_ind) => {
        Array.from(tr.cells).forEach((cell, col_ind) => {
            console.log('Value at row/col [' + row_ind + ',' + col_ind + '] = ' + cell.textContent);
        });
    });
}

আপনি উল্লেখ করতে পারেন tr.rowIndexএবং cell.colIndexপরিবর্তে ব্যবহার করতে row_indএবংcol_ind ।

আমি অনেক শীর্ষ 2 সর্বোচ্চ ভোট উত্তর কারণ এটি গ্লোবাল ভেরিয়েবল সঙ্গে আপনার কোড বিশৃঙ্খল না ধরে এই পদ্ধতির পছন্দ i, j, rowএবংcol , সেইজন্য এবং এটা পরিষ্কার, মডুলার কোড কোন পার্শ্ব প্রতিক্রিয়া নেই করবে বিতরণ (অথবা বাড়াতে তিসি / কম্পাইলার সতর্কবার্তা) ... অন্যান্য লাইব্রেরি ছাড়া (যেমন jquery)।

আপনার যদি জাভাস্ক্রিপ্টের একটি পুরানো সংস্করণ (প্রাক ES2015) এ চালানোর প্রয়োজন হয় Array.fromতবে পলিফিল্ড করা যেতে পারে।

Answer 8

আপনি .querySelectorAll()সমস্ত tdউপাদান নির্বাচন করতে ব্যবহার করতে পারেন , তারপরে এগুলির সাথে লুপ করুন .forEach()। তাদের মানগুলি এর সাথে পুনরুদ্ধার করা যেতে পারে .innerHTML:

const cells = document.querySelectorAll('td');
cells.forEach(function(cell) {
  console.log(cell.innerHTML);
})

<table name="mytab" id="mytab1">
  <tr> 
    <td>col1 Val1</td>
    <td>col2 Val2</td>
  </tr>
  <tr>
    <td>col1 Val3</td>
    <td>col2 Val4</td>
  </tr>
</table>

আপনি যদি একটি নির্দিষ্ট সারি থেকে কেবল কলামগুলিই নির্বাচন করতে চান তবে শিশু সংযোজক ( ) এর সাথে একযোগে:nth-child() একটি নির্দিষ্ট বাছাই করার জন্য আপনি ছদ্ম-শ্রেণির ব্যবহার করতে পারেন (যা আপনার যদি কোনও টেবিলে টেবিল থাকে তবে দরকারী হতে পারে):tr>

const cells = document.querySelectorAll('tr:nth-child(2) > td');
cells.forEach(function(cell) {
  console.log(cell.innerHTML);
})

<table name="mytab" id="mytab1">
  <tr> 
    <td>col1 Val1</td>
    <td>col2 Val2</td>
  </tr>
  <tr>
    <td>col1 Val3</td>
    <td>col2 Val4</td>
  </tr>
</table>

Answer 9

লুপের জন্য একটি একক ব্যবহার:

var table = document.getElementById('tableID');  
var count = table.rows.length;  
for(var i=0; i<count; i++) {    
    console.log(table.rows[i]);    
}