<body>
<h1 align="center">Safety Summary Generator</h1>
<table style="width:">
<tr>
<th height="200" width="150">
<div id="CEC">
<img src="../CHEMICAL EXPOSURE - CORROSIVE.png" alt="CHEMICAL EXPOSURE -
CORROSIVE" width="100" height="100">
<p>CHEMICAL EXPOSURE - CORROSIVE</p>
</div>
用户选择单选按钮，执行操作并显示一个复选框。当前，当第二次选择收音机时，它会再次执行操作，但检查被取消。我需要第二次点击才能删除第一个操作。
<input type="checkbox" value="Load" onClick="addRow('CEC', 1)">
</th>undefined</tr>undefined</table>undefined<h3 align="center">(Safety summary print sheet below)</h3>undefined<div>undefined<h1>
<hr color="#00cc00" width="100%">
</h1>
<div id="printDiv">
<table id="2table" border="1">
<h2>Chemical Hazards</h2>
<thead id="2table-head"></thead>
<tbody id="2table-body"></tbody>
</table>
</div>
<h1>
<hr color="#00cc00" width="100%">
</h1>
<div align="center">
<input type="button" onclick="PSSSReset()" value="PSSS/HWDI Delete">
</div>
<br>
<h3 align="center" style="color: red">Caution: Be sure to review the print sheet (between the
green lines) before pressing the Print Safety Summary button. You can only print once before
refreshing the browser.</h3>
<div align="center">
<button id="doPrint">Print Saftey Summary</button>
</div>
</div>
</body>
//Table row and column
需要事件侦听器来识别第一次单击并执行以下功能。需要事件监听器来识别第二次点击和删除第一次点击功能并重置。
"use strict";
var t_names = ["1table-body", "2table-body", "3table-body", "4table-body"];
var counter = [0, 0, 0, 0];
function addRow(v_id, t_id) {
var t_string = t_names[t_id];
console.log(t_string)
var tableBody = document.getElementById(t_string);
//find last row
var row = tableBody.rows[tableBody.rows.length - 1];
//if the row has six cells or there are no rows create a new one
if (row === null || row === undefined || row.cells.length >= 6) {
row = document.createElement("tr");
tableBody.appendChild(row);
}
//create new cell
var th = document.createElement("th");
//add data to cell
th.innerHTML = document.getElementById(v_id).innerHTML;
//add cell to row
row.appendChild(th);
}
我已经修复了您的代码，这里是UPDATED_FIDDLE
HTML
我将输入元素更改为调用updateTable((，并传递一个额外的参数this。
<body>
<h1 align="center">Safety Summary Generator</h1>
<table style="width:">
<tr>
<th height="200" width="150">
<div id="CEC">
<img src="../CHEMICAL EXPOSURE - CORROSIVE.png" alt="CHEMICAL EXPOSURE -
CORROSIVE" width="100" height="100">
<p>CHEMICAL EXPOSURE - CORROSIVE</p>
</div>
<input type="checkbox" value="Load" onClick="updateTable('CEC', 1, this)">
</th>undefined</tr>undefined</table>undefined<h3 align="center">(Safety summary print sheet below)</h3>undefined<div>undefined<h1>
<hr color="#00cc00" width="100%">
</h1>
<div id="printDiv">
<table id="2table" border="1">
<h2>Chemical Hazards</h2>
<thead id="2table-head"></thead>
<tbody id="2table-body"></tbody>
</table>
</div>
<h1>
<hr color="#00cc00" width="100%">
</h1>
<div align="center">
<input type="button" onclick="PSSSReset()" value="PSSS/HWDI Delete">
</div>
<br>
<h3 align="center" style="color: red">Caution: Be sure to review the print sheet (between the
green lines) before pressing the Print Safety Summary button. You can only print once before
refreshing the browser.</h3>
<div align="center">
<button id="doPrint">Print Saftey Summary</button>
</div>
</div>
</body>
JS
我创建了一个名为updateTable((的新函数，它使用与addTable((相同的两个参数，加上接收this元素并将其存储为thisCheckbox。
updateTable((检查表是否为空。如果是，则调用addRow((并传递vid和tid参数。
同样为了安全起见，将复选框的"已选中"状态设置为true(这样该复选框将在UI中被选中(。
如果表不为空，updateTable((调用delRow((并将table元素传递给它。它还确保复选框未选中。
addRow((函数，我没有更改。
delRow((函数只是一个while循环，它删除表中的每一行，直到它为空。
希望这能有所帮助！如果您有任何问题，请告诉我。：(
var t_names = ["1table-body", "2table-body", "3table-body", "4table-body"];
var counter = [0, 0, 0, 0];
function updateTable(vid, tid, thisCheckbox) {
var t_string = t_names[tid];
var tableBody = document.getElementById(t_string);
//check if table is empty
if (tableBody.rows.length === 0) {
//table is empty so regardless of checkbox state
//checkbox needs to be checked now as we are going
//to add the row
thisCheckbox.checked = true;
addRow(vid, tid);
} else {
//table is not empty so make sure checkbox is unchecked
//then remove the row
thisCheckbox.checked = false;
delRow(tableBody);
}
}
function delRow(tableBody) {
while (tableBody.rows.length > 0) {
tableBody.deleteRow(0);
}
}
function addRow(v_id, t_id) {
var t_string = t_names[t_id];
console.log(t_string)
var tableBody = document.getElementById(t_string);
//find last row
var row = tableBody.rows[tableBody.rows.length - 1];
//if the row has six cells or there are no rows create a new one
if (row === null || row === undefined || row.cells.length >= 6) {
row = document.createElement("tr");
tableBody.appendChild(row);
}
//create new cell
var th = document.createElement("th");
//add data to cell
th.innerHTML = document.getElementById(v_id).innerHTML;
//add cell to row
row.appendChild(th);
}