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.
Any suggestions?