Member Avatar for CommDave

Hello!
Below is a part of an html document where I need to save myself time in having to manually put in the number in the p class="ArtNumbers" section.

Thank you very much, I'm grateful for your time.

<td><p><img src="Food2/SF_Food_01.jpg"></p>
				<p class="ArtNumbers">1</p></td>
		<td><p><img src="Food2/SF_Food_02.jpg"></p>
				<p class="ArtNumbers">2</p></td>
		<td><p><img src="Food2/SF_Food_03.jpg"></p>
				<p class="ArtNumbers">3</p></td>
		<td><p><img src="Food2/SF_Food_04.jpg"></p>
				<p class="ArtNumbers">4</p></td>
  • 2 Contributors
  • 8 Replies
  • 135 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by CommDave
Member Avatar for Airshow

Maybe I'm being dumb but I don't get it.

That's a very ordinary piece of HTML that could have been written manually or generated by a script.

Why does this qualify as a Code Snippet? How does the HTML relate to "save myself time having to manually put in the number ...."?

commented: Airshow has a new fan. Thank you so much! +0
Member Avatar for CommDave

I appreciate your time an d perhaps I need to clarify a bit more.

The html is how it is structured in the site.
Currently I have to put in the numeric sequence manually.
I'm looking for a piece of code that will do this for me.

<p class="ArtNumbers">1</p> replaced with javascript

Member Avatar for Airshow

CommDave

Aha, I undertstand now!!. The problem was that your question was posted as a "Code Snippet", which is not the normal way to ask a question on Daniweb. Maybe a moderator can change it.

Here's some code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
td p { margin:0; text-align: center; }
.ArtNumbers { border-width: 0; }
</style>

<script>
//This funtion is called when the page has loaded.
onload = function(){
	//This is the worker function.
	var numberImages = function(tableID, startInteger){
		var el = document.getElementById(tableID) || document.body;
		startInteger = (!startInteger) ? 0 : startInteger;
		var images = el.getElementsByTagName('img');
		for(var i=0; i<images.length; i++){
			if(images[i].className == 'numberMe'){
				var p = document.createElement('p');
				p.className = 'ArtNumbers';
				p.innerHTML = (i + startInteger);
				images[i].parentNode.parentNode.appendChild(p);
			}
		}
		return i + startInteger;
	};
	
	//Here you call the worker function and control how the images are numbered
	var x = numberImages('myTable_1', 1);//myTable_1, start at 1
	x = numberImages('myTable_2', 101);//myTable_2, start at 101
	x = numberImages('myTable_3', x);//myTable_3, start where myTable_2 left off (note how we feed x back into the function call).
}
</script>
</head>

<body>
<table id="myTable_1" border>
<tr>
<td><p><img class="numberMe" src="Food2/SF_Food_01.jpg"></p></td>
<td><p><img class="numberMe" src="Food2/SF_Food_02.jpg"></p></td>
<td><p><img class="numberMe" src="Food2/SF_Food_03.jpg"></p></td>
<td><p><img class="numberMe" src="Food2/SF_Food_04.jpg"></p></td>
</tr>
</table>

<table id="myTable_2" border>
<tr>
<td><p><img class="numberMe" src="Food2/SF_Food_01.jpg"></p></td>
<td><p><img class="numberMe" src="Food2/SF_Food_02.jpg"></p></td>
<td><p><img class="numberMe" src="Food2/SF_Food_03.jpg"></p></td>
<td><p><img class="numberMe" src="Food2/SF_Food_04.jpg"></p></td>
</tr>
</table>

<table id="myTable_3" border>
<tr>
<td><p><img class="numberMe" src="Food2/SF_Food_01.jpg"></p></td>
<td><p><img class="numberMe" src="Food2/SF_Food_02.jpg"></p></td>
<td><p><img class="numberMe" src="Food2/SF_Food_03.jpg"></p></td>
<td><p><img class="numberMe" src="Food2/SF_Food_04.jpg"></p></td>
</tr>
</table>

</body>
</html>

See comments in code for details.

As you see, it's fairly flexible but does assume that only images are to be numbered, exactly as in your sample HTML. If you want to number something other than images, then you may be able to modify the code. It would get a bit trickier if you want to number a mixture of HTML tag types, eg images and divs.

Good luck

Airshow

Member Avatar for CommDave

Thank you so much! I understand what you are doing there and when I get into this in the morning I will let you know right away if it solved my issue. I am very grateful for your time, PATIENCE and efforts. I think you rock. I'll post my results tomorrow and thank you so very much.

Member Avatar for CommDave

Thank you Airshow! I will be able to tweak this the way I need to. I appreciate your help!

Member Avatar for CommDave

Thank you Airshow! I will be able to tweak this the way I need to. I appreciate your help!

I got it! It works! Thank you so much AirShow!

Member Avatar for Airshow

:cool:

Member Avatar for CommDave

You just saved me a lot of time. Thank you so much.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.