Question

我试图将HTML字符串附加到

var field = '<input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value="">'
var jfield = $(field);
$('#featureContainer').append(jfield);

单击该按钮时，它将创建输入字段，但如果再次单击，则会在同一行中创建输入。如何使用输入创建一个新行？

以下是我的HTML代码

<tr>
    <td id="featureContainer"></td>
</tr>

如果我第二次单击该按钮，则会在同一行中创建它。我希望它在新行中创建它。

Answer 1

由于我们不知道tr被包裹在table或tbody内，......我们必须寻找最近的tr，然后获取然后，它的父级会向该父级添加一个新行。

所以，你应该替换它：

$('#featureContainer').append(jfield);

使用：

$('#featureContainer').closest('tr').parent().append('<tr><td>' + field + '</td></tr>');

注意：在field内你有一个静态ID，它将在你产生的所有输入上，这是错误的，因为ID是唯一的。因此，您可能希望为不同的输入分配不同的ID。

Answer 2

您只需将html代码添加到field变量中，如下所示：

var field = "<tr><td id="featureContainer"><input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value=""></td>
</tr>"
var jfield = $(field);

假设有一个包含id = 'add'的按钮和一个包含id='data'的表格，那么您可以在上面的代码后添加：

$('#add').click(function(){
    $('#data').append(jfield);
});

Answer 3

你走在正确的轨道上。但你不需要jfield。

这会在td元素中附加'field'的值：

$('#featureContainer').append(field);

但你想要的是在表格中追加。所以给你的表id（或tbody）并执行以下操作：

您需要将字段嵌入<tr><td>部分并将其作为一个整体附加。

var field = var field = '<tr><td><input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value=""></td></tr>';

然后在点击事件中：

$('#tableid').append(field);

Answer 4

首先 id在同一文档中应该是唯一的，所以最好使用公共类，然后您可以使用append()添加新行（包括{{ 1}}），请查看以下示例。

希望这有帮助。

tr/td

$('#add-row').on('click', function(){
  var field = '<input type="text" name="featureName" class="form-control" placeholder="Feature Name" value="">'

  $('table').append('<tr><td>'+field+'</td></tr>');
  
  console.log($('table tr').length+' rows');
})

Answer 5

您的代码存在的问题是您尝试使用id选择器追加到元素。由于在有效的html中应该只有一个具有唯一ID的元素，因此您将新元素始终附加到相同的 td＃featureContainer 。

我建议你将id更改为class。要选择需要附加新元素的 td.featureContainer ，可以在单击的按钮元素事件处理程序中查看并找到td.featureContainer

$(".feature").on("click", function() {

  var field = '<input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value="">'
  var jfield = $(field);
  $(this).parent().prev(".featureContainer").append(jfield);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="featureContainer"></td>
    <td>
      <input type="button" class="feature" value="click for row one">
    </td>
  </tr>
  <tr>
    <td class="featureContainer"></td>
    <td>
      <input type="button" class="feature" value="click for row two">
    </td>
  </tr>
</table>

通过javascript-jquery

5 个答案: