JavaScript innerHTML语句太长运行不了

时间:2022-11-17 11:10:59
要怎么实现我下面的功能
<%@ 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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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">
<!--
      #columnTable{
border-collapse: collapse;
table-layout: fixed;
   }
-->
</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


结果是这样
JavaScript innerHTML语句太长运行不了

#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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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">
<!--
      #columnTable{
border-collapse: collapse;
table-layout: fixed;
  }
-->
</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


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

#2


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

#3


够壮观的。。。。。

#4


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

#5


代码怎么写

#6


结果是这样
JavaScript innerHTML语句太长运行不了

#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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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">
<!--
      #columnTable{
border-collapse: collapse;
table-layout: fixed;
  }
-->
</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的
还有一个问题就是点提交以后所有生成的表都不见了 能不能实现让表保持显示