js实现点击按钮自动生成V字形，可连续点击四次 - 转角的夏天的博客 - CSDN博客
js实现点击按钮自动生成V字形，可连续点击四次
JavaScript
效果图大致如下：
代码如下：
&!DOCTYPE html&
自动生成V字形
=&text/css&&
height: 50
background:
font-size: 30
line-height: 50
text-align:
margin: 50
value=&自动生成V字形&
onclick=&do1('btn')&;&
=&text/javascript&&
var btn=document.getElementById(&btn&);
var div=document.getElementsByTagName('div');
var str='';
function do1(id){
document.getElementById(&btn&).onclick = do2;
function do2(id){
document.getElementById(&btn&).onclick = do3;
function do3(id){
document.getElementById(&btn&).onclick = do4;
function do4(id){
function fa(){
for(i=0;i&div.i++){
div[i].innerHTML=i;
if(i&div.length/2){
div[i].style.left=50*i+'px';
div[i].style.top=50*(i-j)+'px';
div[i].style.left=50*i+'px';
div[i].style.top=50*i+'px';
div[i].style.display=&block&;
/*btn.onclick=function(){
for(i=0;i&div.i++){
div[i].innerHTML=i;
div[i].style.left=50*i+50+'px';
div[i].style.top=50*i+'px';
div[i].style.left=50*(5-i)+'px';
div[i].style.top=50*i+'px';
div[i].style.display=&block&;
function fb(){
for(i=0;i&div.i++){
div[i].innerHTML=i;
div[i].style.left=50*i+50+'px';
div[i].style.top=50*i+'px';
div[i].style.left=50*(5-i)+'px';
div[i].style.top=50*i+'px';
div[i].style.display=&block&;
function fc(){
for(i=0;i&div.i++){
div[i].innerHTML=i;
div[i].style.left=50+50*i+'px';
div[i].style.top=50*(5-i)-50+'px';
div[i].style.left=50+50*i+'px';
div[i].style.top=50*i+'px';
div[i].style.display=&block&;
function fd(){
for(i=0;i&div.i++){
div[i].innerHTML=i;
div[i].style.left=50*(5-i)+'px';
div[i].style.top=50*i+'px';
div[i].style.left=50+50*(i)+'px';
div[i].style.top=50*i+'px';
div[i].style.display=&block&;
我的热门文章系统技术服务电话
信用平台:2，5
黄山杯:156 &
建筑施工现场广域网络考勤系统(“IFA”系统)技术服务电话
1&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&QQ:
安徽省建筑工程质量检测全过程监管系统(IMT)技术服务电话
安徽省工程建设信息网
安徽建筑业微信
公开查询平台
信用信息公开2506人阅读
springMVC（2）
mybatis（2）
前言：项目中需要做一个批量插入的功能，需求是这样的，添加应急队的同时为应急队添加队员，因为不知道每个队有多少个队员，所以需要用JS做一个自动添加行，自动减少行的功能。
关键字：springMVC批量插入，JS自动添加行，MyBatis批量插入。
&一，jsp代码：
&span style=&font-size:14&&&tr&
&td&姓名&/td&
&td&电话&/td&
&td&单位&/td&
&td&职务&/td&
&td&&img src=&${pageContext.request.contextPath}/admin/theme/${themeKey}/images/+++.png&
width=&22px& height=&22px&
onclick=&&span style=&color:#FF0000;&&addClomn()&/span&;&/&
  &td&&input type=&text& id=&uname& name=&uname&  style=&width: 100%;border-left:0border-top:0border-right:0border-bottom:0px& class=&validate[required]&/&&/td&
  &td&&input type=&text& id=&phone& name=&phone&  style=&width: 100%;border-left:0border-top:0border-right:0border-bottom:0px&  class=&validate[required]&/&&/td&
  &td&&input type=&text& id=&unit& name=&unit&  style=&width: 100%;border-left:0border-top:0border-right:0border-bottom:0px&  class=&validate[required]&/&&/td&
  &td&&input type=&text& id=&position& name=&position&  style=&width: 100%;border-left:0border-top:0border-right:0border-bottom:0px&  class=&validate[required]&/&&/td&
  &td&&/td&
&/span&注：当点击图片按钮时，触发onclick=&addClomn();&自动添加一行。
&/pre&&span style=&font-size:18&&对应的JS代码如下：&/span&&p&&/p&&p&&span style=&font-size:18&&&span style=&font-size:24&&&/span&&/span&&/p&&pre name=&code& class=&javascript&&&span style=&font-size:14&&//添加行
function addClomn() {
var newTr = tb_teamUser.insertRow();
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
var newTd5 = newTr.insertCell();
newTd0.innerHTML = '&tr&&td&&input type=&text& id=&uname& name=&uname&
style=&width: 100%;border-left:0border-top:0border-right:0border-bottom:0px&
class=&validate[required]&/&&/td&';
newTd1.innerHTML= '&td&&input type=&text& id=&phone& name=&phone&
style=&width: 100%;border-left:0border-top:0border-right:0border-bottom:0px&
class=&validate[required]&/&&/td&';
newTd2.innerHTML= '&td&&input type=&text& id=&unit& name=&unit&
style=&width: 100%;border-left:0border-top:0border-right:0border-bottom:0px&
class=&validate[required]&/&&/td&';
newTd3.innerHTML= '&td&&input type=&text& id=&position& name=&position&
style=&width: 100%;border-left:0border-top:0border-right:0border-bottom:0px&
class=&validate[required]&/&&/td&';
newTd5.innerHTML= '&td&&img src=&${pageContext.request.contextPath}/admin/theme/${themeKey}/images/---.png&
width=&22px& height=&22px&
&span style=&color:#FF0000;&&onclick=&deleteClomn(this)&/span&;&/&&/td&&/tr& ';
//删除对应的行
 function deleteClomn(r){
if(confirm(&确定要删除当前行?&))
var i=r.parentNode.parentNode.rowI
document.getElementById('tb_teamUser').deleteRow(i);
注：自动生成的行后面有一个减一行图片按钮，点击时触发：deleteClomn(r);
二，SpringMVC中接收多条数据，代码如下：
&span style=&font-size:14&&/**
* 判断应急队id,如果id为0,则执行添加操作，否则执行跟新操作
* @param request
* @param emergencyTeam 应急队-对象
* @param uname 队员姓名-数组
* @param position 职务-数组
* @param unit 单位- 数组
* @param phone 电话 -数组
@RequestMapping(&/edit&)
public ModelAndView edit(HttpServletRequest request,EmergencyTeam emergencyTeam,
&span style=&color:#FF0000;&&String[] uname,String[] position,String[] unit,String[] phone&/span&){
long emergencyTeam_
//获取操作人
String createUser=(String)request.getSession().getAttribute(LoginAttribute.SESSION_LOGIN_NAME);
Date createTime=new Date();
emergencyTeam.setCreateUser(createUser);
emergencyTeam.setCreateTime(createTime);
emergencyTeam.setLocation(&520123&);//设置所属地区，默认花溪
EmergencyTeamService.updateEmergencyTeam(emergencyTeam);//跟新应急队信息
EmergencyTeamService.deleteTeamUserByEmergencyTeamID(emergencyTeam.getId());//更新队员信息前删除原来的队员信息
List&TeamUser& list = new ArrayList&TeamUser&();
&span style=&color:#FF0000;&&for (int i = 0; i & uname. i++) {
TeamUser teamUser = new TeamUser();
teamUser.setEmergency_team(emergencyTeam.getId());
teamUser.setPhone(phone[i]);
teamUser.setPosition(position[i]);
teamUser.setUname(uname[i]);
teamUser.setUnit(unit[i]);
teamUser.setAttchId(&aaa.png&);
list.add(teamUser);//将多个队员信息存入集合
//然后添加新的队员信息
EmergencyTeamService.addTeamUser(list);//添加应急队员信息
return new ModelAndView(&/ec/emergencyTeam/list&);
}&/span&注：我用的是数组接收的方式来接收多条数据，当然还有更好的方式，感兴趣的可以自己研究一下，因为的业务数据不是很复杂，所以我就用的数组。
三，MyBatis代码：
&span style=&font-size:14&&&!-- 批量插入应急队，队员信息--&
&insert id=&addTeamUser& parameterType=&java.util.List&&
insert into
isp_ec_emergencyuser(uname,phone,unit,position,emergency_team,attchId)
&foreach collection=&list& item=&item& index=&index& separator=&,&&
(#{item.uname},#{item.phone},#{item.unit},#{item.position},#{item.emergency_team},#{item.attchId})
&/foreach&
&/insert&&/span&
结语：好了到此为止，批量插入操作，从前台到底层的实现都已经搞定了。
如果有不明白的，和不合理的地方，希望大家多多指教，我每天都会登录CSDN，会及时跟大家交流，一起提高。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 晚安！
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：24920次
排名：千里之外
原创：10篇
(1)(7)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'}