This is just me messing about with stuff, but I've got the following function:
Code:
function addRow(objRow){
var myTable=document.getElementById("t1");
var myRowID=objRow.id;
var myRowIndex=objRow.rowIndex;
var totalCells=myTable.rows[myRowIndex].cells.length;
var newRow = myTable.insertRow(myRowIndex+1);
for (i=1;i<=totalCells;i++){
if(i==1){
var cellText="-";
var newCell = newRow.insertCell();
newCell.innerHTML = cellText;
newCell.setAttribute('style','font-weight:bold;');
newCell.setAttribute('width','200');
}else if(i==2){
var cellText="+";
var newCell = newRow.insertCell();
newCell.innerHTML = cellText;
newCell.setAttribute('class','bgred');
newCell.setAttribute('width','200');
}else{
var cellText="Row: "+parseInt(myRowIndex+1)+"<br>Cell: "+i;
var newCell = newRow.insertCell();
newCell.innerHTML = cellText;
}
}
}
Which, as you might have guessed, is meant to:
a) create a new row below the current one (it's called via an onClick in a TD that sends the TD's parentElement as an argument)
b) fill that row with cells.
Now this is, obviously, my first effort at messing about with nodes, creating elements directly, (rather than just rewriting innerHTML for example) and the suchlike. Any comments on how I should be doing this better would be gratefully appreciated.
However, I have one specific issue, which is that I'd like to give certain attributes to the first two cells in a new row. This works with some attributes (newCell.setAttribute('width','200');) but not others (newCell.setAttribute('style','font-weight:bold;');) and I'm not sure why.
As far as doing what you're trying to do a better way... can't help you there. I just do whatever works most of the time! Perhaps someone like liorean will come along and lend you some advice on that..
It's not that you can't setAttribute("style", "bla"), but rather that IE has a buggy DOM implementation and doesn't understand that. An alternative would be theelementobject.style.cssText = "bla";
On second thought, that might not actually work out for you... unless objTD is the id of that TD. Are you going through a loop or something?
I think we'll need a second opinion on that one..
As for your second question, I think we'll need to see your table setup to see how or why that's happening. You can also alert the innerHTML of the table to see what the coding behind that table is and then you can debug backwards and figure out what's going on..
Ok, uh - here's the code. A work in progress, obviously
liorean: sorry, but could you show me an example? I tried removeCell.onMouseOver=removeCell.style.backgroundColor='#009900'; as well as the function() thingy in the code below, but nothing is working for me.
And the colspan is definitely showing up after I've set it - it's in the TD's attributes collection and in the TR's innerHTML. But the table still appears malformed
Code:
<html>
<head>
<title>tably thing</title>
<style type="text/css">
th{font-family:Tahoma; font-size:10pt; font-weight:bold; color:black; background-color:#666666;}
td{font-family:Tahoma; font-size:9pt; color:black;}
.bggreen{font-family:Tahoma; font-size:12pt; color:white;background-color:#006600; cursor:hand; text-align:center;}
.bgred{font-family:Tahoma; font-size:12pt; color:white;background-color:#660000; cursor:hand; text-align:center;}
</style>
<script language="JavaScript">
function getAttributes(obj){
for(var i=0;i<obj.attributes.length;i++){
if(obj.attributes[i].specified){
alert(obj.attributes[i].nodeName + "=" + obj.attributes[i].nodeValue);
}
}
}
function addRow(objRow){
var myTable=document.getElementById("t1");
var myRowID=objRow.id;
var myRowIndex=objRow.rowIndex;
var newRow = myTable.insertRow(myRowIndex+1);
var totalCells=myTable.rows[myRowIndex].cells.length;
var myColSpan=totalCells-2;
var removeCell = newRow.insertCell();
removeCell.innerHTML = "-";
removeCell.style.fontSize="12pt";
removeCell.style.backgroundColor = "#006600";
removeCell.style.cursor = "hand";
removeCell.style.textAlign = "center";
removeCell.style.color = "white";
removeCell.onMouseOver=function(){removeCell.style.backgroundColor='#009900'};
removeCell.onMouseOut=function(){removeCell.style.backgroundColor='#006600'};
var addCell = newRow.insertCell();
addCell.innerHTML = "+";
addCell.style.fontSize="12pt";
addCell.style.backgroundColor = "#660000";
addCell.style.cursor = "hand";
addCell.style.textAlign = "center";
addCell.style.color = "white";
var otherCells = newRow.insertCell();
otherCells.innerHTML = "This is a new cell in the table it should be three columns wide but it doesn't look like it.";
otherCells.setAttribute('colspan','3');
getAttributes(otherCells);
}
function removeRow(objRow){
var myTable=document.getElementById("t1");
var myRowID=objRow.id;
var myRowIndex=objRow.rowIndex;
myTable.deleteRow(myRowIndex);
}
</script>
</head>
<body>
<table id="t1" cellpadding=3 cellspacing=0 border=1 style="width:70%;">
<tr id="r0">
<th id="c0_0"> </td>
<th id="c0_1"> </td>
<th id="c0_2">One</td>
<th id="c0_3">Two</td>
<th id="c0_4">Three</td>
</tr>
<tr id="r1">
<td class="bggreen" id="c1_0" onMouseOver="this.style.backgroundColor='#009900'" onMouseOut="this.style.backgroundColor='#006600'" onClick="removeRow(this.parentElement)">-</td>
<td class="bgred" id="c1_1" onMouseOver="this.style.backgroundColor='#990000'" onMouseOut="this.style.backgroundColor='#660000'" onClick="addRow(this.parentElement)">+</td>
<td id="c1_2">c1_2</td>
<td id="c1_3">c1_3</td>
<td id="c1_4">c1_4</td>
</tr>
<tr id="r2">
<td class="bggreen" id="c2_0" onMouseOver="this.style.backgroundColor='#009900'" onMouseOut="this.style.backgroundColor='#006600'" onClick="removeRow(this.parentElement)">-</td>
<td class="bgred" id="c2_1" onMouseOver="this.style.backgroundColor='#990000'" onMouseOut="this.style.backgroundColor='#660000'" onClick="addRow(this.parentElement)">+</td>
<td id="c2_2">c2_2</td>
<td id="c2_3">c2_3</td>
<td id="c2_4">c2_4</td>
</tr>
<tr id="r3">
<td class="bggreen" id="c3_0" onMouseOver="this.style.backgroundColor='#009900'" onMouseOut="this.style.backgroundColor='#006600'" onClick="removeRow(this.parentElement)">-</td>
<td class="bgred" id="c3_1" onMouseOver="this.style.backgroundColor='#990000'" onMouseOut="this.style.backgroundColor='#660000'" onClick="addRow(this.parentElement)">+</td>
<td id="c3_2">c3_2</td>
<td id="c3_3">c3_3</td>
<td id="c3_4">c3_4</td>
</tr>
<tr id="r4">
<td class="bggreen" id="c4_0" onMouseOver="this.style.backgroundColor='#009900'" onMouseOut="this.style.backgroundColor='#006600'" onClick="removeRow(this.parentElement)">-</td>
<td class="bgred" id="c4_1" onMouseOver="this.style.backgroundColor='#990000'" onMouseOut="this.style.backgroundColor='#660000'" onClick="addRow(this.parentElement)">+</td>
<td id="c4_2">c4_2</td>
<td id="c4_3">c4_3</td>
<td id="c4_4">c4_4</td>
</tr>
<tr id="r5">
<td class="bggreen" id="c5_0" onMouseOver="this.style.backgroundColor='#009900'" onMouseOut="this.style.backgroundColor='#006600'" onClick="removeRow(this.parentElement)">-</td>
<td class="bgred" id="c5_1" onMouseOver="this.style.backgroundColor='#990000'" onMouseOut="this.style.backgroundColor='#660000'" onClick="addRow(this.parentElement)">+</td>
<td id="c5_2">c5_2</td>
<td id="c5_3">c5_3</td>
<td id="c5_4">c5_4</td>
</tr>
</table>
</body>
</html>
Before you post, read our: 
