jqueryテーブルの入力フィールドの値を読み取る

プレースメントの作成、削除、編集が可能なプレース管理システムを作成しました。これは、すべての行にplacename編集ボタンと削除ボタンがあるテーブルです。テーブルの最後に「新しい場所を作成」ボタンがあります。ここで「新しい場所を作成」ボタンをクリックすると、新しい名前を書き込んで操作をキャンセルして操作を保存できる新しい生成された行が表示されます。jqueryテーブルの入力フィールドの値を読み取る

生成されたコンテンツを削除し、名前を付けて新しい行を作成し、セルを編集して削除する操作を保存することがわかります。私の問題は、それは1つの行でのみ動作しますが、私は操作で2つの名前を持っている場合は、jquery doesntは、それを保存するために私がクリックした行を知っていません。

例：

生成された行1 =スペイン

生成された行2 =ブラジルROW2で

[OK]をクリックしては、jQueryのによって除去ROW2、ROW1の名前が間違っ= placetableで生成されました！ここで

すべてのコード

<head> 
    <script src="../jquery.js" type="text/javascript"></script> 

$(document).ready(function() { 
    $(".edit").click(function() { 
    var id = $(this).attr("id"); 
    alert("edit "+id); 
    }); 
    $(".delete").click(function() { 
    var id = $(this).attr("id"); 
    alert("delete "+id); 
    }); 
    $("#newbutton").click(function() { 
    $("tr:last").after("<tr><td><input style='width: 80%' /></td><td class=ok>OK</td><td class=cancel>Cancel</td></tr>").ready(function() { 
     $(".cancel").live("click", function() { 
     $(this).parent().remove(); 
     }); 
     $(".ok").click(function() { 
     var name = $(this).val(); 
     $(this).parent().remove(); 
     $("tr .edit:last").after("<tr><td>"+name+"</td><td class=edit>edit</td><td class=delete>delete</td></tr>"); 
     }); 
    }); 
    }) 
}); 
    </script> 
</head> 
<table border=1 id=table> 
<tr><th>Name</th></tr> 
<tr><td>Bombai</td><td id=1 class=edit>edit</td><td id=1 class=delete>delete</td></tr> 
<tr><td>London</td><td id=2 class=edit>edit</td><td id=2 class=delete>delete</td></tr> 
<tr><td>Rom</td><td id=3 class=edit>edit</td><td id=3 class=delete>delete</td></tr> 
</table><label id=newbutton>New Place</label>

出典

2009-06-05 elhombre

これはテストされ、機能している...

あなたのjqueryのロジックは、一種のオフでした。これがあなたに少しわかりやすくなることを願っています。;-)

<script type="text/javascript" language="javascript"> 

$(function() { 
    $(".edit").live('click',function() { 
    var item = $(this).attr("rel"); 
    alert("edit "+item); 
    return false; 
    }); 
    $(".delete").live('click',function() { 
    var item = $(this).attr("item"); 
    alert("delete "+id); 
    return false; 
    }); 
    $(".cancel").live("click", function() { 
    $(this).parent().remove(); 
    return false; 
    }); 
    $(".ok").live('click',function() {      
    var name = $(this).parent().siblings().find('input[type="text"]').val(); 
    $(this).parent().parent().remove(); 
    $("tr:last").after("<tr><td>"+name+"</td><td><a href='#' class='edit'>edit</a></td><td><a href='#' class='delete'>delete</a></td></tr>"); 
    return false; 
    }); 
    $("#newbutton").click(function() { 
    $("tr:last").after("<tr><td><input type='text' style='width: 80%' /></td><td><input type='button' class='ok' value='OK' /></td><td><input type='button' class='cancel' value='Cancel' /></td></tr>") 
    }) 
}); 
</script> 
</head> 
<body> 
<table border="1" id="table"> 
    <tr><th>Name</th></tr> 
    <tr> 
     <td>Bombai</td> 
     <td rel="1"><a href="#" class="edit">edit</a></td> 
     <td rel="1"><a href="#" class="delete">delete</a></td> 
    </tr> 
    <tr> 
     <td>London</td> 
     <td rel="2"><a href="#" class="edit">edit</a></td> 
     <td rel="2"><a href="#" class="delete">delete</a></td> 
    </tr> 
    <tr> 
     <td>Rom</td> 
     <td rel="3"><a href="#" class="edit">edit</a></td> 
     <td rel="3"><a href="#" class="delete">delete</a></td> 
    </tr> 
