Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts

    setting attributes

    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?

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yea, you can't set styles like that.

    You have to do something like the following:
    Code:
    newCell.style.fontWeight = "bold";
    Here's the reference I used:
    http://www.markup.co.nz/dom/style_the_dom.htm

    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..

    Hope that helps,
    Sadiq.

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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";

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    OK, thanks for the replies. Two further questions, though.


    Firstly, can I do this:

    objTD.setAttribute("onMouseOver","this.style.backgroundColor='#009900'");

    Only it's not doing anything for me.


    Secondly, I seem to be setting the attribute correctly here:

    otherCells.setAttribute('colspan','3');

    but the table that gets produced looks like it would if you'd missed a couple of TD's off a TR and not set the colspan to compensate.


    What am I doing wrong?

  • #5
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can answer your first question (at least I think I can), it should read:
    Code:
    objTD.setAttribute("onMouseOver","function() { document.getElementById('objTD').style.backgroundColor='#009900'; };");
    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..

    Hope that helps,
    Sadiq.

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    You can, but shouldn't, set event handlers using setAttribute. Use the regular element.onevent=blah... syntax for that.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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">&nbsp;</td>
    		<th id="c0_1">&nbsp;</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>

  • #8
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try:
    Code:
    removeCell.onMouseOver=function(){this.style.backgroundColor='#009900'};
    and see how that works...

    Sadiq.


  •  

    Posting Permissions

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