0

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
9
Views
7 Years
Discussion Span
Last Post by CommDave
1

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

Votes + Comments
Airshow has a new fan. Thank you so much!
0

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

0

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

0

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.

0

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

0

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!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.