asp.net动态添加文本框并获取内容添加到数据库中

最新推荐文章于 2020-03-27 14:16:48 发布

原创最新推荐文章于 2020-03-27 14:16:48 发布 · 2.5k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端控件的验证

这篇博客展示了如何使用ASP.NET实现动态添加文本框，并在用户输入内容后将其保存到数据库中。通过JavaScript函数`addRow()`动态插入表格行，每个行包含文本框供用户输入数据。当用户点击删除按钮时，`delRow()`函数用于移除指定行。最终，表单数据将被提交到后台进行处理。

下面是源码，前几天刚做的列子。注意一点：再添加时把它添加的行数记录，然后到到后台循环，取出这个控件的ID然后判断他的值是否为空！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS动态添加行</title>
<style type="text/css">
.top_t2_c1{
width:700px;
height:100%;
line-height:50px;
text-align:left;
   }
</style>
      <script type="text/javascript" language="javascript">
   var rows=0;
    function addRow(tableName)
    {
      var row=tableName.insertRow(tableName.rows.length);
      rows++;
      var col
      if(tableName==tabAdd)
      {
        col=row.insertCell(0);
        col.innerHTML=rows;
        col=row.insertCell(1);
        col.innerHTML="<input type='text' id='name"+rows+"' style='width:290px;' name='name"+rows+"'/>";
        col=row.insertCell(2);
        col.innerHTML="<input type='text' id='qty"+rows+"' name='qty"+rows+"' SIZE='5'/>";
        col=row.insertCell(3);
        col.innerHTML="<input type='text' id='remark"+rows+"' name='remark"+rows+"'/>";
        col=row.insertCell(4);
        col.innerHTML="<input type='button' id='btn"+rows+"' value='删除' onclick='delRow(this);'/>";
      }
    }
    function delRow(o)
    {
     var objTR =o.parentNode.parentNode;
   var currRowIndex= objTR.rowIndex;
   if(confirm("您确认要删除?"))
   {
     objTR.parentNode.deleteRow(currRowIndex);
   }
    }
    </script>
</head>
<body>
<form id="Form1" method="post">
   <div align="center" style="Height:100%;">
    <h1>办公用品请购单</h1>
    <table id="tabAdd" width="700" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#67b2ec" bordercolordark="#ffffff">
     <tr>
      <td width="40" class="left"><strong>序号</strong></td>
      <td width="290" class="left"><strong>名称</strong></td>
      <td width="60" class="left"><strong>数量</strong></td>
      <td width="146" class="left"><strong>备注</strong></td>
      <td class="left" style="TEXT-ALIGN:center;width:40px"><strong>删除</strong></td>
      <tr>
    </table>
    <div class="top_t2_c1" >
    <input type="button" onclick="addRow(tabAdd);" name="btnAdd" value="添加行">
    </div>
   </div>
</form>
</body>
</html>