页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

js实现用于建立新的一行且增加的四个文本框为空的且被禁用

发布：dxy 字体：[增加减小] 类型：转载

用于建立新的一行且增加的四个文本框为空的且被禁用

点击运行可以看到效果:

<html>  
<head>  
<meta http-equiv="Content-Language" content="zh-cn">  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">  
<meta name="ProgId" content="FrontPage.Editor.Document">  
<title>用户ID</title>  
<style>  
  
</style>  
<script language="javascript">  
<!--  
var row_index=0;  
//建立一个函数build_row()用于建立新的一行且增加的四个文本框为空的且被禁用  
function build_row(){  
    row_index++;  
    var new_row=Table1.insertRow(Table1.rows.length);  
    new_row.setAttribute("id", "row"+row_index);   
    var new_col=new_row.insertCell(0);  
    new_col.innerHTML="<input type='text' name='T1"+row_index+"' size='20' disabled>";  
    var new_col=new_row.insertCell(1);  
    new_col.innerHTML="<input type='text' name='T2"+row_index+"' size='20' disabled>";  
    var new_col=new_row.insertCell(2);  
    new_col.innerHTML="<input type='text' name='T3"+row_index+"' size='8' disabled>";  
    var new_col=new_row.insertCell(3);  
    new_col.innerHTML="<input type='text' name='T4"+row_index+"' size='8' disabled>";  
    var new_col=new_row.insertCell(4);  
    new_col.innerHTML="<input type='button' value='添加' name='B5"+row_index+"' LANGUAGE='javascript' onclick='add_data("+row_index+")'>";  
    var new_col=new_row.insertCell(5);  
    new_col.innerHTML="<input type='button' value='删除此行' name='B4"+row_index+"' LANGUAGE='javascript' onclick=\"delete_row('row"+row_index+ "')\">";  
    }  
//建立一个函数age_average()用于计算年龄的平均值  
function age_average()   
{  
    var i,j,temp,age_sum=0;var j=0;  
    for (i=1;i<=Table1.rows.length-1;i++)  
    {  
        temp=eval("form1.T4"+Table1.rows(i).id.substr(3));  
        if (temp.value==""){  
          
        j++;  
        age_sum=age_sum;  
        }  
        else{  
        age_sum+=parseInt(temp.value);  
        }  
          
    }  
    form1.T5.value=(age_sum/(Table1.rows.length-1-j));  
}  
//建立一个函数add_data()用于添加数据  
function add_data(rname){  
var i;  
form1.hidden_index.value=Table1.rows(rname).rowIndex;  
var win_new=open("list.htm")  
    }

//建立一个函数delete_row用于删除一行  
function delete_row(rname)   
{  
    var i;  
    i=Table1.rows(rname).rowIndex;  
    alert(i);  
    Table1.deleteRow(i);  
    }  
//建立一个函数check_form()用于检查文本框是否为空  
function check_form(){  
         var i;  
         for(i=1;i<=Table1.rows.length-1;i++){  
                if (eval("form1.T1"+Table1.rows(i).id.substr(3)).value=="" || eval("form1.T2"+Table1.rows(i).id.substr(3)).value=="" || eval("form1.T3"+Table1.rows(i).id.substr(3)).value=="" || eval("form1.T4"+Table1.rows(i).id.substr(3)).value==""){  
            alert("请检察是否有文本框为空");  
            return false;  
        }  
    }  
}

//-->  
</script>  
</head>    
<body>  
<form id=form1 method="POST" action="submit.htm" language="javascript" onsubmit="return check_form()" >  
<input type="hidden" name="hidden_index" value="">  
<table border="1" width="58%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" height="16" id=Table1>  
  <tr>  
    <td width="15%" align="center" bgcolor="#E6E6E6" height="16">用户ID </td>  
    <td width="24%" align="center" bgcolor="#E6E6E6" height="16">用户名</td>  
    <td width="7%" align="center" bgcolor="#E6E6E6" height="16">性别</td>  
    <td width="8%" align="center" bgcolor="#E6E6E6" height="16">年龄</td>  
    <td width="34%" align="center" bgcolor="#E6E6E6" height="16">添加</td>  
    <td width="21%" align="center" bgcolor="#E6E6E6" height="16">删除</td>  
  </tr>      
</table>  
  <input type="button" value="增加一行" name="B3"  onclick="build_row()"><input type="submit" value="提交" name="B1"><input type="button" value="平均年龄" name="B6" onClick="age_average()"><input type="text" name="T5" size="7">岁  
</form>

<table border="1" width="100%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" height="54">  
  <tr>  
    <td width="100%" bgcolor="#E6E6E6" height="27">  
      <p align="center">设计要求</td>  
  </tr>  
  <tr>  
    <td width="100%" height="93">1.当用户点击"增加一行",Table就增加一个Tr(包括四个文本框，"添加","删除此行"两个按钮。)。
  
     ł.增加的四个文本框为空的且被禁用，用户只要点击"添加"按钮来选择用户的值。
  
     Ń.当用户点击"添加"按钮,就弹出新窗口，新窗口为一用户列表，用户列表只有"用户ID"和"用户名"两个字段显示.
  
     ń.当选择用户列表Onmouseover时，鼠标变成"hand",当前行的TR的bgcolor为蓝色，字为白色。当用户onclick时，相应的值就添加到四个文本框中。新窗口自动关闭。
  
     Ņ.当用户点击"删除此行"按钮时，整个相应的Tr就被删除。
  
     ņ.算出"平均年龄"
  
     Ň.在提交前，要判断是否有文本框为空，用空的就不能提交，提示用户进行添加。</td>  
  </tr>  
  <tr>  
    <td width="100%" height="23" bgcolor="#E6E6E6">难度：较难?????????   
      完成时间：半天</td>  
  </tr>  
</table>

</body>

</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：js实现用于建立新的一行且增加的四个文本框为空的且被禁用

浏览次数：载入中... 打印本文关闭本文返回首页