自定義html表格（javascript）

-2

我想製作一個使用javascript的小程序，我想製作一個網頁，其中包含一個排名表，其中一些參與者可以對最重要的項目將在通過按下一些控制按鈕，表格頂部和最不重要的項目將位於底部。自定義html表格（javascript）

在開始時，所有項目將在同一水平：

enter image description here

如果物品1的用戶請按向上鍵，物品1將提升一個級別和其他項目將轉移到左側：

enter image description here

如果我再次按下同一按鈕，物品1將提升一個級別，而恆星會之間的等級2被放置在：

enter image description here

我不擅長的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>

來源

2011-08-03 Eng.Fouad

你可能想看看[rentacoder.com]（http://rentacoder.com） - 這基本上是要求寫一個完整的程序。你可能應該比這更進一步，所以你可以在這裏提出更具體的問題。 – Nicole

我只是想這個想法不是整個程序 –

@Renesis：鏈接更正：rentacoder.com已經轉移到vworker.com –

這是你的開始。

將您的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/

編輯：更新，以防止行機智h從正在排序行的開頭和結尾開始。

來源

2011-08-05 04:00:08 user113716

對不起隊友，他們關閉它之前，我給你+300代表:( –

@ Eng.Fouad：很好，很高興能幫到你:) – user113716

在jQuery和jQuery UI和所有看看可用的插件。你可能會在那裏找到適合你需求的東西。

我正在考慮拖拽支持的行來上下移動你的行。

來源

2011-08-03 22:21:48

'jQuery'應該是一個選項，而不是一個解決方案。只是說「使用jQuery」並不能幫助那些開始並且不知道發生了什麼的人。像這樣的解決方案對那些認爲自己「知道如何在jQuery中編寫代碼」的初學者負責，並且不知道jQuery只是一個JavaScript工具。 –

我本來希望OP會知道如何使用谷歌，並能夠爲自己做一點研究。我沒有說「使用jQuery」，我說「拿一個loook在...」 –

我不會給出完整的解決方案，但我會說，應該問如何將一個元素從一個父元素移動到另一個父元素，然後您可以根據需要應用按鈕登錄。

您可以通過使用一個元素appendChild function

代碼波紋管會的元素form2置於表格的第一行（這是form1元素的父元素）實現這一目標。

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

你應該能夠加入了獨特的ID來你的元素，以提高邏輯，這樣你可以通過使用getElementById功能從document操縱它們，你也應該考慮使用JavaScript框架，如jQuery或Prototype來幫助你操作DOM元素

來源

2011-08-03 22:25:07

謝謝你的relpy，我很感激它:) –

自定義html表格（javascript）

回答

相關問題