創建基於用戶編輯表中的新數組值

我有這種形式的數組：創建基於用戶編輯表中的新數組值

[ [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列來顯示每個項目的默認值（這些是原始數組中的「舊」值）。

但我希望這第三列中的單元格是可編輯的。例如，在這種情況下，我選擇編輯項目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"] , ... ]

我期待的一些想法如何實現這一點。我不確定接下來應該做什麼。

我需要幫助是

如何使第3列編輯（我在考慮使用一種叫做Jeditable插件...）
如何建立從表中的值數組..

感謝您的幫助。我不確定如何命名這篇文章，如果你認爲我應該將它改爲更有用的東西，請告訴我。感謝

來源

2013-01-10 murielg

這是因爲到目前爲止，我只顯示一個表......我只是想在我將如何完成這件事，不是代碼行的總體思路按行... – murielg

對於＃1和＃2，我們都需要你的表結構和你已經嘗試過的。 –

＃2是相對容易的事情，您只需選擇所有行並在其中循環，從行的單元格中生成數據數組。沒有很多猜測在那裏工作。另一方面＃1取決於數據是什麼以及如何編輯它。 –

我編碼使用data功能與jQuery做出了表率：

jsFiddle

希望這有助於。

來源

2013-01-10 21:10:51 lante

你的回答看起來不錯。感謝您的時間，我很高興我有一個很好的答案:) – murielg

使第三列可編輯的最簡單的方法將是<input type="text" />表單字段，這也將表明它是可編輯的。

要構建數組，您可以使用.each()結合$(selector, column)（列是當前迭代的列），因此只搜索與當前列內的選擇器匹配的元素。

我還你會推薦給你的數據包進入加標籤從標籤單獨它，例如在第一列：

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

這樣你就不需要從價值單獨的數據通過字符串操作。

參見：http://api.jquery.com/each/，http://api.jquery.com/jQuery/（看看上下文參數）

來源

2013-01-10 21:10:08 Lazzaro

謝謝您的時間和答案。感謝我從本網站獲得的任何幫助。我給了這個鏡頭，我只是需要一些提示開始。 – murielg

我試過的這聽起來像你模擬了一個樣本正在尋找：

HTML：在每個最後td添加

<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小號tr以使該列中的內容可編輯。另請注意，我最初設定這些值。當您設置舊值時，您也可以在input s中這樣做，以便將舊值加載到文本框中。

的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); 
});

EXAMPLE

來源

2013-01-10 21:19:50 Chase

創建基於用戶編輯表中的新數組值

回答

相關問題