JavaScript innerHTML语句太长运行不了

要怎么实现我下面的功能
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'add_guest.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script language="javascript">
var i=0;
function addDiv(){
var vElement=document.createElement("div");
i=++i;
vElement.setAttribute("id",i);

vElement.innerHTML ='<table border="1" width="1300"><tr>'
     +' <td colspan="4"  bgcolor="#00CC00">联系人'+(i+1)+':</td>'+
     +'</tr>'+
+'<tr><td>姓名：</td><td colspan="3"><input type="text" name="name" style="background-color:#99FFCC"></td></tr>'+
+'<tr>'+
+'<td>部门及职位：</td><td> <input type="text" name="" style="background-color:#99FFCC"></td><td>性别</td><td><select name="gender">'+
           +'<option> 请选择</option>'+
           +'<option>男</option>'+
          +' <option>女</option>'+
      +' </select></td>'+
+'</tr>'+
+'<tr>'+
+'<td>籍贯：</td><td><input type="text" name="" style="background-color:#99FFCC"></td><td>爱好：</td><td><input type="text" name="" style="background-color:#99FFCC"></td>'+
+'</tr>'+
+'<tr>'+
+'<td>办公电话：</td><td><input type="text" name="" style="background-color:#99FFCC"></td><td>MSN：</td><td><input type="text" name="" style="background-color:#99FFCC"></td>'+
+'</tr>'+
+'<tr>'+
+'<td>手机：</td><td><input type="text" name="" style="background-color:#99FFCC"></td><td>EMALL：</td><td><input type="text" name="" style="background-color:#99FFCC"></td>'+
+'</tr>'+
+'<tr>'+
+'<td>QQ号码：</td><td colspan="3"><input type="text" name="" style="background-color:#99FFCC"></td>'+
+'</tr>'+
+'<tr>'+
+'<td>备注:</td>'+
  +'<td colspan="3"><textarea name="textarea2" cols="40" style="background-color:#99FFCC"></textarea></td>'+
+'</tr></table>';
var root=document.getElementById("root");
root.appendChild(vElement);
}
function deleteDiv(){
               var root=document.getElementById("root");

                var div=document.getElementById(i);
                     i=--i;
                root.removeChild(div);
}
</script>
<style type="text/css">

</style>
  </head>

  <body bgcolor="#99FFCC">
<form>
  <table align="center" bgcolor="#FFFFFF" width="1300" border="1" id="columnTable">

<tr>
<td colspan="4">
<div id="root" style="display:none">

     </div>
</td>
</tr>
<tr>
<td colspan="4"> <input type="button"  value="添加联系人" onClick="addDiv()" style="cursor: hand">
<input type="button"  value="取消" onClick="deleteDiv()" style="cursor: hand">
</td>
</tr>

<tr>
  <td colspan="4" align="center"><input type="submit" value="添加" ></td>

</tr>
  </table>
</form>

  </body>

</html>

12 个解决方案

#1

你的root层是display:none的你能看到效果？

#2

主要不是这个问题去掉了也一样的

#3

够壮观的。。。。。

#4

拆开 1 生成TABLE 2 填充单元格内容

#5

代码怎么写

#6

结果是这样

#7

var newStr;

newStr=newStr+'';
newStr=newStr+'';
这样写table的字符串拼接会好点。

#8

不是太长的代码，照成的问题，问题是你在拼写字符串的时候用了两个+ +，解析不错了。下面是修改后的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'add_guest.jsp' starting page </title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script language="javascript">
var i=0;
function addDiv(){
var vElement=document.createElement("div");
i=++i;
vElement.setAttribute("id",i);

vElement.innerHTML =' <table border="1" width="1300"> <tr>'
    +' <td colspan="4"  bgcolor="#00CC00">联系人'+(i+1)+': </td>'+
    ' </tr>'+
' <tr> <td>姓名： </td> <td colspan="3"> <input type="text" name="name" style="background-color:#99FFCC"> </td> </tr>'+

' <tr>'+
' <td>部门及职位： </td> <td> <input type="text" name="" style="background-color:#99FFCC"> </td> <td>性别 </td> <td> <select name="gender">'+
          ' <option> 请选择 </option>'+
          ' <option>男 </option>'+
          ' <option>女 </option>'+
      ' </select> </td>'+
' </tr>'+

' <tr>'+
' <td>籍贯： </td> <td> <input type="text" name="" style="background-color:#99FFCC"> </td> <td>爱好： </td> <td> <input type="text" name="" style="background-color:#99FFCC"> </td>'+
' </tr>'+

' <tr>'+
' <td>办公电话： </td> <td> <input type="text" name="" style="background-color:#99FFCC"> </td> <td>MSN： </td> <td> <input type="text" name="" style="background-color:#99FFCC"> </td>'+
' </tr>'+

' <tr>'+
' <td>手机： </td> <td> <input type="text" name="" style="background-color:#99FFCC"> </td> <td>EMALL： </td> <td> <input type="text" name="" style="background-color:#99FFCC"> </td>'+
' </tr>'+

' <tr>'+
' <td>QQ号码： </td> <td colspan="3"> <input type="text" name="" style="background-color:#99FFCC"> </td>'+
' </tr>'+

' <tr>'+
' <td>备注: </td>'+
' <td colspan="3"> <textarea name="textarea2" cols="40" style="background-color:#99FFCC"> </textarea> </td>'+
' </tr> </table>';

var root=document.getElementById("root");
root.appendChild(vElement);
}
function deleteDiv(){
              var root=document.getElementById("root");

                var div=document.getElementById(i);
                    i=--i;
                root.removeChild(div);
}
</script>
<style type="text/css">

</style>
  </head>

  <body bgcolor="#99FFCC">
<form>
  <table align="center" bgcolor="#FFFFFF" width="1300" border="1" id="columnTable">

<tr>
<td colspan="4">
<div id="root" style="display:block"></div>
</td>
</tr>
<tr>
<td colspan="4"> <input type="button"  value="添加联系人" onClick="addDiv()" style="cursor: hand">
<input type="button"  value="取消" onClick="deleteDiv()" style="cursor: hand">
</td>
</tr>

<tr>
  <td colspan="4" align="center"> <input type="submit" value="添加" > </td>

</tr>
  </table>
</form>

  </body>

</html>

#9

var array=new Array();
array[array.length]="";
..............
array.join("");

#10

挨着写,不要换行,去掉非语法必须的空格(试试哈,也不知道行不)...

#11

真是多了加号看看能不能得到我想要的结果

#12

感到很奇怪在jsp这一句 root.removeChild(div); i在1到3会报参数无效在html就不会报错会不会有默认id是1到3的
还有一个问题就是点提交以后所有生成的表都不见了能不能实现让表保持显示

#1