`
carey_pro
  • 浏览: 25063 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

js动态增加一组输入框

 
阅读更多
<html>
<head>
<script type="text/javascript">
var index;
index = 2;

//新增一条参数信息
function addParamConf(){
  s1 = "<input name='paramName"+index+"' class='style1' id='paramName"+index+"' dataType='Require' msg='参数名称不允许为空' type='text'  style='width:100%' value=''>";
  s2 = "<input name='paramValue"+index+"' class='style1' id='paramValue"+index+"' dataType='Require' msg='参数值不允许为空' type='text' style='width:100%' value=''>";
  s3 = "<input name='description"+index+"' class='style1' id='description"+index+"' type='text' style='width:100%' value=''>";
  s4 = "<a href=javascript:deleteParamConf('"+index+"')>删除</a>";
  arow = ParamConf.insertRow();
  arow.id="ParamConf"+index;
  c1 = arow.insertCell();
  c1.align="center";
  c1.className='td_rb';
  c1.innerHTML=s1;
 
  c2 = arow.insertCell();
  c2.align="center";
  c2.className='td_rb';
  c2.innerHTML=s2;
 
  c3 = arow.insertCell();
  c3.align="center";
  c3.className='td_rb';
  c3.innerHTML=s3;
 
  c4 = arow.insertCell();
  c4.align="center";
  c4.className='td_rb';
  c4.innerHTML=s4;
 
  index = index+1;
   //window_resize();
//initWindow(true);
}
//删除行
function deleteParamConf(index){
  if(window.confirm('确定要删除这条记录吗?')){
ParamConf.deleteRow(document.getElementById("ParamConf"+index).rowIndex);
this.index = this.index - 1;
  }
}
</script>


<title>147</title>
</head>
<body>
<table id="ParamConf" name="ParamConf" align="center" width="100%" border="1" style="border-collapse:collapse" bordercolor="#99CCFF" class="style1">
<form name="mobileParamForm" method="post" action="">
  <tr align="center">
    <td width="25%">id</td>
    <td width="25%">名称</td>
    <td width="40%">职务</td>
<td width="10%"><a href="javascript:addParamConf();">增加</a></td>
  </tr>
 
<tr id="ParamConf1">
  <td><input name="paramName1" class='style1' id="paramName1" type="text"  style="width:100%"></td>
  <td><input name="paramValue1" class='style1' id="paramValue1" type="text"  style="width:100%"></td>
  <td><input name="description1" class='style1' id="description1" type="text"  style="width:100%"></td>  
  <td align="center"><a href=javascript:deleteParamConf('1')>删除</a></td>
</tr>
</form>
</table>
</body>
</html>



分享到:
评论

相关推荐

    JSP中使用JavaScript动态插入删除输入框实现代码.docx

    一、JavaScript动态插入删除输入框的实现代码 在JSP中,使用JavaScript可以实现动态插入删除输入框的功能。下面是实现代码: ```javascript &lt;script language="javascript"&gt; function addrows(){ var len = ...

    js点击连续添加input输入框并且判断值

    在JavaScript编程中,"js点击连续添加input输入框并且判断值"这个功能是常见的动态表单构建场景。这种技术常用于需要用户输入不确定数量信息的情况,例如购物网站的商品添加、在线问卷调查等。下面我们将详细讲解...

    动态IP地址输入输入框\输入线

    在IT开发领域,尤其是网页和应用界面设计时,用户界面(UI)的细节至关重要,而“动态IP地址输入输入框”和“输入线”就是其中的一种常见元素。这两种设计方式都是为了提供用户友好的IP地址输入体验。让我们深入探讨...

    js动态添加输入框控件组,类似问卷调查问题以及答案的简单例子。

    本示例中的"js动态添加输入框控件组"就是这样一个应用场景,它展示了如何利用JavaScript来动态生成和管理输入框(input)控件,允许用户添加多组问题和答案。 首先,我们需要理解HTML表单的基础。表单是网页中用于...

    js实现输入框输入的自动匹配功能

    在JavaScript编程中,输入框自动匹配功能是一种常见的用户体验优化手段,尤其在搜索、表单填写等场景中广泛应用。这种功能可以实时地根据用户输入的内容,从预设的数据集中匹配并展示可能的选项,帮助用户快速找到...

    带输入框的下拉列表 select 输入框 过滤

    4. **事件监听**:在JavaScript中,需要监听输入框的事件,如`onkeyup`,每当用户在输入框中键入一个字符时,都会触发一个事件,执行相应的过滤函数。这确保了列表的实时更新,提高了用户体验。 5. **性能优化**:...

    JS实现单击输入框弹出选择框效果完整实例

    这个实例展示了如何利用JavaScript实现输入框和选择框之间的互动,使得用户在输入时可以方便地从一组预设选项中选取,同时将所选内容显示在输入框中。这样的设计常见于各种表单和搜索功能,提高了用户在网页上的操作...

    简单组合输入框+登录对话框+simpleLogin+html+js+css

    为了增加交互性,可能会使用JavaScript来禁用登录按钮,直到用户在两个输入框中都填入了信息。在CSS设计上,为了保持界面的简洁性,可能仅使用了必要的样式规则,避免了复杂的设计元素和动画效果。 通过组合使用...

    15个CSS3动态输入框input框代码

    3. **阴影效果**:`box-shadow`和`text-shadow`属性可以为输入框添加立体感和文字阴影,增加视觉层次感,使得输入框在交互时更具动态效果。 4. **过渡和动画**:`transition`属性用于平滑地改变一个或多个CSS属性,...

    bootstrap输入框组使用方法

    输入框组是其中的一个关键组件,它允许我们把输入框与其他元素(如按钮、图标或选择器)组合在一起,形成更复杂的用户界面。 首先,让我们了解基本的输入框组结构。在HTML代码中,`&lt;div class="input-group"&gt;` 用于...

    activiti将用户输入框修改为弹出选择框和中文编辑器

    在修改用户输入框为弹出选择框时,你需要对`stencilset.json`进行编辑,增加或修改对应的图形定义。例如,你可以为特定的任务节点(如User Task)添加一个新的属性,该属性表示该任务应使用一个下拉选择框而非普通的...

    输入框 自动完成 AJAX

    AJAX 不是单一的技术,而是一组用于创建动态网页的技术集合。它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这使得自动完成功能能够实时从后台获取数据,而不会打断用户的输入流程。 ...

    js和html模拟系统的ip地址输入框

    在这个场景中,我们讨论的是如何使用这两种技术来模拟一个系统级的IP地址输入框。这通常涉及到为用户提供一个界面,允许他们输入IPv4或IPv6地址,并进行有效的验证。 首先,让我们了解一下HTML。HTML(超文本标记...

    实现一个日历形式的日期输入框

    在IT行业中,构建一个日历形式的日期输入框是一个常见的需求,它能够为用户提供直观、易用的日期选择界面。这种功能广泛应用于各种Web应用程序,如在线预订系统、日程管理工具等。在这个主题中,我们将深入探讨如何...

    AmazeUI 输入框组

    AmazeUI 输入框组是基于前端开发框架AmazeUI中的一个重要组件,主要用于构建网页上的表单元素,尤其是涉及用户输入的场景。这个组件提供了一种高效、美观且响应式的解决方案,帮助开发者创建出符合现代Web设计标准的...

    JS 动态增加table

    在JavaScript中,动态增加table是一种常见的操作,尤其在网页交互和数据展示中。在这个场景中,我们看到的代码是用于JSP页面上的一个功能,它允许用户动态添加表格行(`&lt;tr&gt;`)到已有表格中。以下是相关知识点的详细...

    【JavaScript源代码】react+antd.3x实现ip输入框.docx

    在React和Ant Design 3.x框架下,实现一个IP输入框功能涉及到多个关键知识点,包括组件化开发、React状态管理、事件处理以及Ant Design的使用。以下是对这些知识点的详细说明: 1. **React组件**: - `IpInput`是...

    基于Bootstrap使用jQuery实现输入框组input-group的添加与删除

    为了实现动态添加和删除输入框组,我们可以编写一个自定义的jQuery插件,比如名为`inputGroup.js`。这个插件定义了一个`initInputGroup`方法,它接受一个配置对象作为参数,用于定制输入框的类型(文本域或输入框)...

    点击输入框弹出时间选择特效代码

    3. **JavaScript与事件处理**:实现这个功能通常需要使用JavaScript,一种广泛应用于网页动态效果和交互的编程语言。通过监听输入框的“click”事件,我们可以触发时间选择器的弹出。同时,还需要处理“change”事件...

    输入框的隐藏和显示

    本文将深入探讨如何实现一个简单的输入框的隐藏和显示功能,这一功能在许多应用程序中都非常常见,例如表单填写、搜索栏等。我们将主要关注JavaScript语言和HTML的交互,因为它们是构建动态Web页面的基础。 首先,...

Global site tag (gtag.js) - Google Analytics