HTML table - value attribute

[likwid]

Hi

I'm really new to all this but is there a way to store a value to a table cell, within the tag say, similar to a select box> I'm looking for a default value to be stored in each cell of a row which I will access via DOM and use to update the value of the cell itself.

 

[Sic]

I'm confused, are you just looking for

<table>
  <tr>
    <td>Value goes here</td>
  </tr>
</table>

unless I've missed something huge, there's no way to have a default value without a scripting language, be it server or client side

 

[likwid]

I'm confused, are you just looking for

<table>
  <tr>
    <td value="[color=red]default here[/color]">Value goes here</td>
  </tr>
</table>

Something like this possible?

 

[Sic]

ah right I see what you're up to. In short, no. You could do it with javascript, though as I'm sure you don't want to be going through and manually putting data in if no other exists. Something like:

var tds = document.getElementsByTagName('td');
for (i in tds) {
  if (tds[i].innerText == '') { // won't always work because IE and Firefox differ in how they do this
    tds[i].appendChild(document.createTextNode('default here'));
  }
}

and just to illustrate how easy jQuery is:

$('td').each(function(){
  if (jQuery.trim($(this).text()) == '' || jQuery.trim($(this).text()) == undefined) { // will always work :)
    $(this).text('default text');
  }
});

 

[likwid]

So far I've got :

		var tables = Core.getElementsByClass("nuTable");
	    for (var j = 0; j < tables.length; j++)
	    {
			var rows = tables[j].getElementsByTagName("tr");
			for (var k = 0; k < rows.length; k ++)
			{
				var cells = rows[k].getElementsByTagName("td");
				for (var l = 0; l < cells.length; l++  )
				{
					if ( l == 1 ) 
					{
					//alert(cells[l].);
						//cells[l].innerHTML = cells[l].value * document.getElementById("preMulti").value * document.getElementById("preSizes").value;
					}
				}
			}
		}

Really the problem I have is that once the cell is updated, the original value is lost. Is there an easier way to store persistent data in javascript? I haven't been able to find anything.

Thanks for your help.

 

[Sic]

there's no need to loop through trs from what I can see there - you're not making any alterations to the actual tr so I'd drop it.

I'm not sure what you mean about the cell being updated and the original value being lost, can you give me an example?

 

[likwid]

Each cell contains a numeric value which I need to multiply by another numeric value which is stored in a text box and updated on keyup. I need the original value to be stored somewhere so it can be used in each separate multiplication.

 

[Sic]

ahh, I see what you're doing now

I assume that you're not bothered about this working without javascript enabled. If that's the case, why not put the original value in a hidden span in the table cell?

 

[likwid]

Not worried about non-javascript really, no.

So I need to add a span element, where it hasn't previously been added, encompassing each cell of this column?

 

[Sic]

not encompassing, encompassed by. Semantically, you can't put a td in a span in a tr. the markup generated will look something like this:

<td>
  10
  <span class="totallyhidden">10</span>
</td>

 

[likwid]

That's brilliant! Thanks very much for your help.