js精确控制tr
在写了很多js后,会发现在js中总会出现各种各样奇怪的问题,主要的问题是不能获得所需要的对象.
一般来说,我们所需要获得的对象有几种办法获得:
1. ID 法,通过使用document.getElementById()这个方法获得用户所需的对象,你只需要在标签中加入id="yourIdName"这样的属性,你就可以用这个方法获得这个对象了.举个例子来说:有如下代码
<table><tr id='zergTr'><td>这里是zergpest的第一行</td></tr></table>
那么我们要获得这个tr,并且设置这个tr为不可见,应该这样做.请看如下代码:
<script type="text/javascript">
var zergpest = document.getElementById("zergTr");
zergpest.style.display = "none";
</script>
这样就可以通过使用document.getElementById() 这个方法来获得改对象,并且设置该对象为不可见.
但是,如果我们需要设置多个具有同样ID的对象不可见的时候,这个方法就不能用了,因为无论你怎么为后面的<tr>标签添加id属性,用document.getElementById()这个方法获得的只能是第一个具有该ID的对象,其实其他的ID这时候应该是属于伪Id了.你所要操作的只能操作到第一个具有该ID的对象,而不是具有所有你所设置的具有该ID的对象.那么这时候我们该怎么办呢,请看第2种方法.
2.Name法,通过使用document.getElementsByName()这个方法获得用户所需的对象,你需要做的是在标签中加入name="yourname"这样的属性,道理上说你就可以使用该方法获得该对象了.然而,有些时候确不是这样的,document.getElementsByName()这个方法其实主要是针对form标签中的对象有用,在form标签以外的对象就不一定有用了,这里说的不一定,是说有时候有用,有时候没有用.不过也可能和我用的IE7 beta3 有关,没有深入研究过.举个例子了说,有如下代码.
<table><tr name='zergTr'><td>这里是zergpest的第一行</td></tr></table>
<table><tr name='zergTr'><td>这里是zergpest的第二行</td></tr></table>
我们这里有二个相同的name,因为这个方法是获取具有多个name的,如果只有一个name的话,那么建议你用ID法来获取,而不要用这种,不然的话你需要进行判断length值.
我们可以用如下代码来获取该对象,并且设置该对象为不可见,代码如下:
<script type="text/javascript">
var zergpest = document.getElementsByName("zergTr");
if (!zergpest.length)
{
zergpest.style.display = "none";
}
else
{
for (var i=0;i<zergpest.length;i++)
{
zergpest[i].style.display = "none";
}
}
</script>
这样,道理上我们应该可以设置所有name值为zergTr的对象为不可见了,可是事实往往并不能如你所希望的,如果我们在<tr>前面加个<form>标签,那么结果就可以得到你所需要的结果了,但没有form标签的话,结果是有时候可以正确,有时候不正确,甚至不能获得对象.这时候,我们用第3种方法来解决,这就是轩辕的JS对象大招了.
3.超级Name大法,通过使用document.documentElement.getElementsByTagName()这个方法结合name法来获得这些你所需要的对象.还是用刚才的例子.如下:
<table><tr name='zergTr'><td>这里是zergpest的第一行</td></tr></table>
<table><tr name='zergTr'><td>这里是zergpest的第二行</td></tr></table>
这里我们需要设置该<tr>标签为不可见,而也不希望加上看着很不愉快的<form>标签,这时我们就需要用如下代码:
<script type="text/javascript">
var zergpest = document.documentElement.getElementsByTagName("tr");
if (!zergpest.length)
{
zergpest.style.display == "none";
}
else
{
var realZerg = [];
for (var i=0;i<zergpest.length;i++)
{
if (zergpest[i].name == "zergTr")
{
realZerg.push(zergpest[i]);
}
}
if (realZerg.length)
{
fo