</table> 
<button id="newbutton">Add New Place</button>

出典

2009-06-05 18:29:46 KyleFarris

私は完全な解決策を手伝ってくれてありがとう、私は非常に感謝します！スクリプトで3つの新しい行を作成しましたが、[OK]をクリックすると、テーブルの最後に表示されます。編集可能な行の最後に表示させる方法はありません。 $（ "tr：last"）を$（ "tr .edit：last"）に変更しようとしましたが、OKをクリックすると行が表示されませんでした:(おそらくこの問題の解決策がありますか？ – elhombre

まず、ID - ページ内で一意である必要があります！
行をどのように編集していますか？そのようなコードはここにありません。あなたもそれを追加できますか？
小さなヒントでは、編集クリック時にいくつかのクラス（ '編集'）で選択行にマークを付けることができます（ただし、このクラスを他の行から削除する前に）。これは編集状態にある行を見つけるのに役立ちます。

EDIT：また、既存のプラグインのいずれかを使用できます。

* Flexigrid: http://flexigrid.info/ 
* jQuery Grid: http://www.trirand.com/blog/ 
* jqGridView: http://plugins.jquery.com/project/jqGridView 
* Ingrid: http://reconstrukt.com/ingrid/

のjQueryグリッド（上記＃2）編集可能なセルをサポートし、ウェブサイト上で非常に良いドキュメントとサンプルを持っています。私は最初にそれを見ておくことをお勧めします。

出典

2009-06-05 10:55:30 zihotki

私はまだ編集と削除の部分を作っていません。私がplacetableに正しく保存された新しい場所を作成することができたら、私はこの仕事に行きます。 – elhombre

この機能をすべて提供する既存のjQueryプラグインを使用するのはどうですか？答えの更新をチェックしてください。 – zihotki

私はよく構造化されたプラグインのリストを与えてくれてありがとう、私はそれらをチェックするつもりです！プラグインなしで問題が回避できない場合は、これを考慮に入れます。彼らはあなたが非常に多くの仕事を取り除くのを助けることができると知っていますが、できるだけプラグインを使用しないようにして、他の人がプラグインの新しい構文を習得したり、） – elhombre

ここにはいくつかの問題があります。

最初はIDです。これらは、特にあなたのjavascriptの参照としてそれらを使用する場合、ユニークである必要があります。あなたの生成された行にはIDが含まれていないので、それらを完全に削除します。あなたが本当にそれらをしたい場合は、それらを区別する "id = 'delete_1'"のようなものを書くことができます。

第2に、クリックコールバック関数内でライブコールバックバインディング関数を使用しています。つまり、「新規」ボタンをクリックするたびに、コールバックを再びバインドしようとします。私はこの方法で副作用があることを100％確信しているわけではありませんが、 '生きている'という理由は生成されたHTMLに自動的にコールバックをバインドするので、手動で行う必要はありません。

".cancel"と ".ok"クリックバインディング呼び出しをその1つの機能の外に移動することをお勧めします。ライブを使用して ".ok"クリックコールバックをバインドします。これらの変更を行った後、あなたの問題に役立つかもしれません。

困ったときは、firebugを使ってjqueryが保存時に間違った行を参照している理由を理解してください。

出典

2009-06-05 17:56:30 Rhinosaurus

jqueryテーブルの入力フィールドの値を読み取る

答えて

関連する問題