Question

我是jQuery和JS的新手。所以我有这个任务使用对话框表单创建表格行。在每一行上，最后一个单元格必须包含一个按钮。我的问题是如何为此特定按钮添加ID。我尝试选择按钮并添加.attr（'id'，'delete'），但这会更改打开对话框的按钮的ID。

那么如何才能将id添加到新创建的按钮？

< script type = "text/javascript" >

  function validateForm(form) {
    var errors = [];
    $(form.elements).each(function() {
      var $this = $(this);
      if (!$this.val()) {
        var msg = $this.prev().html() + ' е задължително поле';
        errors.push(msg);
      }
    });

    return errors;
  }

function saveForm(form) {

  var nextNumber = $('table tr').length;
  var rowTpl = '<tr>' +
    '<td>' + nextNumber + '</td>' +
    '<td>' + $('#brand', form).val() + '</td>' +
    '<td>' + $('#model', form).val() + '</td>' +
    '<td>' + $('#year', form).val() + '</td>' +
    '<td>' + $('#kms', form).val() + '</td>' +
    '<td>' + '<button>' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
    '</tr>';

  $('table').append(rowTpl);
}

$(function() {
  $('#add-btn').button({
    icons: {
      primary: 'ui-icon-circle-plus'
    }
  }).on('click', function() {
    $('#form-container').dialog('open')
  });

  $('#form-container').dialog({
    autoOpen: false,
    modal: true,
    buttons: [{
      text: 'Save',
      click: function() {
        var form = $(this).find('form').get(0);
        var errors = validateForm(form);

        if (errors.length) {
          return alert(errors.join("\n"));
        }

        saveForm(form);
        form.reset();
        $(this).dialog('close');
      }
    }, {
      text: 'Close',
      click: function() {
        $(this).find('form').get(0).reset();
        $(this).dialog('close');
      }
    }]
  });
})

$('#delete').button({});

$("#delete").click(function() {
  $(this).parents('tr').first().remove();
});

< /script>

<style type="text/css"> table {
  border-collapse: collapse;
}
th {
  padding: 0.2em;
}
td {
  margin: 0.2em;
  padding: 0.2em;
  text-align: center;
  border: 1px solid grey;
}
.ui-widget-header,
.ui-widget-content {
  padding: 0.8em;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
</style>

<div id="container" class="ui-widget">
  <div class="ui-widget-header ui-helper-clearfix">
    <h3 class="float-left">ALL CARS</h3>
    <button class="float-right" id="add-btn">
      <span>Add New Address</span>
    </button>
  </div>
  <div class="ui-widget-content">
    <table width="100%">
      <tr>
        <th>#</th>
        <th>Марка</th>
        <th>Модел</th>
        <th>Година</th>
        <th>Километри</th>
        <th>Премахни</th>
      </tr>
      <tr>
        <td>1</td>
        <td>BMW</td>
        <td>i8</td>
        <td>2015</td>
        <td>10 000</td>
        <td>
          <button class="float-center" id="delete">
            <span>Delete</span>
          </button>
        </td>
      </tr>
    </table>

  </div>

  <div id="form-container" title="Add new car">
    <form action="">
      <div>
        <label for="brand">Марка</label>
        <input type="text" id="brand" />
      </div>
      <div>
        <label for="model">Модел</label>
        <input type="text" id="model" />
      </div>
      <div>
        <label for="year">Година</label>
        <input type="number" id="year" />
      </div>
      <div>
        <label for="kms">Километри</label>
        <input type="number" id="kms" />
      </div>
    </form>
  </div>
</div>

谢谢！

Answer 1

将id添加到rowTpl变量中的按钮，如下所示。

var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button id="delete'+nextNumber+'">' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
'</tr>';

它会将按钮id添加为delete1, delete2, delete3,......

Answer 2

ids是单数的，所以你不应该在多个元素上设置相同的id。第二个是您添加的onclick，该id不会附加到您运行该代码后创建的按钮。就像手机响了而你不在那里，你就不会回答了。

使用事件委派来检测单击的内容，并且可以使用“最近”来访问该按钮所在的行。

//attach the click handler to the table and listen for a click on a button
$("table").on("click", "button", function () {  
    var button = $(this);  //The button that was clicked
    var row = button.closest("tr"); //The row the button is in.
    row.remove();  //delete the row
});

Answer 3

id在整个文档中必须是唯一的，因此请将id设置为＆＃34;删除＆＃34;对于所有这些按钮是不正确的。你可以设置一个班级。在创建时，您可以将其创建为<button class='delete'>，然后使用$(".delete")查找所有按钮。

您也可以直接在代码中设置操作：

var rowTpl = '<tr>' +
  '<td>' + nextNumber + '</td>' +
  '<td>' + $('#brand', form).val() + '</td>' +
  '<td>' + $('#model', form).val() + '</td>' +
  '<td>' + $('#year', form).val() + '</td>' +
  '<td>' + $('#kms', form).val() + '</td>' +
  '<td>' + '<button onclick="$(this).closest(\'tr\').remove();">' + '<span>' + 'Delete' + '</span>' + '</button>' +
  '</td>' +
  '</tr>';

使用jQuery将id添加到特定按钮

3 个答案: