javascript当中操纵table的用法

操纵table
马克- to-win：马克 java社区：防盗版实名手机尾号： 73203。
例 2.1（CreateSelectOptionEventPassParamIEFF.html）



<HTML>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <TITLE></TITLE>
</HEAD>
<BODY id="bodyq">
<TABLE id="test" border="1" style="border-collapse:collapse">
    <TR>
        <TD>11</TD>
        <TD>12</TD>
        <TD>13</TD>
        <TD>14</TD>
    </TR>
    <TR>
        <TD>21</TD>
        <TD>22</TD>
        <TD>23</TD>
        <TD>24</TD>
    </TR>
</TABLE>
</BODY>
</HTML>
<script>
    function doimg(event)
    {
        var event = event || window.event;
        var eSource =event.srcElement||event.target;

/* 马克-to-win：下列实验可以通过event取到。以下的实验证明event.target 就是obj，马克-to-win：event.target是最上层的元素,本例中onChange只有select有，而option并没有 onChange这个概念。这就是为什么，event.target这个顶层元素是select,而不是option的原因。详情见例4.1.*/
        var obj= document.getElementById("city");
        alert("obj===event.target is"+ (obj===eSource));
        var inde=eSource.selectedIndex;
        alert(obj.value+inde);
        change(inde,obj.value);
    }
    var select = document.createElement("select");
    select.id="city";
    select.onchange = doimg;

    for (var i = 0 ; i < 2 ; i++)
    {
        var op = document.createElement("option");
        op.innerHTML='选项' +i;
        op.value="abc"+i;
        select.appendChild(op);
    }
    document.getElementById("bodyq").appendChild(select);

    function change(inde,valu)
    {
        var tb = document.getElementById("test");
        /*
         TABLE.rows[] (Collection):
         returned value is a Collection object:
         Object properties: length
         Object methods: Item(),
         qixy: note that here item(0) returns a TR object.
         TR object (Object/HTML)
         An object that encapsulates the row content of a table contained in a <TR> tag.
         Collections: cells[]
         TD object (Object/HTML)
         An object that encapsulates a single cell described by a <TD> tag.
         */
        /*
         Element object (Object/HTML): A common name for an object that represents an HTML tag or container.
         Object properties:  id, innerHTML,
         */

        tb.rows.item(inde).cells.item(0).innerHTML=valu;
        tb.rows.item(inde).cells.item(0).style.backgroundColor="red";
    }


</script>