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

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,......