Hi there,
Ive check the following code in all major browser and it works fine accept ofcourse in IE.
Im trying to take the innerHTML from one row and move it to the one above or below depand on the button you are clicking.
Does anyone have any idea?
Many thanks
mkariti
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
TABLE {
border-collapse: collapse;
}
TBODY {
border-top: solid black 1px;
}
TR {
border-bottom: solid black 1px;
}
</style>
<script type="text/javascript" language="javascript">
var getId;
var row = {
selected: -1,
hoverColor: '#CCCCCC',
defaultColor: '#FFFFFF',
onclick: function (trow, id) {
getId = id;
var r = document.getElementById('row_' + row.selected);
if (row.selected != -1 && r)
r.bgColor = row.defaultColor;
row.selected = id;
trow.bgColor = row.hoverColor;
},
moshe: function (num) {
var table = document.getElementById("tableId");
var getRowLength = document.getElementById("tableId").rows.length;
if (num == 1) {
// table.rows[getId].parentNode.insertBefore(table.rows[getId], table.rows[getId - 1]);
// getId++;
var tempDown = document.getElementById("row_" + getId).innerHTML;
document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId + 1)).innerHTML;
document.getElementById("row_" + getId).bgColor = row.defaultColor;
document.getElementById("row_" + (getId + 1)).innerHTML = tempDown;
document.getElementById("row_" + (getId + 1)).bgColor = row.hoverColor;
getId++;
}
else {
// getId--;
// table.rows[getId].parentNode.insertBefore(table.rows[getId + 1], table.rows[getId]);
var tempUp = document.getElementById("row_" + getId).innerHTML;
document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId - 1)).innerHTML;
document.getElementById("row_" + getId).bgColor = row.defaultColor;
document.getElementById("row_" + (getId - 1)).innerHTML = tempUp;
document.getElementById("row_" + (getId - 1)).bgColor = row.hoverColor;
getId--;
}
}
}
</script>
</head>
<body>
<div>
<table id="tableId">
<tbody>
<tr id="row_1" onclick="row.onclick(this,1);"><td><input type="checkbox"></td><td>Row 1</td><td>A</td></tr>
<tr id="row_2" onclick="row.onclick(this,2);"><td><input type="checkbox"></td><td>Row 2</td><td>B</td></tr>
<tr id="row_3" onclick="row.onclick(this,3);"><td><input type="checkbox"></td><td>Row 3</td><td>C</td></tr>
<tr id="row_4" onclick="row.onclick(this,4);"><td><input type="checkbox"></td><td>Row 4</td><td>D</td></tr>
<tr id="row_5" onclick="row.onclick(this,5);"><td><input type="checkbox"></td><td>Row 5</td><td>E</td></tr>
</tbody>
</table>
</div>
<div>
<button id="btn_down" onclick="row.moshe(1)">Down</button>
<button id="btn_up" onclick="row.moshe(2)">Up</button>
</div>
</body>
</html>
