IE shows run time error for innerHTML

后端未结

关注

 9  1994

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

相关标签:

9条回答

情歌与酒

2020-12-11 10:11

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>

0 讨论(0)

不要未来只要你来

2020-12-11 10:11

For IE while creating a table dynamically u must always create a table row

document.createElement('tr');

Had de same issue once. It got solved once i added this

0 讨论(0)
发布评论:

提交评论
- 加载中...

清歌不尽

2020-12-11 10:17

you can use innerText like this

try{
     row.innerHTML =mystring1;
}catch(e){
     row.innerText =mystring1;
     row.style.display='table-row';
}

0 讨论(0)

闹比i

2020-12-11 10:18

As I commented on your other, related question: IDs on elements need to be unique. It's possible that Internet Explorer is refusing to set the innerHTML because you'd end up with DOM elements with IDs that aren't unique, whereas Firefox and Chrome aren't being quite so restrictive.

0 讨论(0)
发布评论:

提交评论
- 加载中...

时光说笑

2020-12-11 10:22

This error shows up, because several elements' innerHTML property, including <tr> are read-only ^[source] (Tested in IE 6-8). To solve this issue, the best way is to use the insertCell method:

An universal "lazy" method: (demo: http://jsfiddle.net/VLjhW/2/)

// Variables mystring2, rowCount and table as defined in the question.
var tmp = document.createElement('div');         // <-- Placeholder
tmp.innerHTML = '<table><tr>' + mystring2 + '</tr></table>';
var row = tmp.firstChild.rows[0];                // <-- Created "real" row

var newrow = table.insertRow(table.rows.length); // <-- New dummy row
newrow.parentNode.replaceChild(row, newrow);     // <-- Replace dummy with real row

Another method:

Demo: http://jsfiddle.net/VLjhW/

// Array of innerHTML properties for each cell
var cells = ['<h4>Type &nbsp;&nbsp;&nbsp;</h4>',
             '<input type="text" name="type7" id="type8" size="30"/>',
             '',
             '<h4>Description &nbsp;&nbsp;&nbsp;</h4></td>',
             '<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>'];
// Array of `class=` attributes for each cell
var cellClasses = ['formlabel', 'formfield', 'formgap', 'formlabel', 'formfield'];

var table = document.getElementById('t1');     // <-- table
var tr = table.insertRow(table.rows.length-1); // <-- Last row
for (var i=0; i<cells.length; i++) {
    var td = tr.insertCell(i);                 // <-- Insert cell
    td.className = cellClasses[i];             // <-- Set class attribute
    td.innerHTML = cells[i];                   // <-- Set innerHTML
}

0 讨论(0)

孤街浪徒

2020-12-11 10:26
My problem was it worked in firefox and did not work in IE know am using multipe tables and forms inside each other ...

General solution

Use JQuery it can solve such issues between browsers in my case i faced this error and replaced with the $('#'+loc).html(ddl) line instead of innerHTML and it worked
```
function buildDDL(){
    if (http_request.readyState == 4)
    {
        var ddl = http_request.responseText;
        ddl = ddl.replace(/[\n]/g, '');
        if(ddl != 'SESSION_EXPIRED'){
            $('#'+loc).html(ddl);
            //document.getElementById(loc).innerHTML = ddl;
        }else{
            location.href = 'errorPage.jsp?status='+ddl;
        }
        http_request = false;
    }
}
```
If you're wondering about functionality, then jQuery's html() performs the same intended functionality as innerHTML, but it also performs checks for cross-browser compatibility.

For this reason, always use jQuery's html() instead of innerHTML where possible.
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页