www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript not working in Internet Explorer

  1. #1
    Join Date
    May 2012
    Posts
    38

    Javascript not working in Internet Explorer

    Hi ,

    I am running this following html and javascript . Please check that after clicking on "Add Condition" button, a new row is added for adding more conditions alongwith a "Rem. cond." button at the rightmost side of that added row for removing the row.

    Problem is that "Rem. cond." button is working fine in Firefox but not in Internet Explorer. Please help me to get this working in both the browsers.

    Something must be going wrong in the removeRowFromTable function. Please help.

    Thanks.

    Code:
    <html>
    <title>query builder </title>
    	<table border="0" id="tblSample" align=center>
      <tr>
        <th colspan="7" class=teamlevel  height=17>The conditions that the result should match </th>
      </tr>
      
    <tr id="RmC_1"><td width=5%>&nbsp;</td><td ><select name='OPENBRACK1'><option
    value=''></option><option value='('>(</option></td><td><select name='FIELD1'><option
    value='view'>View Name</option><option value='path'>Path</option></select>
    </td> 
    
    <td><select name='COMP1'><option value='='>=</option><option
    value='!='>!=</option></select> </td>
    <td><input type=text name='VALUE1' maxlength=40 size=30 value=''></td><td ><select name='CLOSEBRACK1'><option value=''></option><option value=')'>)</option></td><td >&nbsp;</td>
    </tr>
    <tr>
    
        <td colspan=7 align=center>
        <input type='hidden' name='NoOfRows' value="1" />
        <input type="button" value="Add Condition" onclick="addRowToTable()" name="AddCondition" />
       </td>
      </tr>
    
    </table>
    <script type= "text/javascript">
    
    function addRowToTable() {
    
    	var tbl = document.getElementById('tblSample');
    	var lastRow = (tbl.rows.length -1);
    
    	//if there's no header row in the table,then iteration = lastrow +1
    	var iteration = lastRow;
    	var row = tbl.insertRow(lastRow);
    
    	var newCell = row.insertCell(0);
    	var oSelect = document.createElement("select");
    	oSelect.setAttribute('name', 'ANDOR' + iteration);
    	var oOption = document.createElement("OPTION");
    	var t = document.createTextNode("AND");
    	oOption.setAttribute("value", 'AND');
    	oOption.appendChild(t);
    	oSelect.appendChild(oOption);
    	var oOption1 = document.createElement("OPTION");
    	var t = document.createTextNode("OR");
    	oOption1.setAttribute("value", 'OR');
    	oOption1.appendChild(t);
    	oSelect.appendChild(oOption1);
    	newCell.appendChild(oSelect);
    
    	var newCell = row.insertCell(1);
    	var oSelect = document.createElement("select");
    	oSelect.setAttribute('name', 'OPENBRACK' + iteration);
    	var oOption = document.createElement("OPTION");
    	var t = document.createTextNode("");
    	oOption.setAttribute("value", '');
    	oOption.appendChild(t);
    	oSelect.appendChild(oOption);
    	var oOption1 = document.createElement("OPTION");
    	var t = document.createTextNode("(");
    	oOption1.setAttribute("value", '(');
    	oOption1.appendChild(t);
    	oSelect.appendChild(oOption1);
    	newCell.appendChild(oSelect);
    
    	var newCell = row.insertCell(2);
    	var oSelect = document.createElement("select");
    	oSelect.setAttribute('name', 'FIELD' + iteration);
    	var oOption = document.createElement("OPTION");
    	var t = document.createTextNode("View Name");
    	oOption.setAttribute("value", 'view');
    	oOption.appendChild(t);
    	oSelect.appendChild(oOption);    
    
    	var oOption = document.createElement("OPTION");
    	var t = document.createTextNode("Path");
    	oOption.setAttribute("value", 'path');
    	oOption.appendChild(t);
    	oSelect.appendChild(oOption); 
    
    	newCell.appendChild(oSelect);
    
    	var newCell = row.insertCell(3);
        var oSelect = document.createElement("select");
    	oSelect.setAttribute('name', 'COMP' + iteration);
    	var oOption = document.createElement("OPTION");
    	var t = document.createTextNode("=");
    	oOption.setAttribute("value", '=');
    	oOption.appendChild(t);
    	oSelect.appendChild(oOption);
    	var oOption1 = document.createElement("OPTION");
    	var t = document.createTextNode("!=");
    	oOption1.setAttribute("value", '!=');
    	oOption1.appendChild(t);
    	oSelect.appendChild(oOption1);
    	newCell.appendChild(oSelect);
    
    	// right cell
     	var cellRight = row.insertCell(4);
        var el = document.createElement('input');
        el.setAttribute('type', 'text');
        el.setAttribute('name', 'VALUE' + iteration);
        el.setAttribute('id', 'txtRow' + iteration);
        el.setAttribute('size', '30');
        el.setAttribute('maxlength', '40');
        cellRight.appendChild(el);
    
        var newCell = row.insertCell(5);
    	var oSelect = document.createElement("select");
    	oSelect.setAttribute('name', 'CLOSEBRACK' + iteration);
    	var oOption = document.createElement("OPTION");
    	var t = document.createTextNode("");
    	oOption.setAttribute("value", '');
    	oOption.appendChild(t);
    	oSelect.appendChild(oOption);
    	var oOption1 = document.createElement("OPTION");
    	var t = document.createTextNode(")");
    	oOption1.setAttribute("value", ')');
    	oOption1.appendChild(t);
    	oSelect.appendChild(oOption1);
    	newCell.appendChild(oSelect);
    	
    	var newCell = row.insertCell(6);
        var elb = document.createElement('input');
        elb.setAttribute('type', 'button');
        elb.setAttribute('name', 'RmC_' + iteration);
        //elb.setAttribute('value', 'Rem. cond.' + iteration);
        elb.setAttribute('value', 'Rem. cond.');
        elb.setAttribute('onclick', 'removeRowFromTable("RmC_' + iteration + '");');
        elb.setAttribute('id', 'RmC_' + iteration);
        //elb.setAttribute('size', '30');
        //elb.setAttribute('maxlength', '40');
        newCell.appendChild(elb);
        document.query.NoOfRows.value = parseInt(document.query.NoOfRows.value) + 1;
    
    
    	
    	} 
    
    	
    
    function removeRowFromTable(rmid) {
    
    	
      var tbl = document.getElementById('tblSample');
      var lastRow = tbl.rows.length;
      var removed = 0 ;
     for(var i=2; i<lastRow - 1; i++) 
     {
    	var lastCol = tbl.rows[i].cells[6].childNodes[0].name ;
    	if ((lastCol != undefined)&&(lastCol == rmid))
    	{	
      		//alert('rmid:' + rmid + '\n' + 'last:' + lastCol) ;
       		tbl.deleteRow(i);
    		removed = i ;
      		break ;
    	}
     }
     if (removed < lastRow-2) 
     {
     var reg = /(\D+)(\d+)/ ;
     for(var i=removed ; i<lastRow - 2; i++) 
     {
    	for (var j=0;j<=6;j++)
    	{
    	var col = tbl.rows[i].cells[j].childNodes[0].name; 
    	var arry = reg.exec(col) ;
    	var newnum = parseInt(arry[2]) - 1 ;
    	var necol = arry[1] + newnum ;
    	tbl.rows[i].cells[j].childNodes[0].setAttribute('name', necol) ;
    	if (j == 6)
    	{
    		tbl.rows[i].cells[j].childNodes[0].setAttribute('onclick', 'removeRowFromTable("' + necol + '");') ;
    	}
    	//alert('reg:' + reg + '\n' + 'arry[0]:' + arry[0] + 'arry[1]:' + arry[1] + 'arry[2]:' + arry[2] + '\n' + 'necol:' + necol ) ;
    	}
     	//alert( 'removed:' + removed + '\n' + 'Last:' + lastRow + '\n\n' + 'Shift:' + i ) ;
     }
     }
     else
     {
    	//alert('No shifting needed!!\n' + 'removed:' + removed + '\n' + 'Last:' + lastRow) ;
     }
      //Element.remove(rmid) ;
      if (lastRow > 3) {
          //tbl.deleteRow(lastRow - 2);
          document.query.NoOfRows.value = parseInt(document.query.NoOfRows.value) - 1;
      }
    
    
     }
    
    
    
    
    
    </script>
    
    
    </html>

  2. #2
    Join Date
    May 2004
    Location
    chennai, tamil nadu, India
    Posts
    442
    This looks like the same problem and it has a solution.


    Turns out to get IE to run an onclick on a dynamically generated element, we can't use setAttribute. Instead, we need to set the onclick property on the object with an anonymous function wrapping the code we want to run.

    execBtn.onclick = function() { runCommand() };

    Chris, Senior Developer,
    Php laravel developers,
    http://www.chrisranjana.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles