मैं जावास्क्रिप्ट में तालिका पंक्तियों और कोशिकाओं के माध्यम से पुनरावृति कैसे करूं?

Question

अगर मेरे पास एक HTML तालिका है ... तो

<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

ex2, table.cells isn ब्राउज़र संगत

— EricG

@WilliamRemacle मैंने यह उत्तर लगभग 4 साल पहले पोस्ट किया था .. IE 9 उस समय एक विचार भी नहीं था!

— जॉन हार्टसॉक

@ जॉनहार्टसॉक मुझे पता है लेकिन मैंने आपके समाधान का इस्तेमाल किया और यह पता लगाया कि यह IE पर काम नहीं करता है। यह सिर्फ दूसरों को चेतावनी देने के लिए एक टिप्पणी है ... मैंने वैसे भी आपका जवाब दिया

— ;;

फ़ंक्शन itTable () {document.writeln ("itTable"); var तालिका = document.getElementById ("mytab"); (var i = 0, row; row; table =rows [i]; i ++) {document.writeln (i); के लिए (var j = 0, col; col = row.cells [j]; j ++) {document.writeln (j); }} document.writeln ("एंड-इटटेबल"); } यह कोड मुझे उपरोक्त तालिका के समान तालिका के माध्यम से लूप करने की अनुमति क्यों नहीं देगा।

— डग हाफ

उन लोगों के लिए (जो Google के माध्यम से यहां आ रहे हैं) को (कुछ पुराने / IE- उन्मुख कोड को पैच करने के लिए ) एक सरल और छोटे शिम की आवश्यकता है 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 का उपयोग न करने के बहुत सारे कारण हैं

— Bigjim

JQuery एक ऐसी चीज़ है जिसका मैंने कुछ समय में उपयोग नहीं किया है और बस एक नज़र में कुछ ऐसा लगता है जो जटिल है और इसमें आसानी से नहीं मिलता है। लेकिन मुझे लगता है कि यह सिर्फ इसलिए है क्योंकि मैंने इसका इतना उपयोग नहीं किया है।

— डग हाफ

JQuery को अस्वीकार करने का एक अन्य कारण एम्बेडेड वेबसाइटों के लिए है जैसे मैं एक एम्बेडेड वाईफाई चिप का उपयोग कर रहा हूं जिसमें पूरी वेबसाइट के लिए केवल 250Kb है। यह सभी छवियों के साथ एक निचोड़ है जैसा कि यह है।

— निक

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] .cells [c ++] होना चाहिए row.cells [c ++], पंक्ति वर्तमान वस्तु है, और sth कोड के लिए एक उदाहरण: mycoldata = cell.innerHTML

— फ़ाइबर Lulul

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

क्लीन मैं कहूंगा

— शोबी

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

बहुत सी भाषाएं आश्चर्यजनक रूप से समान हैं जब आप जानते हैं कि क्या देखना है। PHP प्रत्येक चर के सामने एक $ का उपयोग करेगी, यह नहीं है। var जावास्क्रिप्ट द्वारा उपयोग किया जाने वाला एक कीवर्ड है, PHP नहीं, हालांकि अगर वे इसे जोड़ते हैं तो मैं इसे याद कर सकता हूं। - संपादित करें - newline के लिए कोई प्रवेश नहीं ... जैसा कि मैं कहता हूं: तर्क सार्वभौमिक है। यह जानना कि इसे वैकल्पिक भाषाओं में कैसे बदलना है, यह एक अविश्वसनीय रूप से उपयोगी कौशल है जिसे सीखना मुश्किल नहीं है - हम उत्कृष्ट ज्ञान मिलान क्षमताओं के साथ बुद्धि के प्राणी हैं। प्रत्येक भाषा के बीच के बदलावों को पहचानें या बस

— लेक्सर

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

आप HTMLCollection के प्रोटोटाइप ऑब्जेक्ट को संशोधित कर सकते हैं (एक तरह से उपयोग करने की अनुमति देता है जो C # में एक्सटेंशन के तरीकों से मिलता है) और इसमें एक फ़ंक्शन एम्बेड करें जो संग्रह को सरणी में परिवर्तित करता है, जिससे ऊपर की शैली के साथ उच्च क्रम के फंकशन का उपयोग करने की अनुमति मिलती है (एक प्रकार की लाइनक शैली में) सी#):

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

Comments

बिना पढ़े टाइपरोर: अपरिभाषित की संपत्ति को पढ़ नहीं सकते हैं -> यह वही है जो मुझे मिला, जब मैंने इस समाधान की कोशिश की।

— विनेला थोनुपुनुरी

अजीब। मैंने इसे फिर से आजमाया और यह काम कर गया। मैं आपके द्वारा बताई गई त्रुटि को पुन: उत्पन्न नहीं कर सका। शायद समस्या ब्राउज़र है। मैंने एज और IE का उपयोग करके परीक्षण किया और दोनों ने काम नहीं किया। क्रोम, फ़ायरफ़ॉक्स और सफारी ने उम्मीद के मुताबिक काम किया।

— l30_4l3X

मैंने क्रोम का भी इस्तेमाल किया।

— विनेला थोनुपुनुरी

यह मेरे लिए भी काम करता है। Object.definePropertyस्पष्ट रूप से कोड के बाकी से पहले जाने के लिए है, लेकिन यह काम करता है। @Vineela Thonupunuri क्या आपने इसे सही क्रम में कोड के साथ आज़माया है?

— फ़्लिपिंगबिनरी

Answer 7

बेहतर समाधान: जावास्क्रिप्ट के मूल का उपयोग करें Array.from()और HTMLCollection ऑब्जेक्ट को एक सरणी में बदलने के लिए, जिसके बाद आप मानक सरणी फ़ंक्शन का उपयोग कर सकते हैं।

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