自定义 html 表 [关闭]答案

【问题标题】：Custom html table [closed]自定义 html 表 [关闭]
【发布时间】：2011-10-19 12:28:43
【问题描述】：

我想使用 Javascript 制作一个小程序，我想制作一个包含排名表的网页，其中一些参与者可以对表进行排序，其中最重要的项目将位于表的顶部，并且通过按一些控制按钮，最不重要的项目将位于底部。

一开始，所有物品都在同一级别：

如果用户按下 item1 的向上按钮，item1 将被提升一级，其他项目将向左移动：

如果我再次按下相同的按钮，item1 将被提升一级，并且在 rank 2 之间会放置一颗星：

我不擅长 Javascript，我不知道如何实现这一点，这是我到目前为止所做的：

<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>

【问题讨论】：

你可能想看看rentacoder.com - 这基本上是要求编写一个完整的程序。您可能应该比这更进一步，以便您可以在这里提出更具体的问题。
我只想要这个想法而不是整个程序
@Reensis：链接更正：rentacoder.com 已移至 vworker.com

标签： javascript html-table

【解决方案1】：

这是你的开始。

将您的onclick 属性更改为使用.call()。这只是让您在您正在调用的函数中将this 的值设置为您传递给.call() 的第一个参数的值。（在这种情况下，是接收事件的元素。）

<input type="button" name="Up1" value="Up" onclick="moveUp.call(this);"> Item 1
<input type="button" name="Down1" value="Down" onclick="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 ];
    }
    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/

编辑：已更新以防止带有星号的行位于已排序行的开头和结尾。

【讨论】：

对不起，伙计，他们在我给你 +300 代表之前就把它关了:(
@Eng.Fouad：没关系。很高兴我能帮助你。 :)

【解决方案2】：

看看jQuery 和jQuery UI 以及所有可用的插件。您可能会在那里找到适合您需求的东西。

我正在考虑通过拖放支持上下移动您的行。

【讨论】：

jQuery 应该是一个选项，而不是一个解决方案。只是说use jQuery 并不能帮助那些刚开始并且不知道发生了什么的人。像这样的答案是为那些认为他们“知道如何用 jQuery 编写代码”并且不知道 jQuery 只是一个 javascript 工具的可怜的初学者负责的。
我希望 OP 会知道如何使用 google 并能够为自己做一些研究。我没有说“使用 jQuery”，我说的是“看看……”

【解决方案3】：

我不会给出完整的解决方案，但我会说应该询问如何将元素从一个父级移动到另一个父级，然后您可以根据需要应用按钮登录。

您可以通过使用元素 appendChild function 来实现这一点

下面的代码会将元素form2 放入表格的第一行（这是form1 元素的父元素）。

document.form1.parentElement.appendChild(document.form2)

您应该能够通过向元素添加唯一 ID 来改进逻辑，以便您可以使用 document 中的 getElementById 函数来操作它们，并且您应该考虑使用 JavaScript 框架，例如 @987654322 @ 或 Prototype 来帮助你操作 DOM 元素

【讨论】：

感谢您的回复，非常感谢 :)