首页 > web前端 > js教程 > 正文

JavaScript实现表中行的增加和删除

高洛峰
发布: 2016-11-26 14:13:35
原创
1430人浏览过

<%@ page  pageencoding="utf-8"%>
<%@ include file="/common/import.jsp" %>
 
<html>
  <head>
 <%@ include file="/common/header.jsp" %>
 
 </head>
 
 <body leftmargin=0 topmargin=0>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
 align=center border=0>
 
 <tr>
  <td height=30></td>
 </tr>
 <tr>
  <td height=10 align=center>
   <input type=button name="add" value="新增股东" onclick="addrow();">   
   <input type=button name="del" value="减少股东" onclick="delrow();">
  </td>
 </tr>
 <tr>
  <td valign=top>
  <!--<form id="form1" name="form1" action="" method="post">-->
   <table width="95%" border="1" align="center" cellpadding="1" id="tbl_gd" name="tbl_gd" cellspacing="0" bordercolor="#0099cc" style="line-height: 1.4; border-collapse: collapse" bgcolor="#ffffcc">
   <tr>
    <td align=center width=30%>股东名称</td>
    <td align=center width=30%>证照号码</td>
    <td align=center width=20%>出资额</td>
    <td align=center width=20%>出资比例(%)</td>
   </tr>
 
   <tr>
    <td align=left%>
          <input name="name1" id="name1" value="">
         </td>
    <td align=left%>
          <input name="cardno1" id="cardno1" value="">
         </td>
    <td align=left%>
          <input name="moneyinvested1" id="moneyinvested1" value="">
         </td>
    <td align=left%>
          <input name="percentage1" id="percentage1" value="">
         </td>
   </tr>
  
  </table>
  <!-- </form>-->
  </td>
 </tr>
 <tr>
  <td height=20></td>
 </tr>
 <tr>
  <td align="center" width="100%"><input type="button"
   onclick="save()" value="保存&转入下一步"></td>
 </tr>
 <tr>
  <td> </td>
 </tr>

</table>

</body>
<script language=javascript>
  function save(){
   if(!confirm("确实要保存并转入下一步吗?")){
    return;
   }
   getInfo();
   //qy_info.submit();
  }
  function addRow(){
   
    //添加一行
   
    var newTr = document.getElementById("tbl_gd").insertRow(-1);
    var index=newTr.rowIndex;
    //alert(index);
    
    //添加四列
   
    var newTd0 = newTr.insertCell(-1);
   
    var newTd1 = newTr.insertCell(-1);
   
    var newTd2 = newTr.insertCell(-1);
   
    var newTd3 = newTr.insertCell(-1);
   
   
    //设置列内容和属性
   
    newTd0.innerHTML ="<input name=\"name"+index+"\" id=\"name"+index+"\" value=\"\">"; 
   
    newTd1.innerHTML = "<input name=\"cardNo"+index+"\" id=\"cardNo"+index+"\" value=\"\">";
    newTd2.innerHTML = "<input name=\"moneyInvested"+index+"\" id=\"moneyInvested"+index+"\" value=\"\">";
    newTd3.innerHTML = "<input name=\"percentage"+index+"\" id=\"percentage"+index+"\" value=\"\">";
  }
 
  function delRow(){
   if(document.getElementById("tbl_gd").rows.length>2){
    document.getElementById("tbl_gd").deleteRow(-1);
   }
  }
  function getInfo(){
   var infoStr="";
   alert(name2.value);
   alert(tbl_gd.rows.length);
   for(var i=1;i<=tbl_gd.rows.length-1;i++){
   
    infoStr+=document.all.item("name"+i).value+"::";
    infoStr+=document.all.item("cardNo"+i).value+"::";
    infoStr+=document.all.item("moneyInvested"+i).value+"::";
    infoStr+=document.all.item("percentage"+i).value+";;";
   }
  
   alert(infoStr);
  }
 </script>
</html>

小清论坛 v2.1
小清论坛 v2.1

asp简单论坛小清论坛是一个以asp+access进行开发的简单论坛源码,要求很低,容易维护。 1、修改系统提示为跳转页面提示。 2、增加小黑屋、用户列表等页面,增加后台对管理员管理。 3、修复后台删人时,同时删除用户头像时出错的问题。 4、修复搜索词会出现乱码的情况。 5、增加后台可以对友情链接、版块进行排序的功能。 6、增加自动生成的二维码扫码功能(暂未有手机版对接)。 7、

小清论坛 v2.1 208
查看详情 小清论坛 v2.1
相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号