自定义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）

回答

相关问题