JavaScript：Select被选中的列表项变化时，改变表格的行数

<strong>学历：</strong>
<select size=1 style="width:200px;" onchange='f1(this)'>
    <option>本科</option>
    <option>硕士</option>
</select><br><br>
<table>
	<tr>
        <td>学位</td>
        <td>学校名称</td>
        <td>专业名称</td>
        <td>导师</td>
    </tr>
	<tr>
        <td><input type='text' value='学士'/></td>
        <td><input type='text' /></td>
        <td><input type='text' /></td>
        <td><input type='text' /></td>
    </tr>
	<tr id='tr2' style="visibility:hidden;">
        <td><input type='text' value='硕士'/></td>
        <td><input type='text' /></td>
        <td><input type='text' /></td>
        <td><input type='text' /></td>
    </tr>
</table>

function f1(obj){
    if(obj.value=='本科')	 
        document.getElementById('tr2').style.visibility='hidden';
    if(obj.value=='硕士')
    	document.getElementById('tr2').style.visibility='visible';
}

注意，本应用中设置行是否显示使用的是<tr>标记的visibility属性；使用display属性会出现错误，错误如下图，错误的原因我也无法解释。

顺便提一下display:none 与 visiblity: hidden 的区别：

        visibility:hidden 隐藏元素，但仍占据布局中的空间。

        display:none 从文档中删除元素。它不会占据任何空间。