首页 > 教學 > html > 如何利用javascript做出選取方塊時,被選取的那一列背景會變色
2011
11-30

如何利用javascript做出選取方塊時,被選取的那一列背景會變色

看到gmail選取一封Email時,被選取的那一列表格底色會變色,覺得這樣很人性化,所以就上網查了一下資料,自己寫了一個簡單範例。

如何利用javascript做出選取方塊時,被選取的那一列背景會變色  - 第1张  | 彰化一整天blog1.執行畫面

如何利用javascript做出選取方塊時,被選取的那一列背景會變色  - 第2张  | 彰化一整天blog2.程式碼說明

<form>
<table border=1 width=80 align=center>
<tr><td>選取</td><td>編號</td></tr>
<tr id=trno[0]><td><input type=checkbox name=form_no  onclick="changecolor();"></td><td>1</td></tr>
<tr id=trno[1]><td><input type=checkbox name=form_no  onclick="changecolor();"></td><td>2</td></tr>
<tr id=trno[2]><td><input type=checkbox name=form_no  onclick="changecolor();"></td><td>3</td></tr>
<tr id=trno[3]><td><input type=checkbox name=form_no  onclick="changecolor();"></td><td>4</td></tr>
<tr id=trno[4]><td><input type=checkbox name=form_no  onclick="changecolor();"></td><td>5</td></tr>
</table>
</form>
<center>
訊息框:<span id="display">您尚未選取任何資料</span><br>
<input type=button  value="全選" onclick="all_select();">
<input type=button  value="全不選" onclick="no_select();">
<input type=button  value="反向選取" onclick="rev_select();">
<center>
<script type="text/javascript">
function changecolor()
{
   form_no=document.forms[0].form_no;
   n=0;
   for(i=0;i<form_no.length;++i)
     if(form_no[i].checked)
     {
        document.getElementById("trno["+i+"]").style.background ="#ff0000";
        n++;
     }
     else
        document.getElementById("trno["+i+"]").style.background ="#ffffff";

   if(n>0)
     document.getElementById("display").innerHTML="您目前選取<b><font color=blue>"+n+"</font></b>筆資料";
   else
     document.getElementById("display").innerHTML="您尚未選取任何資料";

}

function all_select()
{
   form_no=document.forms[0].form_no;
   for(i=0;i<form_no.length;++i)
     form_no[i].checked=true;

   changecolor();
}

function no_select()
{
   no=document.forms[0].form_no;
   for(i=0;i<form_no.length;++i)
     form_no[i].checked=false;

   changecolor();

}

function rev_select()
{
   form_no=document.forms[0].form_no;
   for(i=0;i<form_no.length;++i)
   	 if(form_no[i].checked)
	     form_no[i].checked=false;
	 else
	     form_no[i].checked=true;

  changecolor();

}

</script>
同步發表於:如何利用javascript做出選取方塊時,被選取的那一列背景會變色
最后编辑:
作者:明和 蔡
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。