gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:46:53 27 4
gpt4 key购买 nike

我是 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>

谢谢!

最佳答案

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>';

它将添加按钮iddelete1,delete2,delete3,......

关于javascript - 使用 jQuery 将 id 添加到特定按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35160382/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com