...
PDA

Javascript Programming

srinivasM
05-29-2009, 08:23 AM
I want to change the content of <TD> tag of a HTML table sorted by alphabets(A-Z) in a different HTML table using javascript?
abduraooft
05-29-2009, 10:59 AM
I want to change the content of <TD> tag of a HTML table sorted by alphabets(A-Z) in a different HTML table using javascript? Please post your current code (wrap your code by ][/COLOR] tags while posting here) and explain your requirement/issue on the basis of that.
itsallkizza
05-29-2009, 04:05 PM
Here ya go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
// <![CDATA[



function sortAndCopyTable(index)
{
/* order rows by column index */
var old_table = document.getElementById("table_1");
var trs = old_table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
var rows = new Array();
var keys = new Array();
var xhtml_tag_regexp = new RegExp("<[^>]*>","g");
for (var i=0;i<trs.length;i++)
{
var tds = trs[i].getElementsByTagName("td");
var row = new Array();
for (var c=0;c<tds.length;c++) row[c] = tds[c].innerHTML;
rows[i] = row;
keys[i] = [(row[index]+"").replace(xhtml_tag_regexp,""),i];
}
keys.sort();
var ordered_rows = new Array();
for (var i=0;i<keys.length;i++) ordered_rows[keys[i][1]] = rows[i];


/* insert sorted data into new table */
var new_table = document.getElementById("table_2");
var new_table_tb = new_table.getElementsByTagName("tbody")[0];
new_table.getElementsByTagName("thead")[0].innerHTML = old_table.getElementsByTagName("thead")[0].innerHTML;
var new_html = "";
for (var i=0;i<ordered_rows.length;i++)
{
new_html += "<tr>";
for (var c=0;c<ordered_rows[i].length;c++)
{
new_html += "<td>";
new_html += ordered_rows[i][c];
new_html += "</td>";
}
new_html += "</tr>";
}
new_table_tb.innerHTML = new_html;
}

// ]]>
</script>
</head>
<body>

<table id="table_1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ron Jon</td>
<td>24</td>
<td>M</td>
</tr>
<tr>
<td>Richard Cory</td>
<td>32</td>
<td>M</td>
</tr>
<tr>
<td>Shirley Temple</td>
<td>17</td>
<td>F</td>
</tr>
<tr>
<td>Bill Smithers</td>
<td>46</td>
<td>M</td>
</tr>
<tr>
<td>Richard Cory</td>
<td>41</td>
<td>M</td>
</tr>
</tbody>
</table>

<br />
<input type="button" value="sort by name" onclick="sortAndCopyTable(0)" />
<br /><br />

<table id="table_2">
<thead></thead>
<tbody></tbody>
</table>

</body>
</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum