返回列标题的名称 [英] Returning the Name of a column header
问题描述
我需要你的帮助，
给定下面的html表格，我如何创建一个javascript功能，只要点击鼠标，就会提醒我名字的列标题？
即。如果我点击了COLORS标题，一个javascript框会弹出并提醒（COLORS）？
< html>
< head>
< / head>
< body>
< table border =1cellspacing =1width =500>
< tr>
< td> FRUITS< / td>
< td> COLORS< / td>
< td> VEGGIES< / td>
< td> NUMBERS< / td>
< / tr>
< tr>
< td> apples< / td>
< td>红色< / td>
< td>胡萝卜< / td>
< td> 123< / td>
< / tr>
< tr>
< td> oranges< / td>
< td> blue< / td>
< td>芹菜< / td>
< td> 456< / td>
< / tr>
< tr>
< td>梨< / td>
< td> green< / td>
< td> brocoli< / td>
< td> 789< / td>
< / tr>
< tr>
< td> mangos< / td>
< td>黄色< / td>
< td>生菜< / td>
< td> 098< / td>
< / tr>
< / table>
< / body>
< / html>
由于jQuery没有指定，非jQuery解决方案向您的单元格发送一个 onclick 事件：
< td的onclick = 警报（this.innerHTML）; >水果与LT; / TD>
jQuery可以大大简化此任务。您可以为所有单元格设置事件处理程序，并在一次调用中设置事件方法。
< tr id =headerRow >
< td> FRUITS< / td>
< td> COLORS< / td>
< td> VEGGIES< / td>
< td> NUMBERS< / td>
< / tr>
js：
code> $（function（）{// on DOM loaded method
$（'＃headerRow td'）。click（function（）{
alert（this.innerHTML）;
}）;
}）;
（类似非jquery概念）：
$ $
var arr = document.getElementById（'headerRow'）
.getElementsByTagName（ TD）;
for（var i = 0; i< arr.length; i ++）{
（function（_i）{
arr [_i] .onclick = function（）{alert（this.innerHTML）;};
}）（i）;
}
I need your help,
Given the html table below, how can I create a javascript function that will, at the click of a mouse, alert me the name of the column header?
Ie. if I click on the COLORS header, a javascript box will popup and alert("COLORS")?
<html>
<head>
</head>
<body>
<table border="1" cellspacing="1" width="500">
<tr>
<td>FRUITS</td>
<td>COLORS</td>
<td>VEGGIES</td>
<td>NUMBERS</td>
</tr>
<tr>
<td>apples</td>
<td>red</td>
<td>carrots</td>
<td>123</td>
</tr>
<tr>
<td>oranges</td>
<td>blue</td>
<td>celery</td>
<td>456</td>
</tr>
<tr>
<td>pears</td>
<td>green</td>
<td>brocoli</td>
<td>789</td>
</tr>
<tr>
<td>mangos</td>
<td>yellow</td>
<td>lettuce</td>
<td>098</td>
</tr>
</table>
</body>
</html>
Since jQuery was not specified, I'll give a non-jQuery solution. Give an onclick event to your cells like this:
<td onclick="alert(this.innerHTML);">FRUITS</td>
jQuery can greatly simplify this task. You can set the event handler for all cells and set the event method in one call.
<tr id="headerRow">
<td>FRUITS</td>
<td>COLORS</td>
<td>VEGGIES</td>
<td>NUMBERS</td>
</tr>
js:
$(function() { //on DOM loaded method
$('#headerRow td').click(function() {
alert(this.innerHTML);
});
});
(similar non-jquery concept):
//execute at end of document or in a DOM ready/loaded handler
var arr = document.getElementById('headerRow')
.getElementsByTagName("td");
for(var i = 0; i < arr.length; i++) {
(function(_i){
arr[_i].onclick = function() { alert(this.innerHTML); };
})(i);
}
这篇关于返回列标题的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
