模仿asp.net的checkboxList控件

Question

<script type="text/javascript">
    function rowIn(obj){
        obj.style.backgroundColor="#316AC5";
        obj.style.color="#FFFFFF";
    }
    function rowOut(obj){
        obj.style.backgroundColor="#FFFFFF";
        obj.style.color="#000000";
    }
    function rowCheck(obj){
        obj.firstChild.firstChild.checked=!obj.firstChild.firstChild.checked;
    }
</script>
<select multiple>
<option>1</option>
<option>2</option>
</select>
<div style="width:200px;height:200px;border:1px solid #7F9DB9">
  <div style="margin:1px;width:195px;height:195px;overflow:auto;border-top:1px solid #716F64;border-left:1px solid #716F64;border-right:1px solid #F1EFE2;border-bottom:1px solid #F1EFE2">
   <table style="width:100%">
      <tr onmouseover="rowIn(this)" onmouseout="rowOut(this)" onclick="rowCheck(this)">
         <td><input type="checkbox" value="1">计划A</td>
      </tr>
      <tr onmouseover="rowIn(this)" onmouseout="rowOut(this)" onclick="rowCheck(this)">
         <td><input type="checkbox" value="2">计划B</td>
      </tr>
      <tr onmouseover="rowIn(this)" onmouseout="rowOut(this)" onclick="rowCheck(this)">
         <td><input type="checkbox" value="3">计划C</td>
      </tr>
      <tr onmouseover="rowIn(this)" onmouseout="rowOut(this)" onclick="rowCheck(this)">
         <td><input type="checkbox" value="4">计划D</td>
      </tr>
   </table>
  </div>
</div>
希望能帮助从事java Web开发兄弟姐妹们!

Answer 1

<script type="text/javascript">
    function rowIn(obj){
        obj.style.backgroundColor="#316AC5";
        obj.style.color="#FFFFFF";
    }
    function rowOut(obj){
        obj.style.backgroundColor="#FFFFFF";
        obj.style.color="#000000";
    }
    function rowCheck(obj){
        obj.firstChild.firstChild.checked=!obj.firstChild.firstChild.checked;
    }
</script>
<select multiple>
<option>1</option>
<option>2</option>
</select>
<div style="width:200px;height:200px;border:1px solid #7F9DB9">
  <div style="margin:1px;width:195px;height:195px;overflow:auto;border-top:1px solid #716F64;border-left:1px solid #716F64;border-right:1px solid #F1EFE2;border-bottom:1px solid #F1EFE2">
   <table style="width:100%">
      <tr onmouseover="rowIn(this)" onmouseout="rowOut(this)" onclick="rowCheck(this)">
         <td><input type="checkbox" value="1" onclick="this.checked=!this.checked">计划A</td>
      </tr>
      <tr onmouseover="rowIn(this)" onmouseout="rowOut(this)" onclick="rowCheck(this)">
         <td><input type="checkbox" value="2" onclick="this.checked=!this.checked">计划B</td>
      </tr>
      <tr onmouseover="rowIn(this)" onmouseout="rowOut(this)" onclick="rowCheck(this)">
         <td><input type="checkbox" value="3" onclick="this.checked=!this.checked">计划C</td>
      </tr>
      <tr onmouseover="rowIn(this)" onmouseout="rowOut(this)" onclick="rowCheck(this)">
         <td><input type="checkbox" value="4" onclick="this.checked=!this.checked">计划D</td>
      </tr>
   </table>
  </div>
</div>