Convert table to list
Convert table to list
I am converting a <table> to list (<ul><li>) I have 25 row and each row has 5 col. I'm putting the first col into an <li> and getting background color from the remaining 4 col. my code works for the colors however I'm not sure why? I'm only looking at the first child in the <tr> and yet it's returning the color for all 4???
Also I need to count the rows and add to the current rendered list
function convertToList() {
$('#tblHospitals th').remove();
var list = $("<ul></ul>");
var myrowCount = "10"
//alert($("div.chat5 table td").size());
$("div.chat5 table tr").each(function() {
var children = $(this).children();
var color = children.eq(1).css("background-color");
list.append("<li>" + children.eq(0).text() +
children.eq(1).text().css('background-color:' + color) +
"</li>");
});
$('table').replaceWith(list);
};
my sample html table looks like:
<table id="tblHospitals" cellspacing="0" cellpadding="1" align="Left" rules="all" border="1" style="border-color:Black;border-width:1px;border-style:Solid;width:100%;border-collapse:collapse;table-layout: fixed;">
</tr><tr>
...
<td class="Chats">Providence Hospital</td><td class="Chats"></td><td class="Chats"></td><td class="Chats"></td><td class="Chats"></td><td class="Chats-null"></td>
</tr><tr>
<td class="Chats">Sibley Memorial</td><td class="Chats"></td><td class="Chats"></td><td class="Chats"></td><td class="Chats"></td><td class="Chats-null"></td>
</tr><tr>
<td class="Chats">United Medical Center</td><td class="Chats" style="background-color:#ffff00;color:#000000;">08:35</td><td class="Chats" style="background-color:#ff0000;color:#000000;">09:35</td><td class="Chats"></td><td class="Chats"></td><td class="Chats-null"></td>
</tr>
</table>