自定义html表格（javascript） [英] Custom html table (javascript)
问题描述
我想制作一个使用javascript的小程序，我想制作一个由排名表组成的网页，其中一些参与者可以对最重要的项目放在表格顶部的表格进行排序，最重要的项目将通过按下一些控制按钮在底部。
在开始时，所有项目将在同一级别：
如果用户按下item1的向上按钮，则item1将升高一级，其他项目将向左移动：
如果我再次按下相同按钮，则会将item1提升一个升级并在2级之间放置一颗星：
我不擅长javascript，我有n o想法如何实现这一点，这是我到目前为止所做的：
< HEAD>
< SCRIPT LANGUAGE =JavaScript>
<！ - 开始
函数moveUp（）
{
}
函数moveDown（）
{
}
//结束 - >
< / script>
< / HEAD>
< BODY>
< table border =1>
< tr>
排名
< / th>
< th colspan =5>
< p align =center>准则
< / th>
< / tr>
< tr>
< td>
< p align =center> 1
< / td>
< td>
< form name =form1method =poststyle =margin：0; text-align：center;>
< input type =buttonname =Up1value =Uponclick =moveUp（）;>项目1
< input type =buttonname =Down1value =Downonclick =moveDown（）;>
< / form>
< / td>
< td>
< form name =form2method =poststyle =margin：0; text-align：center;>
< input type =buttonname =Up2value =Uponclick =moveUp（）;>项目2
< input type =buttonname =Down2value =Downonclick =moveDown（）;>
< / form>
< / td>
< td>
< form name =form3method =poststyle =margin：0; text-align：center;>
< input type =buttonname =Up3value =Uponclick =moveUp（）;>项目3
< input type =buttonname =Down3value =Downonclick =moveDown（）;>
< / form>
< / td>
< td>
< form name =form4method =poststyle =margin：0; text-align：center;>
< input type =buttonname =Up4value =Uponclick =moveUp（）;>项目4
< input type =buttonname =Down4value =Downonclick =moveDown（）;>
< / form>
< / td>
< td>
< input type =buttonname =Up5value =Uponclick =moveUp（）;>项目5
< input type =buttonname =Down5value =Downonclick =moveDown（）;>
< / form>
< / td>
< / tr>
< / table>
< / body>
< / html>
这是一个适合你的开始。
更改 onclick 属性以使用 .call（）。这只允许您将您调用的函数中的 this 的值设置为您传递给 .call（）的第一个参数的值。 （在这种情况下，接收事件的元素）。
< input type =buttonname =Up1 value =Uponclick =moveUp.call（this）;>第1项
< input type =buttonname =Down1value =Downonclick =moveDown.call（this）;>
然后这些函数应该给出它如何工作的基本概念。大概可以使用一些调整，比如创建它，这样你就不会添加比你正在排序的单元格多的行。
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]; （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]; （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（）;
$ / code $ / pre
function update_row_numbers（）{
for（var i = 1; i< table.rows.length; i ++）{
table.rows [i]。 cells [0] .innerHTML = i;
}
}
现场示例： < a href =http://jsfiddle.net/v9ujy/3/ =nofollow> http://jsfiddle.net/v9ujy/3/
编辑：已更新，以防止星星排在已排序行的开始和结束处。
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 begining, all the items will at same level:
If the user press Up button of item1, item1 will be raised up one level and the other items will shift to the left:
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:
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>
解决方案 Here's a start for you.
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;
}
}
Live example: http://jsfiddle.net/v9ujy/3/
EDIT: Updated to prevent rows with the star from being at the beginning and end of the sorted rows.
这篇关于自定义html表格（javascript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
