Question

我有一个这种形式的数组：

[ [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"] , ... ]

我希望了解如何实现这一点。我不确定下一步该做什么。

我需要帮助的是

如何使第3列可编辑（我正在考虑使用名为Jeditable的插件...）
如何从表值构建数组...

感谢您的帮助。我不确定如何命名这篇文章，如果你认为我应该把它改成更有用的东西请告诉我。致谢

Answer 1

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

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

我还建议您将数据包装成额外的标签，以便从标签中分离出来，例如在第一栏中：

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

这样您就不需要通过字符串操作从值中分离数据了。

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

Answer 2

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

jsFiddle

希望这有帮助。

Answer 3

我试图模拟一下你正在寻找的样本：

<强> 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的最后tr中，以使该列中的内容可编辑。另请注意，我最初设置这些值。设置旧值时，您也可以在input中执行此操作，以便将旧值加载到文本框中。

<强> 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

根据用户编辑的表值创建新数组

3 个答案: