Turn dynamic inventory table into list?

I am trying to turn this

Code behind it

><table style="border: 1px solid rgb(238, 238, 238);" align="center" border="0" cellpadding="1" cellspacing="1">
<tbody><tr>
<td style="padding-right: 10px;" align="left" valign="middle"><b>Stock</b></td>
<td style="width: 15px;" align="center" valign="middle"><b>30</b></td>
<td style="width: 15px;" align="center" valign="middle"><b>31</b></td>
<td style="width: 15px;" align="center" valign="middle"><b>32</b></td>
<td style="width: 15px;" align="center" valign="middle"><b>33</b></td>
<td style="width: 15px;" align="center" valign="middle"><b>34</b></td>
<td style="width: 15px;" align="center" valign="middle"><b>36</b></td>
<td style="width: 15px;" align="center" valign="middle"><b>38</b></td>
</tr>
<tr>
<td style="padding-right: 15px;" align="right" valign="middle"><b></b></td>
<td align="center" valign="middle">Yes</td>
<td align="center" valign="middle">No</td>
<td align="center" valign="middle">Yes</td>
<td align="center" valign="middle">Yes</td>
<td align="center" valign="middle">Yes</td>
<td align="center" valign="middle">Yes</td>
<td align="center" valign="middle">No</td>
<td align="center" valign="middle">Yes</td>
</tr>
</tbody></table>

PHP:

Into This


Code

<ul class="stocksize">
    <li>30</li>
    <li id="off">31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>36</li>
</ul>  

PHP:

The 30,31,32... could also be sizes like S,M,L etc. I am looking for a way to change the layout and make it a list, but it has to work if it's a numerical of letter size. There may be only 2 size options or there may be 14, it should work either way.

I just don't know how to do it in JS. I will gladly pay (PayPal is fine) anyone who can produce this for me. I will have to test and see it works first.

This will need to work in IE 7 and above, Firefox, Safari and Chrome. This will need to function on either http or https without errors.

Contact me by PM and I can give you my details, contact information etc and we can go from there. Prefer US, but am willing to work outside the US. 1099 contract position.

 

Thought I'd have a go as it seemed fairly quick and I really need to get back into jQuery. If you do try it, let me know how it goes.

	<script type="text/javascript">
		(function ($) {
			$(document).ready(function () {
				var stockTable = $("table");
				var stock = $(stockTable).find("tr"); 
				var stockOpts = $(stock[1]).children("td").slice(1);
				var newStock = $("<ul />")
					.attr("class", "stocksize")
					.insertAfter(stockTable);

				$(stock[0]).children("td").slice(1).each(function (i) {
					$("<li />")
						.html($(this).text())
						.attr("class", $(stockOpts[i]).text() == "No" ? "Off" : "")
					.appendTo(newStock);
				});
				$(stockTable).remove();
			});
		})(jQuery);			
	</script>

HTML:

It uses jQuery, so you'll need to include that.

I've assumed that there is only one table on the page. If this isn't the case, you'll need a way of distinguishing between them. If this table is the only one with a light grey 1px border, you can change the stockTable line to

var stockTable = $("table[style='border\\: 1px solid rgb(238\\, 238\\, 238)\\;']");

Code (markup):

Alternately you could do it by counting if the stock table is always the second one / last one / whatever.

I've assumed that the number of sizes and in stock indicators is always the same (it isn't in your example code, which is probably a paste error). The code doesn't check this.

I've also changed your out of stock indicator to class="Off" as using the same ID more than once is invalid.

 

I did have a copy error, because of who I was logged in as, but the actual inventory wasn't a mistake. The "No" should be "Off" and the "Yes" should be "On" or blank or whatever.

What you posted does make the list and removes the tables, but I do need the <li> class to change if that child is a yes or a no.

I don't know if that make sense. Here is the actual code as it appears to people other than me (sorry about the first one) and there are a lot of tables, so making this one unique is important, but the table as pasted is unique in its construction. And you'll probably need to give me an email in PM so I can send you some $$$

<table border="0" align="center" cellpadding="1" cellspacing="1" style="border-style: solid; border-color: #EEEEEE; border-width: 1px;"> 
<tr> 
<td style="padding-right: 10px" valign="middle" align="left"><b>Stock</b></td> 
<td style="width: 15px" valign="middle" align="center"><b>28</b></td> 
<td style="width: 15px" valign="middle" align="center"><b>29</b></td> 
<td style="width: 15px" valign="middle" align="center"><b>30</b></td> 
<td style="width: 15px" valign="middle" align="center"><b>31</b></td> 
<td style="width: 15px" valign="middle" align="center"><b>32</b></td> 
<td style="width: 15px" valign="middle" align="center"><b>33</b></td> 
<td style="width: 15px" valign="middle" align="center"><b>34</b></td> 
<td style="width: 15px" valign="middle" align="center"><b>36</b></td> 
</tr> 
<tr> 
<td style="padding-right: 15px" valign="middle" align="right"><b></b></td> 
<td valign="middle" align="center">No</td> 
<td valign="middle" align="center">No</td> 
<td valign="middle" align="center">Yes</td> 
<td valign="middle" align="center">No</td> 
<td valign="middle" align="center">Yes</td> 
<td valign="middle" align="center">No</td> 
<td valign="middle" align="center">No</td> 
<td valign="middle" align="center">Yes</td> 
</tr> 
</table> 

PHP:

 

I assume you want to change the site in your signature (if not, please give me the URL ). I've just tested the code below with 3 of your product pages and it seems to work OK.

	<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
	<script type="text/javascript">
		(function ($) {
			$(document).ready(function () {
				var stockTable = $(".inventorysize table");
				var stock = $(stockTable).find("tr");
				var stockOpts = $(stock[1]).children("td").slice(1);
				var newStock = $("<ul />")
					.attr("class", "stocksize")
					.insertAfter(stockTable);

				$(stock[0]).children("td").slice(1).each(function (i) {
					$("<li />")
						.html($(this).text())
						.attr("class", $(stockOpts[i]).text() == "No" ? "Off" : "")
					.appendTo(newStock);
				});
				$(stockTable).remove();
			});
		})(jQuery);			
	</script>

HTML:

The code assumes that the div.inventory table structure is unique on the page and contains the size stock info. This seems to be true, but if I'm wrong about that / you change things in the future, you could well have issues.

<div class="inventorysize">
<table>
...
</table>
</div>

HTML:

As I said before (but obviously didn't explain properly ), I've changed the styling so it adds the class Off, rather than the ID Off, to sizes that are out of stock as having more than 1 ID with the same name is invalid. (Hope that's OK.) To get the code to work, you should change style.css

.stocksize #Off { ... }

Code (markup):

to

.stocksize .Off { ... }

Code (markup):

The JavaScript doesn't work on this page (hostelboardcompany.com/p-2962-oneill-hyperfreak-20-mens-boardshorts-blk.aspx) because the HTML is malformed (you're missing the end of the alt attribute).

<img border="0" id="MANUFACTURERPic4" name="MANUFACTURERPic4" src="images/manufacturer/icon/4.jpg" alt=" />

HTML:

And if you want to pay me for this then I'm not going to say no , but I didn't do this for the money so it's completely up to you.

 

suh-weet! I had to make a few little changes to get the format right. I sent a PM, but don't know if you have enough posts for PM. If you don't get it, post back in this thread, I ahve something for you

 

damn, spoke too soon. fixed the manufacturer's alt and it seems to have broken the whole thing...

 

check your email...