[英]Get Table Row Column and Header JQuery
我有一個內容可編輯的表,我想檢索已編輯單元格的行,列和標題。 我已經設法獲得行,但我不知道如何獲取標題和列...
到目前為止的代碼:
document.addEventListener('keydown', function (event) {
var esc = el = event.target;
var row = $(el).rowIndex();
}
完整的解決方案: http : //jsfiddle.net/pLpKm/
HTML:
<div class"info">
<strong>Column number: </strong><span class="column"></span>
<br/>
<strong>Row number: </strong><span class="row"></span>
<br/>
<strong>Header text: </strong><span class="header"></span>
<br/>
</div>
<table cellpadding="0" cellspacing="0" border="1" style="width:200px; height:400px;">
<tr>
<th>
Heading 1
</th>
<th>
Heading 2
</th>
<th>
Heading 3
</th>
</tr>
<tr>
<td contentEditable>
</td>
<td contentEditable>
</td>
<td contentEditable>
</td>
</tr>
<tr>
<td contentEditable>
</td>
<td contentEditable>
</td>
<td contentEditable>
</td>
</tr>
<tr>
<td contentEditable>
</td>
<td contentEditable>
</td>
<td contentEditable>
</td>
</tr>
<tr>
<td contentEditable>
</td>
<td contentEditable>
</td>
<td contentEditable>
</td>
</tr>
</table>
JS:
$('table').on('keydown', function(e){
var columnNumber, rowNumber, headerText;
columnNumber = $(e.target).index() + 1;
rowNumber = $(e.target).parent().index() + 1;
headerText = $('th:nth-child(' + columnNumber + ')').text();
$('.column').html(columnNumber);
$('.row').html(rowNumber);
$('.header').html(headerText);
});
<table>
<tr>
<td>name1</td><td>name2</td><td>name3</td>
</tr>
<tr>
<td>name2.1</td><td>name2.2</td><td>name2.3</td>
</tr>
<script>
var tds=document.getElementsByTagName('table')[0].getElementsByTagName('td');
for(var i=0;i<tds.length;i++){
tds[i].onclick=function(){
//console.log(this.parentNode.tagName)//TR
//console.log(this.parentNode);
var tr=document.getElementsByTagName('table')[0].getElementsByTagName('tr');
for(var j=0;j<tr.length;j++){
if(tr[j]==this.parentNode){
console.log('row:'+j);//index row
var arrtd=tr[j].getElementsByTagName('td')
for(var m=0;m<arrtd.length;m++){
if(this==arrtd[m])
console.log('col:'+m);//index col
//break;
}
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.