JavaScript+CSS實作表格動态樣式

效果如圖：

實作代碼：

<style>

table.formdata/*表格樣式*/

{

border:1px solid #5f6f7e;

border-collapse:collapse;/*表格相鄰邊被合并 */

font-family:微軟雅黑;

font-size:10px;

padding:2px;

}

</style>

<script type="text/javascript">

function hilite(obj)

//選擇包含<input>的<td>标記

obj = document.getelementbyid("td"+obj.id.tostring());

obj.style.border = '2px solid #007eff'; //加粗、變色

function delite(obj)

obj.style.border = '0px solid #ababab'; //恢複回原來的邊框

</script>

<table class="formdata">

<tr>

<th></th>

<th>2004</th>

<th>2005</th>

<th>2006</th>

</tr>

<tr><!--onfocus聚焦時，onblur當光标離開時的事件;注意：td單元格的id比文本框的id多一個“td”，正是這樣才能選擇到包含<input>的<td>标記-->

<th style="width:50px;">張三</th>

<td id="tdzhangsan2004"><input type="text" id="zhangsan2004" onfocus="hilite(this);" onblur="delite(this);"></td>

<td id="tdzhangsan2005"><input type="text" id="zhangsan2005" onfocus="hilite(this);" onblur="delite(this);"></td>

<td id="tdzhangsan2006"><input type="text" id="zhangsan2006" onfocus="hilite(this);" onblur="delite(this);"></td>

<th>李四</th>

<td id="tdlisi2004"><input type="text" id="lisi2004" onfocus="hilite(this);" onblur="delite(this);"></td>

<td id="tdlisi2005"><input type="text" id="lisi2005" onfocus="hilite(this);" onblur="delite(this);"></td>

<td id="tdlisi2006"><input type="text" id="lisi2006" onfocus="hilite(this);" onblur="delite(this);"></td>

<th>王五</th>

<td id="tdwangwu2004"><input type="text" id="wangwu2004" onfocus="hilite(this);" onblur="delite(this);"></td>

<td id="tdwangwu2005"><input type="text" id="wangwu2005" onfocus="hilite(this);" onblur="delite(this);"></td>

<td id="tdwangwu2006"><input type="text" id="wangwu2006" onfocus="hilite(this);" onblur="delite(this);"></td>

</table>