<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="icon" href="{% static 'publicStatic/images/favicon.ico' %}">
<link rel="stylesheet" href="{% static "css/font-awesome.min.css" %}">
{#<link href="{% static "boots
trap/css/boots
trap.css" %}" rel="stylesheet" type="text/css">#}
<!-- boots
trap-theme.css 需要屏蔽掉，否则和boots
trap.css冲突，造成 下拉菜单悬浮 的子菜单项背景色不起作用 -->
<link href="{% static "boots
trap/css/boots
trap-theme.css" %}" rel="stylesheet" type="text/css">
{# <link href="https://cdn.jsdelivr.net/npm/boots
trap@5.3.3/dist/css/boots
trap.min.css" rel="stylesheet">#}
<link rel="stylesheet" href="{% static "boots
trap/css/boots
trap.min.css" %}" type="text/css" >
<script src="{% static "boots
trap/jquery-1.9.1.js" %}"></script>
<script src="{% static "boots
trap/js/boots
trap.js" %}"></script>
<!--20250928添加boots
trap.bundle.min.js，否则当鼠标悬停在‘项目管理’下面的二级菜单，不会
显示二级菜单下的三件菜单 另外，这里添加之后，打开网页必须进行 c
tr+F5 刷新一次页面才可以，否则无效果-->
<script src="{% static "sweetalert/sweetalert.min.js" %}" ></script>
<link rel="stylesheet" href="{% static "sweetalert/sweetalert.min.css" %}" >
<script src="{% static "boots
trap/js/boots
trap.bundle.min.js" %}"></script>
<script type="text/javascript" src="{%static 'datepicker/js/boots
trap-datepicker.js' %}" ></script>
<link rel="stylesheet" type="text/css" href="{% static 'datepicker/css/datepicker.css' %}">
</head>
<body>
<!-- 工单表格 -->
<table class="table table-hover" name="processedorder" id="processedorder">
<thead>
<
tr>
<th>序号</th>
<th>工作令号</th>
<th>名称</th>
<th>图号</th>
<th>数量</th>
<th>要求完成时间</th>
<th>图纸数量</th>
<th>整件号</th>
</
tr>
</thead>
<tbody>
<!-- 动态生成的行将在这里添加 -->
</tbody>
</table>
<!-- 设备表格 -->
<P class="text-center"><b>使用设备</b></P>
<table class="table table-bordered table-hover text-center" name="device" id="device">
<thead>
<
tr>
<th>设备ID</th>
<th>设备名称</th>
<th>序列号</th>
<th>开始时间</th>
<th>截止时间</th>
<th>操作</th>
</
tr>
</thead>
<tbody>
<!-- 设备行将在这里添加 -->
</tbody>
</table>
<!-- 控制按钮 -->
<button id="button_processedorder">添加工单行</button>
<button id="button_device">选择设备</button>
<button id="button_save">保存工单</button>
<!-- 设备选择模态框 -->
<div id="device_modal" class="modal fade" style="
display: none;">
<!-- 模态框内容 -->
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">仪器一览表</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<table id="device_table">
<!-- 设备数据将在这里动态加载 -->
</table>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary close" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
function safeInitDatepicker(element) {
const dateS
tr = element.text().
trim();
if (!dateS
tr) {
element.text(new Date().toISOS
tring().split('T')[0]);
} else if (!/^\d{4}-\d{2}-\d{2}$/.test(dateS
tr)) {
element.text(new Date(dateS
tr).toISOS
tring().split('T')[0]);
}
element.datepicker({
format: 'yyyy-mm-dd',
autoclose:
true,
startDate: new Date()
});
}
// 假设模态框的 ID 是 deviceModal
$('table#processedorder td').at
tr('contenteditable',
true);
$('table#device td').at
tr('contenteditable',
true);
<!--解决模态点击关闭，无法关闭的
问题-->
$('.close').click(function() {
$('#device_modal').modal('hide');
});
// 选择设备按钮
$('#button_device').click(function() {
$.get('/project/get_devices/', function(response) {
let html = '';
{#alert('11111111111111');#}
if (response && response.devices) { // 添加空值检查
$.each(response.devices, function(i, device) {
html += `<
tr>
<td>${device.id}</td>
<td>${device.name}</td>
<td>${device.serial}</td>
<td><button class="select-device" data-id="${device.id}">选择</button></td>
</
tr>`;
});
{#alert(html)#}
$('#device_table').html(html);
$('#device_modal').modal('show');
{#alert('33333333333');#}
} else {
console.error('设备数据格式错误:', response);
}
});
// 设备选择
事件
$(document).on('click', '.select-device', function(event) {
event.preventDefault();
let selectedDevice = $(this).data('id').toS
tring();
{#alert(selectedDevice)#}
let exists = false;
$('#device tbody
tr').each(function () {
if ($(this).find('td:first').text() === selectedDevice) {
exists =
true;
alert('有重复，请选择其它')
return false; // 停止遍历
}
});
{#alert(exists)#}
const deviceId = $(this).data('id');
$.get(`/project/get_device_details/${deviceId}/`, function(device) {
if (!exists) {
$('#device tbody').append(`
<
tr data-id="${device.id}">
<td>${device.id}</td>
<td>${device.name}</td>
<td>${device.serial}</td>
<td class="datepicker" >${device.current_date}</td>
<td class="datepicker" >${device.current_date}</td>
<td><button class="delete-item" >删除</button></td>
</
tr>
`);
}
$(this).closest('
tr').remove();
<!--必须要有下面这条指令，否则不能编辑-->
// 设置倒数第一列和倒数第二列可编辑
// 为新添加的行设置可编辑和绑定 datepicker
$('#device tbody
tr:last').find('td').eq(-2).at
tr('contenteditable',
true); // 倒数第一列
$('#device tbody
tr:last').find('td').eq(-3).at
tr('contenteditable',
true); // 倒数第二列
// 绑定删除
事件（使用
事件委托）
$('#device tbody
tr').on('click', '.delete-item', function() {
$(this).closest('
tr').remove();});
{#const newRow = $('#device tbody
tr:last');#}
{#newRow.find('.datepicker').each(function() {#}
{# initDatepicker($(this));});#}
{#$('#device tbody
tr:last').find('td.datepicker').datepicker({#}
{# format: 'yyyy-mm-dd', // 确保年份
显示#}
{# autoclose:
true,#}
{# defaultDate: new Date()});#}
});
});
});
});
</script>
</body>
</html>
当关闭<div id="device_modal"之后，再次点击‘选择设备’按钮，则在<div id="device_modal" 点击‘选择’一条记录时候，会在前面的<table class="table table-bordered table-hover text-center" name="device" id="device"> 生产2条记录，当再次关闭 model，再次打开，每次回生产3次记录
解决tr元素事件委托难题
本文探讨了在使用事件委托时遇到的tr元素问题，解释了为何直接在tr上添加事件监听器会失败，并提供了解决方案：通过在tr内部添加div元素来成功捕获事件。同时，文章还提到了tr元素的显示属性设置技巧，避免表格错行。
扫一扫
47
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
