Question

我有两个包含多行的列表。此外，我有一些隐藏的字段来填充列中的值。现在，我想在单击某个按钮时将隐藏字段中的值加载到表的列中。

<table>
  <tbody>
    <tr>
      <th>ACL</th>
      <td></td>
      <input id="field0" type="hidden" value="Access Control List"/>
    </tr>
    <tr>
      <th>Bcc</th>
      <td></td>
      <input id="field1" type="hidden" value="Blind Carbon Copy"/>
    </tr>
    ......
  </tbody>
</table>

实现这个的简单方法是什么？

Answer 1

如果您为表格提供了ID，并且想要将所有输入移动到相邻的td中：

$("#<your_button_id>").click(function() {
    $("#<your_table_id> td").each(function() {
        $(this).html($(this).siblings("input").val());
    });
});

Answer 2

您不需要在文本框中保存值，您可以将值保存在html属性中：data-value

试试这种方式

<table>
  <tbody>
    <tr>
      <th>ACL</th>
      <td data-value="Access Control List">
          <button class="show-value">Show Value</button>             
      </td>
    </tr>
    <tr>
      <th>Bcc</th>
      <td data-value="Blind Carbon Copy">
          <button class="show-value">Show Value</button>
      </td>
    </tr>
  </tbody>
</table>

<强> JAVASCRIPT

$(document).ready(function(){
  $(".show-value").click(function(){
    var theValue = $(this).parent('td').attr('data-value');
    $(this).parent('td').html(theValue);
  });
});

Answer 3

如果您指的是input元素旁边的td，那么解决方法就是这样。我使用next()来引用下一个，但如果它是相同级别但可以使用siblings，则可以使用parent()。

如果输入位于较低级别，您还可以使用find()或$(document).ready(function(){ $("#mybutton").click(function() { $("#mytable td").each(function() { $(this).html($(this).next("input").val()); }); }); });遍历DOM。

参见工作示例：http://jsfiddle.net/3qw09a0p/

{{1}}

使用文档就绪方法确保您的内容已加载。

Answer 4

虽然已经有足够的答案，但只是为了添加我的方法：

$("input[type='button']").click(function()
{
  $("input[type='hidden']").each(function()
  {
   $(this).parents("tr").find("td").text($(this).val());
  });     
});

无需ID，只需<input type="button" value="Click"/>之类的按钮它也适用于您在问题中提供的表，其中输入未包含在列中，我建议使用有效的HTML。猜猜你忘记了，如你所说，你会有一个2列表;）

使用jQuery动态添加列内容

4 个答案: