时间戳

首页 > 解决方案 > jQuery 使用 ajax 输入创建表 - 我希望一列能够让用户更改内容

jquery - jQuery 使用 ajax 输入创建表 - 我希望一列能够让用户更改内容

问题描述

我有一个使用 ajax 输入的 jQuery 创建的表。我希望表中的一列允许更新。该表正在创建和填充；但是，“item.hmpOrder”列无法更新/更改（该列不接受数据）。

代码是：

   $.each(responseJson1a, function(i, item) {
        $('<tr>').append(
            $('<td>').text(item.hmpId),
            $('<td>').text(item.hrId),
            $('<td>').text(item.hmId),
            $('<td>').text(item.hmName),
            $('<td><input type="text"/>').text(item.hmpOrder)
        ).appendTo('#selectedListTable');
    });

标签： jqueryajax

解决方案

问题在于这一行：

$('<td><input type="text"/>').text(item.hmpOrder)

您正在尝试一次创建两个元素，这在您尝试的方式中是不可能的。

要解决此问题，请在单独的操作中创建第一个，td然后创建它，如下所示：append()input

var responseJson1a = [{
  hmpId: 'hmpId01',
  hrId: 'hrId01',
  hmId: 'hmId01',
  hmName: 'hmName01',
  hmpOrder: 'hmpOrder01',
},{
  hmpId: 'hmpId02',
  hrId: 'hrId02',
  hmId: 'hmId02',
  hmName: 'hmName02',
  hmpOrder: 'hmpOrder02',
}];

$.each(responseJson1a, function(i, item) {
  $('<tr>').append(
    $('<td>').text(item.hmpId),
    $('<td>').text(item.hrId),
    $('<td>').text(item.hmId),
    $('<td>').text(item.hmName),
    $('<td>').text(item.hmpOrder).append('<input type="text" />'),
  ).appendTo('#selectedListTable');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="selectedListTable"></table>

推荐阅读