运行下面的代码,保存为html格式,先认识这个例子的功能。
其中涉及到两个参数可能需要学习一下,一个是parseInt,一个是previousSibling,例子后面附有这两个参数的解释。
<html>
<head>
<title> </title><!--标题部分-->
<style type="text/css">
table{
border:0;
border-collapse:collapse;
}
td{
width:50px;
border:1px solid red;
height:100px;
vertical-align:top;
text-align:right;
}
#cls{
position:relative;
width:20px;
height:10px;
top:0px;
right:0px;
color:red;
padding:2px;
font-size:18px;
text-align:right;
cursor:pointer;
}
</style>
<script type="text/javascript" defer="defer">
function close_td(oNode){
oNode.style.display="none";
oNode.previousSibling.style.width=parseInt(oNode.previousSibling.style.width)*2+"px";
}
</script>
</head>
<body>
<table>
<tr>
<td style="width:100px;">A表格</td><td style="width:100px;"><div id="cls" onclick="close_td(this.parentNode)">×</div>B表格</td>
</table>
<br>
<table>
<tr>
<td style="width:100px;">c表格</td><td style="width:100px;"><div id="cls" onclick="close_td(this.parentNode)">×</div>D表格</td>
</body>
</html>
返回由字符串转换得到的整数。
parseInt(numString, [radix])
参数
numString
必选项。要转换为数字的字符串。
radix
可选项。在 2 和 36 之间的表示 numString 所保存数字的进制的值。如果没有提供,则前缀为 '0x' 的字符串被当作十六进制,前缀为 '0' 的字符串被当作八进制。所有其它字符串都被当作是十进制的。
说明
parseInt 方法返回与保存在 numString 中的数字值相等的整数。如果 numString 的前缀不能解释为整数,则返回 NaN(而不是数字)。
parseInt("abc") // 返回 NaN。parseInt("12abc") // 返回 12。可以用 isNaN 方法检测 NaN。
previousSibling 属性的作用是:返回已选元素的上一个同属节点(同级节点中的上一个)。
如果不存在这样的节点,那么该属性将返回null[空值]。
语法
elementNode.previousSibling注意:IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样。在下面的案例中,我们将书写一个用于检测上一个同属节点的节点类型的函数。元素节点包含的节点类行为1,因此,如果上一个同属节点不是元素节点,那么它将自动移动到再上一个节点并检测该节点是否是一个元素节点;这样的过程将一直持续下去直到发现的下一个同属节点是元素节点为止。通过使用这个方法,在IE浏览器或Mozilla浏览器中显示的结果就会同时正确。