0

私はこの形式の配列を持っています:

[ [1,"item1","oldvalue1"] , [2,"item2","oldvalue2"] , [3,"item3","oldvalue3"] , ... ]

そして、私はそれを次のように表示しています：

 name  |   default_value  |  new_value 
------- ------------------ -----------
item 1 |     oldvalue1    |   oldvalue1

item 2 |     oldvalue2    |   oldvalue2

item 3 |     oldvalue3    |   oldvalue3

最初に、NEW_VALUE 列に各項目のデフォルト値を表示します (これらは元の配列の「古い」値です)。

しかし、この 3 列目のセルを編集可能にしたいと考えています。たとえば、この場合、アイテム 1 とアイテム 3 の値を編集することにしましたが、アイテム 2 は以前の古い値のままです。セルを編集すると、次のようになります。

 name  |   default_value  |  new_value 
------- ------------------ -----------
item 1 |     oldvalue1    |   newvalue1

item 2 |     oldvalue2    |   oldvalue2

item 3 |     oldvalue 3   |   newvalue3

そして、この最終テーブルから、次のような配列を取得できるようにしたいと考えています。

[ [1,"item1","newvalue1"] , [2,"item2","oldvalue2"] , [3,"item3","newvalue3"] , ... ]

これを実装する方法についていくつかのアイデアを探しています。私は次に何をすべきか確信が持てません。

私が助けを必要としているのは

  1. 3 列目を編集可能にする方法 (Jeditable というプラグインを使用することを考えていました...)
  2. テーブル値から配列を構築する方法...

ご協力いただきありがとうございます。この投稿に名前を付ける方法がわかりませんでした。より役立つ名前に変更する必要があると思われる場合は、お知らせください。ありがとう

4

3 に答える 3

1

私はあなたが探しているように聞こえるもののサンプルをモックアップしようとしました：

HTML：

<table>
   <tr>
     <td>item 1</td>
     <td>5</td>
     <td><input  size="3" value="5"></input></td>
  </tr>  
  <tr>
     <td>item 2</td>
     <td>6</td>
     <td><input  size="3" value="6"></input></td>
  </tr>
  <tr>
     <td>item 3</td>
     <td>7</td>
     <td><input size="3" value="7"></input></td>
  </tr>
</table>

<input type="button" id="CA" value="Create Array"></input>

inputその列のコンテンツを編集可能tdにするために、それぞれの最後にsが追加されました。また、最初にこれらの値を設定していることに注意してください。古い値を設定する場合は、sでも設定して、古い値がテキストボックスに読み込まれるようにすることができます。trinput

jQuery：

$(document).on("click", "#CA", function(){ //when the button is clicked
  var array = []; //array to hold the changed information
  $("tr").each(function(i){
    array.push([i, 
                $(this).children("td:eq(0)").text(), //get the text from the first td
                $(this).children("td:eq(2)").children("input").val()]); //get the value from the last td's input
  });
  console.log(array);
});

例

于 2013-01-10T21:19:50.057 に答える
1

3 番目の列を編集可能にする最も簡単な方法は、<input type="text" />フォーム フィールドです。これにより、編集可能であることも明確になります。

.each()組み合わせて使用​​できる配列を構築するには$(selector, column)(column は現在反復されている列です)、現在の列内のセレクターに一致する要素が検索されるだけです。

また、最初の列など、データをラベルから分離するために追加のタグにラップすることをお勧めします。

<td>item <span>1</span></td>

この方法では、文字列操作によって値からデータを分離する必要はありません。

参照: http://api.jquery.com/each/、http://api.jquery.com/jQuery/ ( context パラメータを見てください)

于 2013-01-10T21:10:08.497 に答える
1

data関数を使用して jQuery で作成した例をコーディングしました。

jsフィドル

お役に立てれば。

于 2013-01-10T21:10:51.337 に答える