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 列显示每个项目的默认值（这些是原始数组中的“旧”值）。

但我希望这第三列中的单元格是可编辑的。例如，在本例中，我选择编辑第 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. 如何使第三列可编辑（我正在考虑使用一个名为 Jeditable 的插件......）
  2. 如何从表值构建数组...

谢谢你的帮助。我不确定如何命名这篇文章，如果您认为我应该将其更改为更有帮助的内容，请告诉我。谢谢

4

3 回答 3

1

使第三列可编辑的最简单方法是<input type="text" />表单字段，这也表明它是可编辑的。

要构建数组，您可以.each()结合使用$(selector, column)（列是您当前迭代的列），因此只需搜索与当前列内的选择器匹配的元素。

我还建议您将数据包装到额外的标签中以将其与标签分开，例如在第一列中：

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

这样您就不需要通过字符串操作将数据与值分开。

另请参阅：http ://api.jquery.com/each/、http : //api.jquery.com/jQuery/（查看上下文参数）

于 2013-01-10T21:10:08.497 回答
1

我使用以下函数编写了一个使用 jQuery 制作的示例data：

jsFiddle

希望这可以帮助。

于 2013-01-10T21:10:51.337 回答
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>

inputs 被添加到td每个列的最后，tr以使该列中的内容可编辑。另请注意，我最初设置这些值。当您设置旧值时，您也可以在inputs 中这样做，以便将旧值加载到文本框中。

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 回答