IE显示了innerHTML的运行时错误 [英] IE shows run time error for innerHTML

查看:105
本文介绍了IE显示了innerHTML的运行时错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个jsp页面,其中的行使用java脚本动态创建到表中。它在除IE以外的所有浏览器中工作正常。在IE中,它显示错误未知的运行时错误。



我附加了Java脚本函数

  function addrow(tableID){
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);


var mystring1 ='< td class =formlabel>< h4>类型& nbsp;& nbsp;& nbsp;< / h4>< / td>< td class =formfield>< / td>< td class ="< input type =textname =type7id =type8size =30 < / td>< td class =formlabel>< h4>说明& nbsp;& nbsp;< / h4>< / td>< td class =formfield>< textarea name =textarea2id =textarea2cols =28rows =2>< / textarea>< / td>';

row.innerHTML = mystring1;

} catch(e){
alert(e);


HTML部分

 < table id =table1width =792border =0> 

< tr class =rowdiv>
< td class =formlabel>< h4>类型& nbsp;& nbsp;& nbsp;< / h4>< / td>
< td class =formfield>< input type =textname =type7id =type8size =30/>< / td>
< td class =formgap>< / td>
< td class =formlabel>< h4>说明& nbsp;& nbsp;& nbsp;< / h4>< / td>
< / tr>

< tr class =rowdiv>
< td width =170class =formlabel>& nbsp;< / td>
< td class =formfield>& nbsp;< / td>
< td class =formgap>< / td>
< td class =formlabel>& nbsp;< / td>
< td class =formfield>< h6 onclick =addrow('table1')>添加政策< / h6>< / td>
< / tr>

< / table>

其实我已经尝试使用第二个函数将一个表添加到一行中。

  var mystring2 ='< td>< table width =200border =1class =tableborderalign =center >< tr class =rowdiv>< td width =799class =formheader>< h4>< / td>< / tr>< < tr class =rowdiv>< td width>< =170class =formlabel>< h4> Company ID& nbsp;& nbsp;< / h4>< / td>< td width =205class =formfield >& nbsp;< / td>< td width =20class =formgap>< / td>< td width =170class =formlabel>< h4> ;公司& nbsp;& nbsp;& nbsp;名称& nbsp;& nbsp;< / h4>< / td>< td width =205class =formfield>< input type =textname =type id =typesize =30/>< / td>< / tr>< tr class =rowdiv>< td width =170class =formlabel><< ; h4>地址& nbsp;& nbsp;< / h4>< / td>< td width =205class =formfield>< textarea name =textareaid =textareacols =28rows =2>< / textarea>< / td>< td width =20class =formgap>< / td>< td width < h4>< / h4><表单字段>< h6>< input type =textname =type2id =type2size =30/>< / h6>< / td>< / tr><< ; tr class =rowdiv>< td width =170class =formlabel>< h4> Fax Number& nbsp;& nbsp;< / h4>< td>< td class =formfield>< input type =textname =type3id =type3size =30/>< / td>< td class =formgap>< / td>< td width =170class =formlabel>< h4> E Mail& nbsp;& nbsp;< / h4><< ; / td>< td class =formfield>< / td>< / tr>< input type =textname =type5id =type5size =30 < tr class =rowdiv>< td class =formlabel>< h4>网站& nbsp;& nbsp;& nbsp;< / h4>< / td>< td class =formfield>< input type =textname =type7id =type7size =30/>< / td>< td class =formgap><< ; / td>< td class =formlabel>& nbsp;< / td>< td class =formfield>& nbsp;< / td>< / tr>< tr class =rowdiv>< td class =formlabel>< h4> Type& nbsp;& nbsp;< / h4>< / td>< td class =表单字段>< input type =textname =type7id =type8size =30/>< / td>< td class =formgap>< / td> < td class =formlabel>< h4>说明& nbsp;& nbsp;< / h4>< / td>< td class =formfield>& lt; textarea name =textarea2id =textarea2cols =28rows =2>< / textarea>< / td>< / tr>< tr class =rowdiv> < td width =170class =formlabel>& nbsp;< / td>< td class =formfield>& nbsp;< / td>< td class =formgap >< / td>< td class =formlabel>& nbsp;< / td>< td class =formfield>< h6 onclick =addrow('+'table + rowCount +'+')>< a href =#>添加一行< / a>< / h6>< / td>< / tr>< / table>< / TD>< / TR> < /表>< / TD>; 

所有这些代码都在chrome和firefox中工作。



I已经使用了@DragonPrince和@Bui Cuong的概念来解决我的问题。

 <%@ page language =java contentType =text / html; charset = ISO-8859-1
pageEncoding =ISO-8859-1%>
<!DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\">
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = ISO-8859-1>
< title>在此插入标题< / title>

< script language =javascript>

函数addtabletesting(tableID){


var table1 = document.getElementById(tableID);
var rowCount1 = table1.rows.length;
var row1 = table1.insertRow(rowCount1-1);
var td1 = document.createElement(TD);

/ *
创建一个新行row1并添加一列td1
* /

var table2 = document.createElement(TABLE);
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
var td2 = document.createElement(TD);

/ *
创建一个新表table2添加了row2和td2。
* /
td2.innerHTML =< h4>我在新内部表格中的新列< / h4>;

row1.appendChild(td1);
td1.appendChild(table2);
row2.appendChild(td2);
/ *
将td1添加到row1中,将table2添加到td1中,并将td2添加到row2中。
* /

}

< / script>

< / head>
< body>


< table id =testtable1border =1>
< tr>< td width =150>旧表行1列1< / td>< / tr>
< tr>< td>旧表格第2列1< / td>< / tr>

< tr>< td> < a onclick =addtabletesting('testtable1')>添加表格< / a> < / TD>< / TR>
< / table>

< / body>
< / html>

检查它。目前它只是简单地添加一个内表。您可以对其进行修改,以便您可以随心所欲。



查看以下详细答案。



正文部分

 < body> 



< br />



< a onclick =show_prompt()>添加多个公司< / a>


< br />




< tr>
< td class =totalbodycontainer>
< div class =boxdivalign =center>


< div class =formmainheader> < h2>添加公司< / h2> < / DIV>
< form action =注册>




< table width =200border =1class =tableborderalign =center>


< tr class =rowdiv> < td width =799class =formheader>< h4> Comany Details< / h4>< / td>< / tr>
< tr>
< td width =799>



< tr class =rowdiv>
< td width =170class =formlabel>< h4>公司ID& nbsp;& nbsp;< / h4>< / td>
< td width =205class =formfield>& nbsp;< / td>
< td width =20class =formgap>< / td>
< td width =170class =formlabel>< h4>公司名称& nbsp;& nbsp;< / h4>< / td>
< td width =205class =formfield>< input type =textname =typeid =typesize =30/>
< / td>
< / tr>
< tr class =rowdiv>
< td width =170class =formlabel>< h4>地址& nbsp;& nbsp;& nbsp;< / h4>< / td>
< td width =20class =formgap>< / td>
< td width =170class =formlabel>< h4>电话号码& nbsp;& nbsp;& nbsp;< / h4>< / td>
< td width =205class =formfield>< h6>
< input type =textname =type2id =type2size =30/>
< / h6>< / td>
< / tr>
< tr class =rowdiv>
< td width =170class =formlabel>< h4>传真号码& nbsp;& nbsp;& nbsp;< / h4>< / td>
< td class =formfield>< input type =textname =type3id =type3size =30/>< / td>
< td class =formgap>< / td>
< td width =170class =formlabel>< h4> E Mail& nbsp;& nbsp;& nbsp;< / h4>< / td>
< td class =formfield>< input type =textname =type5id =type5size =30/>< / td>
< / tr>
< tr class =rowdiv>
< td class =formlabel>< h4>网站& nbsp;& nbsp;& nbsp;< / h4>< / td>
< td class =formfield>< input type =textname =type7id =type7size =30/>< / td>
< td class =formgap>< / td>
< td class =formlabel>& nbsp;< / td>
< td class =formfield>& nbsp;< / td>
< / tr>
< tr class =rowdiv>
< td class =formlabel>< h4>产品类型& nbsp;& nbsp;& nbsp;< / h4>< / td>
< td class =formfield>< input type =textname =type7id =type8size =30/>< / td>
< td class =formgap>< / td>
< td class =formlabel>< h4>说明& nbsp;& nbsp;& nbsp;< / h4>< / td>
< / tr>
< tr class =rowdiv>
< td width =170class =formlabel>& nbsp;< / td>
< td class =formfield>& nbsp;< / td>
< td class =formgap>< / td>
< td class =formlabel>& nbsp;< / td>
< td class =formfield>< h6>< a onclick =addproduct('table1')> Add product< / a>< / h6>< / td>
< / tr>

< / table>



< / td>< / tr> < /表>

< / td>< / tr>

< tr> < td class =formlabel>< h6>< a onclick =addcompany('sarinaddrow',1)> Add Company< / a>< / h6>< / td>< / TR> < /表>

& nbsp;
< / form>
< p>< / p>
< / div>< / td>< / tr>< / table>
< / body>

脚本

 < script language =javascript> 

var sarintableno = 1;
函数addpolicy(tableID){
try {
var mystring = null;

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row1 = table.insertRow(rowCount-1);

var td1 = document.createElement(TD); // td1
td1.className =formlabel;
td1.innerHTML ='< h4>产品类型& nbsp;& nbsp;& nbsp;< / h4>';
row1.appendChild(td1);

var td2 = document.createElement(TD); // td2
td2.className =formfield;
mystring ='< input type =textname =type7id =type8size =30/>';
td2.innerHTML = mystring;
row1.appendChild(td2);

var td3 = document.createElement(TD); // td3
td3.className =formgap;
row1.appendChild(td3);

var td4 = document.createElement(TD); // td4
td4.className =formlabel;
td4.innerHTML ='< h4>说明& nbsp;& nbsp;& nbsp;< / h4>';
row1.appendChild(td4);

var td5 = document.createElement(TD); // td5
td5.className =formfield;
mystring ='< textarea name =textarea2id =textarea2cols =28rows =2>< / textarea>';
td5.innerHTML = mystring;
row1.appendChild(td5);
} catch(e){

alert(e);



函数addcompany(tableID,companyno){
try {
var xxx = 0; var mytext1 = null;
for(xxx = 0; xxx< companyno; xxx ++){
sarintableno ++;

var table1 = document.getElementById(tableID); // t1
var rowCount1 = table1.rows.length;
var row1 = table1.insertRow(rowCount1-1); //添加tr1
var td1 = document.createElement(TD); // add td1
row1.appendChild(td1);


var table2 = document.createElement(TABLE); // t2
td1.appendChild(table2);

var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2); // tr2
var td2 = document.createElement(TD); // td2
row2.appendChild(td2);

rowCount2 = table2.rows.length;
var row3 = table2.insertRow(rowCount2); // tr3
var td3 = document.createElement(TD); // td3
row3.appendChild(td3);

var table3 = document.createElement(TABLE); // t3
td3.appendChild(table3);

var rowCount3 = table3.rows.length;
var row4 = table3.insertRow(rowCount3); // tr4
var td4 = document.createElement(TD); // td4
row4.appendChild(td4);
var td5 = document.createElement(TD); // td5
row4.appendChild(td5);
var td6 = document.createElement(TD); // td6
row4.appendChild(td6);
var td7 = document.createElement(TD); // td7
row4.appendChild(td7);
var td8 = document.createElement(TD); // td8
row4.appendChild(td8);

var rowCount3 = table3.rows.length;
var row5 = table3.insertRow(rowCount3); // tr5
var td9 = document.createElement(TD); // td9
row5.appendChild(td9);
var td10 = document.createElement(TD); // td10
row5.appendChild(td10);
var td11 = document.createElement(TD); // td11
row5.appendChild(td11);
var td12 = document.createElement(TD); // td12
row5.appendChild(td12);
var td13 = document.createElement(TD); // td13
row5.appendChild(td13);

var rowCount3 = table3.rows.length;
var row6 = table3.insertRow(rowCount3); // tr6
var td14 = document.createElement(TD); // td14
row6.appendChild(td14);
var td15 = document.createElement(TD); // td15
row6.appendChild(td15);
var td16 = document.createElement(TD); // td16
row6.appendChild(td16);
var td17 = document.createElement(TD); // td17
row6.appendChild(td17);
var td18 = document.createElement(TD); // td18
row6.appendChild(td18);

var rowCount3 = table3.rows.length;
var row7 = table3.insertRow(rowCount3); // tr7
var td19 = document.createElement(TD); // td19
row7.appendChild(td19);
var td20 = document.createElement(TD); // td20
row7.appendChild(td20);
var td21 = document.createElement(TD); // td21
row7.appendChild(td21);
var td22 = document.createElement(TD); // td22
row7.appendChild(td22);
var td23 = document.createElement(TD); // td23
row7.appendChild(td23);

var rowCount3 = table3.rows.length;
var row8 = table3.insertRow(rowCount3); // tr7
var td24 = document.createElement(TD); // td24
row8.appendChild(td24);
var td25 = document.createElement(TD); // td25
row8.appendChild(td25);
var td26 = document.createElement(TD); // td26
row8.appendChild(td26);
var td27 = document.createElement(TD); // td27
row8.appendChild(td27);
var td28 = document.createElement(TD); // td28
row8.appendChild(td28);

var rowCount3 = table3.rows.length;
var row9 = table3.insertRow(rowCount3); // tr7
var td29 = document.createElement(TD); // td24
row9.appendChild(td29);
var td30 = document.createElement(TD); // td25
row9.appendChild(td30);
var td31 = document.createElement(TD); // td26
row8.appendChild(td31);
var td32 = document.createElement(TD); // td27
row9.appendChild(td32);
var td33 = document.createElement(TD); // td28
row9.appendChild(td33);

/ * styles和inner htmls * /
table2.className =tableborder;
table2.setAttribute(width,200);
table2.setAttribute(border,1);
table2.setAttribute(allign,center);

row2.className =rowdiv;
td2.className =formheader;
td2.setAttribute(width,799);
td2.innerHTML =< h4> Comany Details< / h4>;

td3.setAttribute(width,799);

table3.setAttribute(width,792);
table3.setAttribute(border,0);
table3.setAttribute(id,table+ sarintableno);

row4.className =rowdiv;

td4.className =formlabel;
td4.setAttribute(width,170);
td4.innerHTML =< h4> Company ID& nbsp;& nbsp;& nbsp;< / h4>;

td5.className =formfield;
td5.setAttribute(width,205);
td5.innerHTML =& nbsp;;

td6.className =formgap;
td6.setAttribute(width,20);

td7.className =formlabel;
td7.setAttribute(width,170);
td7.innerHTML =< h4>公司名称& nbsp;& nbsp;< / h4>;

td8.className =formfield;
td8.setAttribute(width,205);
td8.innerHTML ='< input type =textname =typeid =typesize =30/>';

row5.className =rowdiv;

td9.className =formlabel;
td9.setAttribute(width,170);
td9.innerHTML =< h4>地址& nbsp;& nbsp;< / h4>;

td10.className =formfield;
td10.setAttribute(width,205);
td10.innerHTML ='< textarea name =textareaid =textareacols =28rows =2>< / textarea>';

td11.className =formgap;
td11.setAttribute(width,20);

td12.className =formlabel;
td12.setAttribute(width,170);
td12.innerHTML =< h4>电话号码& nbsp;& nbsp;< / h4>;

td13.className =formfield;
td13.setAttribute(width,205);
td13.innerHTML ='< h6>< input type =textname =type2id =type2size =30/>< / h6>';

row6.className =rowdiv;

td14.className =formlabel;
td14.setAttribute(width,170);
td14.innerHTML =< h4>传真号码& nbsp;& nbsp;< / h4>;

td15.className =formfield;
td15.setAttribute(width,205);
td15.innerHTML ='< input type =textname =type3id =type3size =30/>';

td16.className =formgap;
td16.setAttribute(width,20);

td17.className =formlabel;
td17.setAttribute(width,170);
td17.innerHTML =< h4> E Mail& nbsp;& nbsp;& nbsp;< / h4>;

td18.className =formfield;
td18.setAttribute(width,205);
td18.innerHTML ='< input type =textname =type5id =type5size =30/>';

row7.className =rowdiv;

td19.className =formlabel;
td19.setAttribute(width,170);
td19.innerHTML =< h4>网站& nbsp;& nbsp;& nbsp;< / h4>;

td20.className =formfield;
td20.setAttribute(width,205);
td20.innerHTML ='< input type =textname =type7id =type7size =30/>';

td21.className =formgap;
td21.setAttribute(width,20);

td22.className =formlabel;
td22.setAttribute(width,170);
td22.innerHTML =< h4>& nbsp;& nbsp;& nbsp;< / h4>;

td23.className =formfield;
td23.setAttribute(width,205);
td23.innerHTML ='& nbsp;';

row8.className =rowdiv;

td24.className =formlabel;
td24.setAttribute(width,170);
td24.innerHTML =< h4>产品类型& nbsp;& nbsp;& nbsp;< / h4>;

td25.className =formfield;
td25.setAttribute(width,205);
td25.innerHTML ='< input type =textname =type7id =type8size =30/>';

td26.className =formgap;
td26.setAttribute(width,20);

td27.className =formlabel;
td27.setAttribute(width,170);
td27.innerHTML =< h4>说明& nbsp;& nbsp;< / h4>;

td28.className =formfield;
td28.setAttribute(width,205);
td28.innerHTML ='< textarea name =textarea2id =textarea2cols =28rows =2>< / textarea>';

row9.className =rowdiv;

td29.className =formlabel;
td29.setAttribute(width,170);
td29.innerHTML =& nbsp;;

td30.className =formfield;
td30.setAttribute(width,205);
td30.innerHTML ='& nbsp;';

td31.className =formgap;
td31.setAttribute(width,20);
td31.innerHTML =& nbsp;;

td32.className =formlabel;
td32.setAttribute(width,170);
td32.innerHTML =& nbsp;;

td33.className =formfield;
td33.setAttribute(width,205);
mytext1 ='< h6>< a onclick =addproduct('+'table'+ sarintableno +'+');>添加产品< / a>< / h6>';
td33.innerHTML = mytext1;
$ b}
} catch(e){
alert(e);





函数show_prompt()
{
var name = prompt(请输入数字公司,2);
if(name!= null&& name!=)
{

addcompany('sarinaddrow',name);
}
}


< / script>


I have a jsp page in which rows are created dynamically to a table using java script. It is working fine in all the browsers except IE. In IE it is showing the error Unknown run time error..

I have attached the java script function

   function addrow(tableID) {
        try{
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount-1);


        var mystring1='<td class="formlabel"><h4>Type &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td><td class="formgap"></td><td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>';

row.innerHTML =mystring1;

    }catch(e) {
        alert(e);
    }
    }

HTML part

<table id="table1" width="792" border="0">

<tr class="rowdiv">
      <td class="formlabel"><h4>Type &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td>
      <td class="formgap"></td>
      <td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>
      </tr>

      <tr class="rowdiv">
        <td width="170" class="formlabel">&nbsp;</td>
        <td class="formfield">&nbsp;</td>
        <td class="formgap"></td>
        <td class="formlabel">&nbsp;</td>
        <td class="formfield"><h6 onclick="addrow('table1')">Add policy</h6></td>
      </tr>

    </table>

Actually I already tried to add a table into a row using a second function..

var mystring2='<td><table width="200" border="1" class="tableborder" align="center"><tr class="rowdiv"><td width="799" class="formheader" ><h4>Comany Details</h4></td></tr><tr><td width="799"><table id="table'+rowCount+'" width="792" border="0"><tr class="rowdiv"><td width="170" class="formlabel"><h4>Company ID&nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield">&nbsp;</td><td width="20" class="formgap"></td><td width="170" class="formlabel"><h4>Company &nbsp;&nbsp;&nbsp; Name &nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield"><input type="text" name="type" id="type" size="30"/></td></tr><tr class="rowdiv"><td width="170" class="formlabel"><h4>Address &nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield"><textarea name="textarea" id="textarea" cols="28" rows="2"></textarea></td><td width="20" class="formgap"></td><td width="170" class="formlabel"><h4>Phone Number &nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield"><h6><input type="text" name="type2" id="type2" size="30"/></h6></td></tr><tr class="rowdiv"><td width="170" class="formlabel"><h4>Fax Number &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type3" id="type3" size="30"/></td><td class="formgap"></td><td width="170" class="formlabel"><h4>E Mail &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type5" id="type5" size="30"/></td></tr><tr class="rowdiv"><td class="formlabel"><h4>Web Site &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type7" id="type7" size="30"/></td><td class="formgap"></td><td class="formlabel">&nbsp;</td><td class="formfield">&nbsp;</td></tr><tr class="rowdiv"><td class="formlabel"><h4>Type &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td><td class="formgap"></td><td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td></tr><tr class="rowdiv"><td width="170" class="formlabel">&nbsp;</td><td class="formfield">&nbsp;</td><td class="formgap"></td><td class="formlabel">&nbsp;</td><td class="formfield"><h6 onclick="addrow('+"'table"+rowCount+"'"+')"><a href="#">Add row</a></h6></td></tr></table></td></tr> </table></td>';

All these codes are working in chrome and firefox..

解决方案

I have created a script through which you can add inner tables into a column of the table.

I have used the concepts of @DragonPrince and @Bui Cuong for devoloping my answer.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script language="javascript">

function addtabletesting(tableID) {   


var table1 = document.getElementById(tableID);         
var rowCount1 = table1.rows.length;         
var row1 = table1.insertRow(rowCount1-1); 
var td1 = document.createElement("TD");  

/*
 creating a new row row1 andadded a column td1
*/

var table2= document.createElement("TABLE");
var rowCount2 = table2.rows.length;         
var row2 = table2.insertRow(rowCount2); 
var td2 = document.createElement("TD"); 

/*
Created a new table table2 added row2 and td2. 
*/
td2.innerHTML = "<h4>my new column in new inner table </h4>";  

row1.appendChild(td1); 
td1.appendChild(table2); 
row2.appendChild(td2); 
/*
Added td1 into row1, table2 into td1, and td2  into row2.
*/

} 

</script>

</head>
<body>


<table id="testtable1" border="1">
<tr><td width="150">old table row 1 column 1</td></tr>
<tr><td>old table row 2 column 1</td></tr>

<tr><td> <a  onclick="addtabletesting('testtable1')" >Add table</a> </td></tr>
</table>

</body>
</html>

Check it. Currently its just simply adding a inner table only. You can modify it so that you will be able to make it as you want.

Check the following detailed answer.

Body part

<body>      



<br/>



    <a onclick="show_prompt()" >Add Multiple Companies</a> 


<br/>




<table border="0"  align="left" class="totalbodycontainer">     <%-- table in which entire body content is written  --%>
  <tr>
    <td class="totalbodycontainer">
<div class="boxdiv" align="center"  >       


<div  class="formmainheader" >  <h2 >Add  Company</h2> </div>   
<form action="registration"  >



<table id="sarinaddrow" border="0" align="center"><tr><td>

  <table width="200" border="1" class="tableborder" align="center"> 


  <tr class="rowdiv">  <td width="799" class="formheader" ><h4> Comany Details</h4></td></tr>
<tr>
  <td width="799"> 



    <table id="table1" width="792" border="0">
    <tr class="rowdiv">
    <td width="170" class="formlabel"><h4> Company ID&nbsp;&nbsp;&nbsp;</h4></td>
    <td width="205" class="formfield">&nbsp;</td>
             <td width="20" class="formgap"></td>
    <td width="170" class="formlabel"><h4> Company Name &nbsp;&nbsp;&nbsp;</h4></td>
    <td width="205" class="formfield"><input type="text" name="type" id="type" size="30" /> 
            </td>
    </tr>
    <tr class="rowdiv">
    <td width="170" class="formlabel"><h4>Address &nbsp;&nbsp;&nbsp;</h4></td>
    <td width="205" class="formfield"><textarea name="textarea" id="textarea" cols="28" rows="2"></textarea></td>
    <td width="20" class="formgap"></td>
    <td width="170" class="formlabel"><h4>Phone Number &nbsp;&nbsp;&nbsp;</h4></td>
    <td width="205" class="formfield"><h6>
      <input type="text" name="type2" id="type2" size="30"/>
    </h6></td>
    </tr>
    <tr class="rowdiv">
      <td width="170" class="formlabel"><h4>Fax Number &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><input type="text" name="type3" id="type3" size="30"/></td>
      <td class="formgap"></td>
      <td width="170" class="formlabel"><h4>E Mail &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><input type="text" name="type5" id="type5" size="30"/></td>
      </tr>
    <tr class="rowdiv">
      <td class="formlabel"><h4>Web Site &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><input type="text" name="type7" id="type7" size="30"/></td>
      <td class="formgap"></td>
      <td class="formlabel">&nbsp;</td>
      <td class="formfield">&nbsp;</td>
      </tr>
    <tr class="rowdiv">
      <td class="formlabel"><h4>Product Type &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td>
      <td class="formgap"></td>
      <td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>
      </tr>
      <tr class="rowdiv">
        <td width="170" class="formlabel">&nbsp;</td>
        <td class="formfield">&nbsp;</td>
        <td class="formgap"></td>
        <td class="formlabel">&nbsp;</td>
        <td class="formfield"><h6><a  onclick="addproduct('table1')">Add product</a></h6></td>
      </tr>

    </table>  



</td></tr> </table>

</td></tr>

<tr> <td  class="formlabel"><h6 ><a onclick="addcompany('sarinaddrow',1)">Add Company</a></h6></td></tr> </table>

  &nbsp;
</form>
<p></p>
</div></td></tr></table>
</body>

Scripts

<script language="javascript">

var sarintableno=1;
function addpolicy(tableID) {
    try{
        var mystring=null;

        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row1 = table.insertRow(rowCount-1);

            var td1 = document.createElement("TD"); //td1
            td1.className="formlabel";
            td1.innerHTML='<h4>Product Type &nbsp;&nbsp;&nbsp;</h4>';
            row1.appendChild(td1);

            var td2 = document.createElement("TD"); //td2
            td2.className="formfield";
            mystring='<input type="text" name="type7" id="type8" size="30"/>';
            td2.innerHTML=mystring;
            row1.appendChild(td2);

            var td3 = document.createElement("TD"); //td3
            td3.className="formgap";
            row1.appendChild(td3);

            var td4 = document.createElement("TD"); //td4
            td4.className="formlabel";
            td4.innerHTML='<h4>Description &nbsp;&nbsp;&nbsp;</h4>';
            row1.appendChild(td4); 

            var td5 = document.createElement("TD"); //td5
            td5.className="formfield";
            mystring='<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';
            td5.innerHTML=mystring;
            row1.appendChild(td5);
    }catch(e) {

    alert(e);
    }
}

function addcompany(tableID,companyno) {
    try{
        var xxx=0; var mytext1=null;
    for( xxx=0;xxx<companyno;xxx++ ){
        sarintableno++;

        var table1 = document.getElementById(tableID);     // t1    
        var rowCount1 = table1.rows.length;         
        var row1 = table1.insertRow(rowCount1-1); //add tr1
        var td1 = document.createElement("TD");  //add td1
        row1.appendChild(td1); 


        var table2= document.createElement("TABLE");//t2
        td1.appendChild(table2); 

            var rowCount2 = table2.rows.length;       
            var row2 = table2.insertRow(rowCount2); //tr2  
            var td2 = document.createElement("TD"); //td2
            row2.appendChild(td2); 

            rowCount2 = table2.rows.length;       
            var row3 = table2.insertRow(rowCount2); //tr3  
            var td3 = document.createElement("TD"); //td3
            row3.appendChild(td3); 

            var table3= document.createElement("TABLE");//t3
            td3.appendChild(table3);

                var rowCount3 = table3.rows.length;       
                var row4 = table3.insertRow(rowCount3); //tr4 
                var td4 = document.createElement("TD"); //td4
                row4.appendChild(td4); 
                var td5 = document.createElement("TD"); //td5
                row4.appendChild(td5); 
                var td6 = document.createElement("TD"); //td6
                row4.appendChild(td6);
                var td7 = document.createElement("TD"); //td7
                row4.appendChild(td7);
                var td8 = document.createElement("TD"); //td8
                row4.appendChild(td8); 

                var rowCount3 = table3.rows.length;       
                var row5 = table3.insertRow(rowCount3); //tr5 
                var td9 = document.createElement("TD"); //td9
                row5.appendChild(td9); 
                var td10 = document.createElement("TD"); //td10
                row5.appendChild(td10); 
                var td11 = document.createElement("TD"); //td11
                row5.appendChild(td11); 
                var td12 = document.createElement("TD"); //td12
                row5.appendChild(td12); 
                var td13 = document.createElement("TD"); //td13
                row5.appendChild(td13); 

                var rowCount3 = table3.rows.length;       
                var row6 = table3.insertRow(rowCount3); //tr6 
                var td14 = document.createElement("TD"); //td14
                row6.appendChild(td14); 
                var td15 = document.createElement("TD"); //td15
                row6.appendChild(td15);
                var td16 = document.createElement("TD"); //td16
                row6.appendChild(td16);
                var td17 = document.createElement("TD"); //td17
                row6.appendChild(td17);
                var td18 = document.createElement("TD"); //td18
                row6.appendChild(td18);

                var rowCount3 = table3.rows.length;       
                var row7 = table3.insertRow(rowCount3); //tr7 
                var td19 = document.createElement("TD"); //td19
                row7.appendChild(td19);
                var td20 = document.createElement("TD"); //td20
                row7.appendChild(td20);
                var td21 = document.createElement("TD"); //td21
                row7.appendChild(td21);
                var td22 = document.createElement("TD"); //td22
                row7.appendChild(td22);
                var td23 = document.createElement("TD"); //td23
                row7.appendChild(td23);

                var rowCount3 = table3.rows.length;       
                var row8 = table3.insertRow(rowCount3); //tr7 
                var td24 = document.createElement("TD"); //td24
                row8.appendChild(td24);
                var td25 = document.createElement("TD"); //td25
                row8.appendChild(td25);
                var td26 = document.createElement("TD"); //td26
                row8.appendChild(td26);
                var td27 = document.createElement("TD"); //td27
                row8.appendChild(td27);
                var td28 = document.createElement("TD"); //td28
                row8.appendChild(td28);

                var rowCount3 = table3.rows.length;       
                var row9 = table3.insertRow(rowCount3); //tr7 
                var td29 = document.createElement("TD"); //td24
                row9.appendChild(td29);
                var td30 = document.createElement("TD"); //td25
                row9.appendChild(td30);
                var td31 = document.createElement("TD"); //td26
                row8.appendChild(td31);
                var td32 = document.createElement("TD"); //td27
                row9.appendChild(td32);
                var td33 = document.createElement("TD"); //td28
                row9.appendChild(td33);

    /* styles and inner htmls */
    table2.className="tableborder";
    table2.setAttribute("width","200");
    table2.setAttribute("border","1");
    table2.setAttribute("allign","center");

        row2.className="rowdiv";
            td2.className="formheader";
            td2.setAttribute("width","799");
            td2.innerHTML="<h4>Comany Details</h4>";

            td3.setAttribute("width","799");

                table3.setAttribute("width","792");
                table3.setAttribute("border","0");
                table3.setAttribute("id","table"+sarintableno);

                    row4.className="rowdiv";

                        td4.className="formlabel";
                        td4.setAttribute("width","170");
                        td4.innerHTML="<h4>Company ID&nbsp;&nbsp;&nbsp;</h4>";

                        td5.className="formfield";
                        td5.setAttribute("width","205");
                        td5.innerHTML="&nbsp;";

                        td6.className="formgap";
                        td6.setAttribute("width","20");

                        td7.className="formlabel";
                        td7.setAttribute("width","170");
                        td7.innerHTML="<h4>Company Name &nbsp;&nbsp;&nbsp;</h4>";

                        td8.className="formfield";
                        td8.setAttribute("width","205");
                        td8.innerHTML='<input type="text" name="type" id="type" size="30" />';

                    row5.className="rowdiv";

                        td9.className="formlabel";
                        td9.setAttribute("width","170");
                        td9.innerHTML="<h4>Address &nbsp;&nbsp;&nbsp;</h4>";

                        td10.className="formfield";
                        td10.setAttribute("width","205");
                        td10.innerHTML='<textarea name="textarea" id="textarea" cols="28" rows="2"></textarea>';

                        td11.className="formgap";
                        td11.setAttribute("width","20");

                        td12.className="formlabel";
                        td12.setAttribute("width","170");
                        td12.innerHTML="<h4>Phone Number &nbsp;&nbsp;&nbsp;</h4>";

                        td13.className="formfield";
                        td13.setAttribute("width","205");
                        td13.innerHTML='<h6><input type="text" name="type2" id="type2" size="30"/></h6>';

                    row6.className="rowdiv";

                        td14.className="formlabel";
                        td14.setAttribute("width","170");
                        td14.innerHTML="<h4>Fax Number &nbsp;&nbsp;&nbsp;</h4>";

                        td15.className="formfield";
                        td15.setAttribute("width","205");
                        td15.innerHTML='<input type="text" name="type3" id="type3" size="30"/>';

                        td16.className="formgap";
                        td16.setAttribute("width","20");

                        td17.className="formlabel";
                        td17.setAttribute("width","170");
                        td17.innerHTML="<h4>E Mail &nbsp;&nbsp;&nbsp;</h4>";

                        td18.className="formfield";
                        td18.setAttribute("width","205");
                        td18.innerHTML='<input type="text" name="type5" id="type5" size="30"/>';

                    row7.className="rowdiv";

                        td19.className="formlabel";
                        td19.setAttribute("width","170");
                        td19.innerHTML="<h4>Web Site &nbsp;&nbsp;&nbsp;</h4>";

                        td20.className="formfield";
                        td20.setAttribute("width","205");
                        td20.innerHTML='<input type="text" name="type7" id="type7" size="30"/>';

                        td21.className="formgap";
                        td21.setAttribute("width","20");

                        td22.className="formlabel";
                        td22.setAttribute("width","170");
                        td22.innerHTML="<h4> &nbsp;&nbsp;&nbsp;</h4>";

                        td23.className="formfield";
                        td23.setAttribute("width","205");
                        td23.innerHTML='&nbsp;';

                    row8.className="rowdiv";

                        td24.className="formlabel";
                        td24.setAttribute("width","170");
                        td24.innerHTML="<h4>Product Type &nbsp;&nbsp;&nbsp;</h4>";

                        td25.className="formfield";
                        td25.setAttribute("width","205");
                        td25.innerHTML='<input type="text" name="type7" id="type8" size="30"/>';

                        td26.className="formgap";
                        td26.setAttribute("width","20");

                        td27.className="formlabel";
                        td27.setAttribute("width","170");
                        td27.innerHTML="<h4>Description &nbsp;&nbsp;&nbsp;</h4>";

                        td28.className="formfield";
                        td28.setAttribute("width","205");
                        td28.innerHTML='<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';

                    row9.className="rowdiv";

                        td29.className="formlabel";
                        td29.setAttribute("width","170");
                        td29.innerHTML="&nbsp;";

                        td30.className="formfield";
                        td30.setAttribute("width","205");
                        td30.innerHTML='&nbsp;';

                        td31.className="formgap";
                        td31.setAttribute("width","20");
                        td31.innerHTML="&nbsp;";

                        td32.className="formlabel";
                        td32.setAttribute("width","170");
                        td32.innerHTML="&nbsp;";

                        td33.className="formfield";
                        td33.setAttribute("width","205");
                        mytext1='<h6><a  onclick="addproduct('+"'table"+sarintableno+"'"+');">Add product</a></h6>';
                        td33.innerHTML=mytext1;

    }
}catch(e) {
    alert(e);
}
}



function show_prompt()
{
var name=prompt("Please enter the number of companies ","2");
if (name!=null && name!="")
  {

    addcompany('sarinaddrow',name);
  }
}


</script>

这篇关于IE显示了innerHTML的运行时错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