$(function(){ $('.edit').click(function(e){ e.preventDefault(); $('#edit').modal('show'); var id = $(this).data('id'); getRow(id); }); $('.delete').click(function(e){ e.preventDefault(); $('#delete').modal('show'); var id = $(this).data('id'); getRow(id); }); }); function getRow(id){ $.ajax({ type: 'POST', url: 'attendance_row.php', data: {id:id}, dataType: 'json', success: function(response){ $('#datepicker_edit').val(response.Date); $('#attendance_date').html(response.Date); $('#edit_time_in').val(response.time_in); $('#edit_time_out').val(response.time_out); $('#attid').val(response.attid); $('#employee_name').html(response.firstname+' '+response.lastname); $('#del_attid').val(response.attid); $('#del_employee_name').html(response.firstname+' '+response.lastname); } }); }含义
时间: 2024-01-25 10:05:09 浏览: 33
这段代码是一个 jQuery 代码,它定义了一个名为 getRow 的函数,并在文档加载完成后为 class 为 edit 和 class 为 delete 的元素添加了点击事件处理函数。当点击 class 为 edit 的元素时,它会弹出一个 id 为 edit 的模态框,并调用 getRow 函数获取该元素的 data-id 属性值,并根据该值发起一个 Ajax 请求,将从服务器响应中获取的数据填充到模态框中的各个元素中。当点击 class 为 delete 的元素时,它会弹出一个 id 为 delete 的模态框,并调用 getRow 函数获取该元素的 data-id 属性值,并根据该值发起一个 Ajax 请求,将从服务器响应中获取的数据填充到模态框中的各个元素中。
具体地,当点击 class 为 edit 或 class 为 delete 的元素时,阻止默认事件的发生(即不会跳转到 href 属性指定的链接),弹出对应的模态框,并获取该元素的 data-id 属性值,传入 getRow 函数中。在 getRow 函数中,发起一个 POST 请求到 'attendance_row.php' 页面,并传入一个名为 id 的参数,其值为传入该函数的 id 参数。请求成功后,将从服务器响应中获取的数据填充到模态框中的各个元素中。
总体来说,这段代码的作用是为 class 为 edit 和 class 为 delete 的元素添加点击事件处理函数,当点击时弹出对应的模态框,并根据传入的 id 参数从服务器获取数据并填充到模态框中的各个元素中。
相关问题
$(function(){ $('.edit').click(function(e){ e.preventDefault(); $('#edit').modal('show'); var id = $(this).data('id'); getRow(id); });含义
这段代码是一个 jQuery 代码,它的作用是当点击 class 为 edit 的元素时,弹出一个模态框(modal),并获取该元素的 data-id 属性值,同时调用 getRow 函数并传入该 id 参数。
具体地,它是在 DOM 加载完成后执行的,通过选择器找到所有 class 为 edit 的元素,为它们添加点击事件处理函数。在点击时,阻止默认事件的发生(即不会跳转到 href 属性指定的链接),弹出 id 为 edit 的模态框,并获取该元素的 data-id 属性值,传入 getRow 函数中。这个函数的实现并没有给出,可能是用来根据 id 获取对应的数据并填充到模态框中。
增加一个编辑功能$(function () { let id = 2; $("#add-button").click(function () { console.log("-----"); $("#add-form").removeClass("hidden") $("#add-form").addClass('visible') }) $("#cancel-button").click(function () { clear() $("#add-form").removeClass("visible") $("#add-form").addClass('hidden') }) $("#save-button").click(function (e) { e.preventDefault() let name = $("#name-input").val() // .val() 等价于 .value let price = $("#price-input").val() id++ $("tbody").append(` <tr> <td>${id}</td> <td>${name}</td> <td>${price}</td> <td> <button class="edit-button">编辑</button> <button class="delete-button">删除</button> </td> </tr> `) clear() $("#add-form").removeClass("visible") $("#add-form").addClass('hidden') }) $('tbody').on("click", '.delete-button', function () { console.log("===", $(this)); $(this).closest('tr').remove() }) function clear() { $("#name-input").val("") $("#price-input").val("") } })
这个代码片段增加了一个编辑功能。具体来说,当点击编辑按钮时,可以将相应的行的数据填充到表单中,用户可以进行修改。当点击保存按钮时,修改后的数据会替换原有数据。
以下是修改后的代码:
```
$(function () {
let id = 2;
$("#add-button").click(function () {
console.log("-----");
$("#add-form").removeClass("hidden");
$("#add-form").addClass('visible');
});
$("#cancel-button").click(function () {
clear();
$("#add-form").removeClass("visible");
$("#add-form").addClass('hidden');
});
$("#save-button").click(function (e) {
e.preventDefault();
let name = $("#name-input").val();
let price = $("#price-input").val();
if ($("#save-button").data("mode") === "edit") {
let row = $("#save-button").data("row");
row.children().eq(1).text(name);
row.children().eq(2).text(price);
$("#save-button").data("mode", "add");
$("#save-button").text("添加");
} else {
id++;
$("tbody").append(`
<tr>
<td>${id}</td>
<td>${name}</td>
<td>${price}</td>
<td>
<button class="edit-button">编辑</button>
<button class="delete-button">删除</button>
</td>
</tr>
`);
}
clear();
$("#add-form").removeClass("visible");
$("#add-form").addClass('hidden');
});
$('tbody').on("click", '.delete-button', function () {
$(this).closest('tr').remove();
});
$('tbody').on("click", '.edit-button', function () {
let row = $(this).closest("tr");
let name = row.children().eq(1).text();
let price = row.children().eq(2).text();
$("#name-input").val(name);
$("#price-input").val(price);
$("#save-button").data("mode", "edit");
$("#save-button").data("row", row);
$("#save-button").text("保存");
});
function clear() {
$("#name-input").val("");
$("#price-input").val("");
}
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)