jquery - 创建元素并设置属性

Question

我是 jquery 的新手，我试图在单击按钮时创建元素并为其设置属性。到目前为止，这是我的代码

$('#myTable').append(
  $('<tr>').append(
    $('<td>').append(
      $('<input>', {type: 'text', id: 'id'}).append(
        $('<td>').append(
          $('<input>', {type: 'button', id: 'btnAdd', onclick: 'AddRow()',value: 'addrow'})
        )
      )
    )
  )
);

我知道这是错误的，所以我需要你的帮助来解决它。

我想输出的是：

<tr>
  <td><input type="text" id="id"></td>
  <td><input type="button" id="btnAdd" onclick="AddRow()" value="addrow"></td>
</tr>

Answer 1

你可以简单地写

$('#myTable').append('<tr><td><input type="text" id="id"></td><td><input type="button" id="btnAdd" onclick="AddRow()" value="addrow"></td></tr>');

Answer 2

使用 jQuery.attr 函数设置元素的 html 属性：

编辑：还有一个逻辑错误。

$('#myTable').append(
  $('<tr>').append(
    $('<td>').append(
      $('<input>' )
      .attr( {type: 'text', id: 'id'} )
    )
  )
  .append(
    $('<td>').append(
      $('<input>' )
      .attr( {type: 'button', id: 'btnAdd', onclick: 'AddRow()',value: 'addrow'} )
    )
  )
);

另见：http ://api.jquery.com/attr/

Answer 3

$(document).ready(function() {
var html_obj = '<tr>';
html_obj += '<td> <input type="text" id="id" value=""/> </td>';
html_obj += '<td> <input type="button" id="btnAdd" onclick="AddRow()" 
                value="addrow" /> </td>';
html_obj += '</tr>';               
$('#myTable').append(html_obj);
});

<table id="myTable">            
</table>

如果你有一个空表，你可以使用 $('#myTable tr:last').after(html_obj)。这会给你一个完美的结构。希望这会奏效。