js练习——动态控制表格中得行

<html>

<head>
    <title>动态添加</title>
    <script language="javascript">
        var value;
        function change()
        {
            var selectvalue = document.getElementById("se").selectedIndex;
            value = selectvalue;
        }

        function addHtml(r)
        {
            var row = document.getElementById("tb");
            var rownum ;

            if(r!=0)
            {
                rownum = r + 1;
            }
            else
            {
                //获得当前得行数
                var num = document.getElementById("tb").rows.length;
                //使添加得新行在表格底部
                rownum = num - 1;
            }
            row.insertRow(rownum);
            //值编号
            row.rows[rownum].insertCell(0);
            row.rows[rownum].cells[0].innerHTML="<input type='text'/>";
            //值代码
            row.rows[rownum].insertCell(1);
            row.rows[rownum].cells[1].innerHTML="<input  type='text'/>";

            if(value==2)
            {
                //最大值
                row.rows[rownum].insertCell(2);
                row.rows[rownum].cells[2].innerHTML="<input type='text'/>";
                //最小值
                row.rows[rownum].insertCell(3);
                row.rows[rownum].cells[3].innerHTML="<input type='text'/>";
            }
            else
            {
                //最大值
                row.rows[rownum].insertCell(2);
                row.rows[rownum].cells[2].innerHTML="<input type='text' value='不可用' disabled='disabled'/>";
                //最小值
                row.rows[rownum].insertCell(3);
                row.rows[rownum].cells[3].innerHTML="<input type='text' value='不可用' disabled='disabled'/>";

            }
            //值描述
            row.rows[rownum].insertCell(4);
            row.rows[rownum].cells[4].innerHTML="<input type='text'/>";
            //添加方式
            row.rows[rownum].insertCell(5);
            row.rows[rownum].cells[5].innerHTML="<select id='sys'><option value='0'>系统定义</option><option value='1'>用户定义            </option></select>";

            //操作
            row.rows[rownum].insertCell(6);
            row.rows[rownum].cells[6].innerHTML="<input type='button' value='+' onclick='addHtml("+rownum+")'/><input type='button' value='-' onclick='deleterow("+rownum+")'/>";
        }

        function deleterow(rnum)
        {
            var num = document.getElementById("tb").rows.length;

            if(rnum != num)
            {
                var aa = num - rnum ;
                if(aa == 1)
                {
                //防止删除最后一行
                    rnum = rnum - 1;

                }
                if(confirm('你确定要删除吗？'))
                {
                    var tbody = document.getElementById("tb");
                    tbody.deleteRow(rnum);
                }

            }
        }
    </script>
</head>
<body>

<form id="form1" name="form1" method="post" action="">
<select id="se" onchange="change()">
    <option value="num">数值</option>
    <option value="str">字符</option>
    <option value="strnum">数值+字符</option>
</select>
  <p>
    <input type="button" name="Submit2" value="Add" onclick="addHtml(000)"/>
  </p>
  <table width="50%" border="1" align="center">
  <tbody id="tb">
    <tr>
      <td align="center" valign="middle">值编号</td>
      <td align="center" valign="middle">值代码</td>
      <td align="center" valign="middle">最大值</td>
      <td align="center" valign="middle">最小值</td>
      <td align="center" valign="middle">值描述</td>
      <td align="center" valign="middle">添加方式</td>
      <td align="center" valign="middle">操作</td>
    </tr>

    <tr>
      <td colspan="7" align="center" valign="middle"><input type="submit" name="Submit" value="保存" /></td>
    </tr>
    </tbody>
  </table>
</form>
</body>
</html>