Handling styles.display = "block" in table

[radi8]

OK, here is the scenario, In the table in the first code segment below, I have to inner table elements that I will use to tell the user that the update either succeeded or failed (id's carrierMsg1 and carrierMsg2). If I view these elements without hiding them, they span the columns correctly and everything looks great... BUT (and there is always that but), if I hide the elements initially and then use Javascript (second section) to then conditionally show them, the table elements will only display in the first column of the table even though I explicitly tell it to colspan=8. This is definitely an issue with the style.display="bock" command.

 

Can anyone help me get the embedded table to span the entire 8 columns?

 

<table class="reference" width="100%" border="0" align=left>
  <caption align="top">
  Carrier Info for 1st Choice / Barnett Truck
  </caption>
  <tr>
	<th width="7.5%">Number</th>
	<th width="25%">Name</th>
	<th width="30%">Email</th>
	<th width="7.5%">Ship CA</th>
	<th width="7.5%">Ship FL</th>
	<th width="7.5%">Ship PA</th>
	<th width="7.5%">Ship TX</th>
	<th width="7.5%">Disabled?</th>
  </tr>
  <tr>
	<td align="center">74926</td>
	<td align="center">1st Choice / Barnett Truck</td>
	<td align="center"><input type="text" size="40" id="carrierEmail" value="[email protected]"></td>
	<td align="center"><input type="checkbox" name="shipCA" id="shipCA" value=1 checked></td>
	<td align="center"><input type="checkbox" name="shipFL" id="shipFL" value=1 checked></td>
	<td align="center"><input type="checkbox" name="shipPA" id="shipPA" value=1 checked></td>
	<td align="center"><input type="checkbox" name="shipTX" id="shipTX" value=1 ></td>
	<td align="center"><input type="checkbox" name="carrierDisabled" id="carrierDisabled" value=1 ></td>
  </tr>
  <tr>
	<th colspan=8> <input type="button" name="updateBase" id="updateBase" value="Update Base Carrier Info"  onClick="doBase(74926)">
	</th>
  </tr>
  <tr>
	<th colspan=8 style="display:none" id="carrierMsg1"> <table class="reference" width = "100%" align="center">
		<tr class="success">
		  <th>SUCCESS</th>
		</tr>
		<tr>
		  <th>Carrier Data was successfully updated</th>
		</tr>
	</table></th>
  </tr>
  <tr>
	<th colspan=8 style="display:none"  id="carrierMsg2"> <table class="reference" width = "100%" align="center">
		<tr class="error">
		  <th>AN ERROR OCCURRED DURING UPDATE</th>
		</tr>
		<tr>
		  <th>Carrier Data was NOT updated!!</th>
		</tr>
	</table></th>
  </tr>
</table>

 

java script:

function doBase(carrierNbr){
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState>=3 && xmlhttp.status==200)
		{
			 var txt = xmlhttp.responseText;

			 if(isNaN(txt)){
				 document.getElementById("carrierMsg2").style.display = "block";
				 //document.getElementById("carrierMsg2").cells.colspan=8;
			 }
			 else{
				 var txtVal = parseInt(txt);
				 if(txtVal==0){
					 document.getElementById("carrierMsg1").style.display = "block";
					// document.getElementById("carrierMsg1").cells.colspan=8;
				 }
				 else {
					 document.getElementById("carrierMsg2").style.display = "block";
					 //document.getElementById("carrierMsg2").cells.colspan=8;
				 }
			 }
		}
	}
	document.getElementById("carrierMsg1").style.display = "none";
	document.getElementById("carrierMsg2").style.display = "none";
	var email = document.getElementById('carrierEmail').value;
	var ca	= document.getElementById('shipCA').checked?1:0;
	var fl	= document.getElementById('shipFL').checked?1:0;
	var pa	= document.getElementById('shipPA').checked?1:0;
	var tx	= document.getElementById('shipTX').checked?1:0;
	var dis   = document.getElementById('carrierDisabled').checked?1:0;
	xmlhttp.open("GET","<?php print  'http://'.$_SERVER['HTTP_HOST'].'/webServices/updateCarrier.inc.php';?>?carrierNbr="+carrierNbr+"&carrierEmail="+email+"&shipCA="+ca+"&shipFL="+fl+"&shipPA="+pa+"&shipTX="+tx+"&disabled="+dis,true);
	xmlhttp.send();
}

[Adam]

JavaScript is case-sensitive, and so 'colspan' should be 'colSpan'. However your not using the cells object correctly either - it returns two child objects for each cell, which you need to set the colSpan for individually. I wrote this quick little example which should explain it:

 

<script type="text/javascript">
window.onload = function() {
    var row = document.getElementById('myRow');
    row.cells[0].colSpan = 2;
    row.cells[0].innerHTML = 'Good Cell';
}
</script>

<table>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
    </tr>
    <tr id="myRow">
        <td style="background:#999;">Bad Cell</td>
    </tr>
</table>

[Adam]

Typo in my previous post, should be:

 

"it returns a child object for each cell".

[radi8]

Actually, the solution was to use the following:

 

document.getElementById("carrierMsg2").style.display = "table-cell"

 

instead of:

document.getElementById("carrierMsg2").style.display = "block"

 

[Adam]

Ah, then I think I misunderstood the problem. Looking at your code now actually, you have the colspan assignments commented out:

 

// document.getElementById("carrierMsg1").cells.colspan=8;
[...]
//document.getElementById("carrierMsg2").cells.colspan=8;

 

Nevermind! Sorted now.