السلام عليكم
- احتاج لاضافة جدول قابل للفرز " sortable table"بواسطة محرر html
- حصلت على هذا الكود من احد المواقع التعليمية وهو يعمل بشكل جيد على المتصفح ولكن نظرا لعدم وجود <head> </head> في المحررلا استطيع ادخال كود الجافا سيكريبت وبالتالي زر الفرز لايعمل ...كيف يمكن حلها
- الكود
<head>
<title>Sorting</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
a{color:#0066dd;cursor:pointer;}
tr:hover{cursor:pointer;background-color:#ffeeee;}
.odd{background-color:#ddeeff;}.even{background-color:#ddffee;}
</style>
<script type="text/javascript" >
function sortNumber{y=parseInt
;
var root=document.getElementById('section');
var temp;var totalRow=root.getElementsByTagName('tr').length;
var totalCol=root.getElementsByTagName('tr')[0].getElementsByTagName('td').length
for(var i=0;i<totalRow;i++){
for(var j=i;j<totalRow;j++){
var value1=root.getElementsByTagName('tr')[i].getElementsByTagName('td')[y].innerHTML
var value2=root.getElementsByTagName('tr')[j].getElementsByTagName('td')[y].innerHTML
if(parseFloat(value2)>parseFloat(value1)){
for(var k=0;k<totalCol;k++){
temp=root.getElementsByTagName('tr')[i].getElementsByTagName('td')[k].innerHTML
root.getElementsByTagName('tr')[i].getElementsByTagName('td')[k].innerHTML=root.getElementsByTagName('tr')[j].getElementsByTagName('td')[k].innerHTML
root.getElementsByTagName('tr')[j].getElementsByTagName('td')[k].innerHTML=temp
}
}
}
}
}
function sortIt{y=parseInt
var root=document.getElementById('section');var temp;
var tempA=[];var totalRow=root.getElementsByTagName('tr').length;
var totalCol=root.getElementsByTagName('tr')[0].getElementsByTagName('td').length
for(var c=0;c<totalRow;c++){
tempA[c]=root.getElementsByTagName('tr')[c].getElementsByTagName('td')[y].innerHTML}
tempA.sort();
for(var i=0;i<totalRow;i++){
for(var j=i;j<totalRow;j++){
var value=root.getElementsByTagName('tr')[j].getElementsByTagName('td')[y].innerHTML
if(value==tempA[i]){
for(var k=0;k<totalCol;k++){
temp=root.getElementsByTagName('tr')[i].getElementsByTagName('td')[k].innerHTML
root.getElementsByTagName('tr')[i].getElementsByTagName('td')[k].innerHTML=root.getElementsByTagName('tr')[j].getElementsByTagName('td')[k].innerHTML
root.getElementsByTagName('tr')[j].getElementsByTagName('td')[k].innerHTML=temp
}
}
}
}
}
function addE(){
var root=document.getElementById('section')
var totalRow=root.getElementsByTagName('tr').length
for(var i=0;i<totalRow;i++){
root.getElementsByTagName('tr')[i].className=(i%2)?"even":"odd"
}
}
</script>
</head>
<body onload="addE()">
<div><table border="1">
<thead><tr><th><b>book Name </b><small><a onclick="sortIt('0')">sort it!</a></small></th>
<th><b>Price </b><small><a onclick="sortNumber('1')">sort it!</a></small></th>
<th><b>publisher </b><small><a onclick="sortIt('2')">sort it!</a></small></th>
<th><b>old-Price </b><small><a onclick="sortNumber('3')">sort it!</a></small></th></tr>
</thead>
<tbody id="section">
<tr><td>HTML</td><td>55</td><td>Sams</td><td>60.55</td></tr>
<tr><td>ADO.Net</td><td>60</td><td>manning</td><td>60.54</td></tr>
<tr><td>Java</td><td>38</td><td>Packt</td><td>39.99</td></tr>
<tr><td>C#</td><td>40</td><td>Apress</td><td>39.90</td></tr>
<tr><td>JRuby</td><td>100</td><td>for dummies</td><td>55.01</td></tr>
<tr><td>JavaFX</td><td>90</td><td>SitePoint</td><td>55.20</td></tr>
<tr><td>Java EE</td><td>50</td><td>Sun</td><td>57.09</td></tr>
<tr><td>Ajax</td><td>0.90</td><td>dzone</td><td>1.10</td></tr>
<tr><td>Flex</td><td>120</td><td>Adobe</td><td>150.99</td></tr>
<tr><td>C++</td><td>90.90</td><td>1920-Alive</td><td>38.20</td></tr>
</tbody>
</table>
</div>
</body>
</html>"
وهذه النتيجة التي نحصل عليها