カスタムhtmlテーブル（javascript）

-2

私はJavaScriptを使用して小さなプログラムを作りたいと思っています。私はランキングテーブルで構成されたWebページを作っています。テーブルの最上部にあり、最も重要でないアイテムは、いくつかのコントロールボタンを押すことによって下部に表示されます。カスタムhtmlテーブル（javascript）

初めでは、すべてのアイテムが同じレベルになります。

enter image description here

ITEM1のユーザープレスアップボタン、ITEM1が1つ上のレベルに引き上げられます場合は、その他の項目が左にシフトします：

enter image description here

私はもう一度同じボタンを押すと、ITEM1が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/

EDIT：行のウィットを防ぐために更新しましたスターがソートされた行の始めと終わりにない

出典

2011-08-05 04:00:08 user113716

申し訳ありません仲間は、私はあなたに300の担当者を与える前にそれを閉じた:(私は "使用jQuery"と言っていない –

@ Eng.Fouad：大丈夫です。私が助けてくれてうれしいです:) – user113716

はjQueryとjQuery UIを見て、すべての利用可能なプラグイン。あなたのニーズに合ったものが見つかるかもしれません。

私はあなたの行を上下に移動するdrag'n'dropサポートのラインに沿って考えています。

出典

2011-08-03 22:21:48

'jQuery'はオプションで解決策ではありません。単に 'use jQuery'と言っても、何が起きているのか分かりません。このような回答は、「jQueryでコードを作成する方法を知っている」と思う貧弱な初心者のためのものであり、jQueryが単なるjavascriptツールであるとは考えていません。 –

私はOPがgoogleの使い方を知り、自分自身で少し研究をすることができると期待していただろう。 –

私は完全な解決策を提示するつもりはありませんが、代わりに親から別の要素に要素を移動する方法を尋ねたはずです。そして、あなたは望むようにボタンログインを適用できます。

あなたは（form1要素の親要素である）あなたのテーブルの最初の行に要素form2を配置します要素にappendChild function

コード怒鳴るを使用してそれを達成することができます。

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

あなたはdocumentからgetElementById機能を使って、それらを操作することができ、また、あなたはjavascriptのフレームワークを使用することを検討すべきであるように、あなたの要素に固有のIDを追加することにより、ロジックを改善することができるはずなどjQueryかPrototype DOM要素の操作に役立ちます

出典

2011-08-03 22:25:07

あなたのrelpyに感謝します。私はそれを感謝します:) –

カスタムhtmlテーブル（javascript）

答えて

関連する問題