自定义html表 [英] Custom html table
问题描述
我想使用Javascript编写一个小程序，我想制作一个由排名表组成的网页，一些参与者可以在其中对表进行排序，其中最重要的项将位于表的顶部，最重要的项目将通过按下某些控制按钮而位于底部.
I want to make a small program using Javascript, I want to make a web-page that consists of a ranking-table where some participants can sort the table where the most important item will be at the top of the table and the least important item will be at the bottom via pressing some control buttons.
一开始，所有项目都将处于同一级别:
At the beginning, all the items will at same level:
如果用户按下项目1的向上按钮，则项目1将上移一个级别，而其他项目将向左移动:
If the user press Up button of item1, item1 will be raised up one level and the other items will shift to the left:
如果我再次按下相同的按钮，则item1将被提升一个级别，并且在第2级之间将放置一颗星星.
If I press the same button again, item1 will be raised one level up and a star will be placed in between at rank 2:
我不擅长Java语言，也不知道如何实现，这是我到目前为止所做的:
I am not good at Javascript and I have no idea how to achieve this, here is what I have done so far:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function moveUp()
{
}
function moveDown()
{
}
// End -->
</script>
</HEAD>
<BODY>
<table border="1">
<tr>
<th>Rank
</th>
<th colspan="5">
<p align="center">The Criteria
</th>
</tr>
<tr>
<td>
<p align="center">1
</td>
<td>
<form name="form1" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up1" value="Up" onclick="moveUp();"> Item 1
<input type="button" name="Down1" value="Down" onclick="moveDown();">
</form>
</td>
<td>
<form name="form2" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up2" value="Up" onclick="moveUp();"> Item 2
<input type="button" name="Down2" value="Down" onclick="moveDown();">
</form>
</td>
<td>
<form name="form3" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up3" value="Up" onclick="moveUp();"> Item 3
<input type="button" name="Down3" value="Down" onclick="moveDown();">
</form>
</td>
<td>
<form name="form4" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up4" value="Up" onclick="moveUp();"> Item 4
<input type="button" name="Down4" value="Down" onclick="moveDown();">
</form>
</td>
<td>
<form name="form5" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up5" value="Up" onclick="moveUp();"> Item 5
<input type="button" name="Down5" value="Down" onclick="moveDown();">
</form>
</td>
</tr>
</table>
</body>
</html>
推荐答案
这是您的起点.
更改您的onclick属性以使用.call().这仅允许您在调用的函数中将this的值设置为传递给.call()的第一个参数的值. (在这种情况下，就是接收事件的元素.)
Change your onclick attributes to use .call(). This just lets you set the value of this in the functions you're calling to the value of the first argument you pass to .call(). (In this case, the element that received the event.)
<input type="button" name="Up1" value="Up" onclick="moveUp.call(this);"> Item 1
<input type="button" name="Down1" value="Down" onclick="moveDown.call(this);">
然后，这些功能应该给出如何工作的基本概念.可能可以进行一些调整，例如添加新行，这样您就不能添加比正在排序的单元格更多的行.
Then these functions should give a basic idea of how it could work. Probably could use some tweaks like making it so that you can't add more rows than there are cells you're sorting.
var table = document.getElementById( 'mytable' );
var filler = document.createElement( 'td' );
filler.className = 'filler';
filler.innerHTML = '*';
function moveUp() {
var cell = this.parentNode.parentNode;
var row = cell.parentNode;
var row_above;
if( row.rowIndex === 1 ) {
row_above = table.insertRow( 1 );
row_above.insertCell( 0 );
update_row_numbers();
} else {
row_above = table.rows[ row.rowIndex - 1 ];
}
if( row_above.cells[ 1 ] && row_above.cells[ 1 ].className === 'filler' ) {
row_above.removeChild( row_above.cells[ 1 ] );
}
row_above.appendChild( cell );
if( row.cells.length === 1 ) {
if( row.rowIndex < table.rows.length - 1 ) {
row.appendChild( filler.cloneNode( true ) );
} else {
table.deleteRow( table.rows.length - 1 );
update_row_numbers();
}
}
}
function moveDown() {
var cell = this.parentNode.parentNode;
var row = cell.parentNode;
var row_below;
if( row.rowIndex === table.rows.length - 1 ) {
row_below = table.insertRow( table.rows.length );
row_below.insertCell( 0 );
update_row_numbers();
} else {
row_below = table.rows[ row.rowIndex + 1 ];
}
if( row_below.cells[ 1 ] && row_below.cells[ 1 ].className === 'filler' ) {
row_below.removeChild( row_below.cells[ 1 ] );
}
row_below.appendChild( cell );
if( row.cells.length === 1 ) {
if( row.rowIndex > 1 ) {
row.appendChild( filler.cloneNode( true ) );
} else {
table.deleteRow( 1 );
update_row_numbers();
}
}
}
function update_row_numbers() {
for( var i = 1; i < table.rows.length; i++ ) {
table.rows[i].cells[0].innerHTML = i;
}
}
实时示例: http://jsfiddle.net/v9ujy/3/
编辑:已更新，以防止带有星号的行位于已排序行的开头和结尾.
Updated to prevent rows with the star from being at the beginning and end of the sorted rows.
这篇关于自定义html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
