有没有办法选择表中的特定行作为变量,然后更改它们的样式。例如:
<a onclick="hl(this)">1,2,5</a>
<table>
<tr>
<tr> <td>.....</td></tr>
<tr> <td>.....</td></tr>
<tr> <td>.....</td></tr>
<tr> <td>.....</td></tr>
</tr>
</table>
现在hl函数所做的是,当我点击它时,第1、2和5行应该高亮显示。我当时想的是,如果有,我可以通过提供类似的索引来对行进行某种选择
var m=table.rowIndex[1]
或者其他什么,然后做
m.style.background="something"
那么它可能会起作用,但我不知道该怎么办,所以请帮忙!
若要将行号作为标记的内容传递:
<script>
function hl(el){
arr = (el.innerHTML).split(",")
var t = document.getElementById("tbl")
for(var i=0; i<arr.length; i++){
t.rows[arr[i]].style.backgroundColor ="yellow";
}
return false;
}
</script>
和html
<table id="tbl">
<tr ><td >row 1</td></tr>
<tr><td>row 2</td></tr>
<tr><td>row 3</td></tr>
<tr><td>row 4</td></tr>
</table>
<a href="#" onclick="hl(this)">1,2,3</a>
如果你想让你的表行变成可点击的-所以不是通过数组,而是通过点击触发高亮显示-你必须这样做:
js
function regEvents(){
trs = document.getElementsByTagName("tr");
for (var i=0; i<trs.length;i++){
trs[i].onclick = hilite;
}
}
function hilite(){
this.style.background = "yellow";
}
html
<table id="tbl">
<tr ><td >row 1</td></tr>
<tr><td>row 2</td></tr>
<tr><td>row 3</td></tr>
<tr><td>row 4</td></tr>
</table>
在你的dom加载后绑定事件-所以把它放在你的html文件的末尾
<script>
regEvents();
</script>
在示例标记中,table
元素是a
元素之后的下一个同级元素。如果这真的是真的,那么:
function hl(anchor) {
var table = hl.nextSibling;
while (table && table.nodeName.toUpperCase() !== "TABLE") {
table = table.nextSibling;
}
if (table) {
var rows = table.getElementsByTagName('tr');
rows[0].className += " highlighted";
rows[1].className += " highlighted";
rows[4].className += " highlighted";
}
}
其中类"高亮显示"应用选择样式。这是假设没有嵌套表。
更多阅读:
- DOM2核心
- DOM2 HTML
- DOM3核心
FWIW,如果您还没有使用,我建议您使用一个好的JavaScript库,如jQuery、Prototype、YUI、Closure或其他任何库。它们为您消除了浏览器的差异,并提供了许多实用功能。
为函数命名有意义要好得多。此外,当按钮或其他元素(例如样式跨度)更适合时,不要使用A元素。A用于导航(锚和链接),而不是用于做事。
下面是一个使用rowIdex进行操作的示例。高亮显示的删除和添加可以放在同一个循环中,也可以记住闭包中以前高亮显示的行,使其更有效率。
但是,如果你处理的行数不到100行(或者可能更多),这对感知性能没有任何影响。
<script>
function hilightRows(id, rowindexes) {
var table = document.getElementById(id);
var rows;
if (table && rowindexes) {
// Remove any current highlighting
for (var j=0, jLen = table.rows.length; j < jLen; j++) {
table.rows[j].style.backgroundColor = '';
}
// Add new highlighting
for (var i=0, iLen = rowindexes.length; i<iLen; i++) {
table.rows[rowindexes[i]].style.backgroundColor = 'red';
}
}
}
</script>
<button onclick="hilightRows('t0', [1,2,5])">1, 2, 5</button>
<button onclick="hilightRows('t0', [3,0])">3, 0</button>
<button onclick="hilightRows('t0', [])">Remove highlight</button>
<table id="t0">
<tr><td>.....
<tr><td>.....
<tr><td>.....
<tr><td>.....
<tr><td>.....
<tr><td>.....
<tr><td>.....
</table>
正如林奇所说。。。jquery,尤其是函数index()。
$('#thingtobeclicked').click(function()
{
$('.selected').removeClass('selected');
$(this).data('indices').each(function(i){
$('#myTable tr:nth-child(i)').addClass('selected');
});
});
希望它能帮助别人或让我的2个代表积分回来…:)
我忘了说:为了实现这一点,你在要点击的东西的数据字段上设置了要选择的索引,如:
<a href='#' id='thingtobeclicked' data-indices='1,3,5'></a>
<table id='myTable'>...