獲得第一個單元格中的內容在點擊列，並在HTML表格

我用下面的JavaScript來獲得在點擊表格單元格中的數據的點擊行的第一個單元格：獲得第一個單元格中的內容在點擊列，並在HTML表格

var table = document.getElementById('ThisWeek'), 
    cells = table.getElementsByTagName('td'); 

for (var i=0,len=cells.length; i<len; i++) 
{ 
    cells[i].onclick = function() 
    { 
     document.getElementById("txtVal").value = this.innerText; 
    } 
}

如何我可以修改這個，這樣我還可以獲取單擊列中第一個單元格的內容和單擊行中的第一個單元格的內容？例如。如果我在下表中點擊「S」，我得到的結果「2」和「B」返回兩個變量：

0 1 2 3 
A q w e 
B a s d 
C z x c

請注意，我需要一個JavaScript的解決方案，而不是jQuery的。理想情況下，我還希望點擊第一行和第一列來返回空字符串。

來源

2013-11-28 eby

你可以用'table.rows'和'行[N] .cells'收藏+'rowIndex'和'cellIndex' 'tr's和'td'的屬性。我還將事件處理委託給'table'本身，當你最好使用'addEventListener（）'來使用適當的事件附件時。請在[MDN]（https://developer.mozilla.org/en-US/docs/DOM）上搜索所有這些屬性。 – Teemu

該段使用我在我的評論中提到的屬性：

window.onload = function() { 
    var table = document.getElementById('table'); 
    table.addEventListener('click', function (e) { 
     var target = e.target, 
      col = target.cellIndex, 
      row; 
     while (target = target.parentElement) { 
      if (!col && col !== 0) { 
       col = target.cellIndex; 
      } 
      if (target.tagName.toLowerCase() === 'tr') { 
       row = target.rowIndex; 
       break; 
      }    
     } 
     console.log(table.rows[row].cells[0].innerHTML + ', ' + table.rows[0].cells[col].innerHTML); 
    }); 
}

A live demo at jsFiddle。

來源

2013-11-28 19:19:20 Teemu

我建議：

function index(c){ 
    var i = 0; 
    while (c.previousSibling){ 
     /* if the previousSibling has a nodeType and that nodeType === 1 
      (indicating the previousSibling is an element) increment the i variable */ 
     if (c.previousSibling.nodeType && c.previousSibling.nodeType === 1){ 
      i++; 
     } 
     // reset c to the previousSibling 
     c = c.previousSibling; 
    } 
    /* i is the count of previous-siblings, and therefore the index 
     amongst those siblings: */ 
    return i; 
} 

function getHeaders(e){ 
    /* this is the table element, 
     e.target is the clicked element */ 
    var el = e.target, 
     text = 'textContent' in document ? 'textContent' : 'innerText', 
     headers = [el.parentNode.getElementsByTagName('td')[0][text],this.getElementsByTagName('tr')[0].getElementsByTagName('td')[index(el)][text]]; 
    // set the text of the nextElementSibling of the table: 
    this.nextElementSibling[text] = headers.join(', '); 
} 

document.getElementById('table').addEventListener('click', getHeaders);

JS Fiddle demo。

來源

2013-11-28 19:40:59

這個失敗了，如果'td'裏面有一個元素的話......不錯的'textContent' /'innerText'檢測，我打算使用它; ）。 – Teemu

您可以添加到您的細胞[I] .onclick功能：

var row = this.parentElement; // TR 
var table = row.parentElement.parentElement; // TBODY > TABLE 
document.getElementById("columnVal").value = row.rowIndex && this.cellIndex ? table.rows[0].cells[this.cellIndex].innerText : ""; 
document.getElementById("rowVal").value = row.rowIndex && this.cellIndex ? row.cells[0].innerText : "";

來源

2013-11-28 20:14:22 Costel

獲得第一個單元格中的內容在點擊列，並在HTML表格

回答

相關問題