執行單擊（檢查出現）動作，再次執行第二次單擊（檢查消失）動作。需要，第二次點擊刪除第一個動作

Question

<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);
}

Answer 1

我已經修復了你的代碼，這里是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() 並將表元素傳遞給它。 它還確保未選中該復選框。

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);
}

執行單擊（檢查出現）動作，再次執行第二次單擊（檢查消失）動作。需要，第二次點擊刪除第一個動作

問題描述

1 個解決方案

解決方案1
0 2020-03-21 01:59:32

執行單擊（檢查出現）動作，再次執行第二次單擊（檢查消失）動作。 需要，第二次點擊刪除第一個動作

問題描述

1 個解決方案

解決方案1 0 2020-03-21 01:59:32

執行單擊（檢查出現）動作，再次執行第二次單擊（檢查消失）動作。需要，第二次點擊刪除第一個動作

解決方案1
0 2020-03-21 01:59:32