सेल स्थान प्राप्त करें

Question

इसलिए मेरे पास यह तालिका है, और जब मैं td पर क्लिक करता हूं, तो मैं जानना चाहता हूं कि तत्वों पर किसी विशेषताओं के बिना वह कहां है (कौन सी पंक्ति और सेल)।

<table> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> // If I click on this I would like to know tr:1 & td:2 
      <td>3</td> 
     </tr> 

     <tr> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
     </tr> 

     <tr> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
    </tbody> 
</table> 

जावास्क्रिप्ट:

// Track onclicks on all td elements 

var table = document.getElementsByTagName("table")[0]; 
var cells = table.getElementsByTagName("td"); // 

for(var i = 1; i < cells.length; i++){ 
    // Cell Object 
    var cell = cells[i]; 
    // Track with onclick 
    cell.onclick = function(){ 
     // Track my location; 
     // example: I'm in table row 1 and I'm the 2th cell of this row 
    } 
} 

Answer 1

हैंडलर में, this, टेबल सेल है, इसलिए सेल सूचकांक के लिए ऐसा करते हैं:

var cellIndex = this.cellIndex + 1; // the + 1 is to give a 1 based index 

और पंक्ति सूचकांक के लिए, ऐसा करते हैं:

var rowIndex = this.parentNode.rowIndex + 1; 

उदाहरण:http://jsfiddle.net/fwZTc/1/

Answer 2

ठीक है, जब आपके पास रोस्पेन/कॉल्सपन आप, एक बहुत अधिक मज़ा कर सकते हैं लेकिन, अगर ग्रिड नियमित रूप से है, तो आप सिर्फ द्वारा अनुक्रमणिका से अपनी स्थिति का निर्धारण कर सकते हैं कर:

row = Math.floor(i/rows); 
column = i % columns; 

Answer 3

स्क्रिप्ट ब्लॉक आप जानकारी आप चाहें, तो प्रदान करेगा सेल करने के लिए गुण के रूप में जानकारी जोड़कर और फिर उन्हें onclick समारोह में पहुँचने के:

// Track onclicks on all td elements 
var table = document.getElementsByTagName("table")[0]; 
// Get all the rows in the table 
var rows = table.getElementsByTagName("tr"); 

for (var i = 0; i < rows.length; i++) { 
    //Get the cells in the given row 
    var cells = rows[i].getElementsByTagName("td"); 
    for (var j = 0; j < cells.length; j++) { 
     // Cell Object 
     var cell = cells[j]; 
     cell.rowIndex = i; 
     cell.positionIndex = j; 
     cell.totalCells = cells.length; 
     cell.totalRows = rows.length; 
     // Track with onclick 
     console.log(cell); 
     cell.onclick = function() { 
      alert("I am in row " + this.rowIndex + " (out of " + this.totalRows + " rows) and I am position " + this.positionIndex + " (out of " + this.totalCells + " cells)"); 
     }; 
    } 
} 

Answer 4

का उपयोग करते हुए "इस" कोशिकाओं की मेज पर

function myFunction(x) { 
 
     var tr = x.parentNode.rowIndex; 
 
     var td = x.cellIndex;   
 
     
 
     document.getElementById("tr").innerHTML = "Row index is: " + tr; 
 
     document.getElementById("td").innerHTML = "Column index is: " + td; 
 
     }

tr, th, td { 
 
    padding: 0.6rem; 
 
    border: 1px solid black 
 
} 
 

 
table:hover { 
 
    cursor: pointer; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
      <td onclick="myFunction(this)">1</td> 
 
      <td onclick="myFunction(this)">2</td> 
 
      <td onclick="myFunction(this)">3</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td onclick="myFunction(this)">4</td> 
 
      <td onclick="myFunction(this)">5</td> 
 
      <td onclick="myFunction(this)">6</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td onclick="myFunction(this)">7</td> 
 
      <td onclick="myFunction(this)">8</td> 
 
      <td onclick="myFunction(this)">9</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<p id="tr"></p> 
 
<p id="td"></p>