如何在不弄乱边框的情况下在表格行上添加删除线

Question

我需要在整个表格行上添加删除线。

删除线应该可以工作，所以每当我点击表格行内的一个按钮时，它就会运行一个 Jquery 函数： $(this).closest('tr').toggleClass('strikethrough');

名为删除线的类应该具有使删除线的属性。

我试过这个：

strikethrough {
content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 1px solid #111;
    width: 100%;
}

但它只是弄乱了整个表格。

这是我的代码：

 const animals = [{ "animalId": "1", "animalName": "elephent", "cageNum": "231", "legsNum": "4", "CandidatesForDeletion": false }, { "animalId": "2", "animalName": "tiger", "cageNum": "324", "legsNum": "56.00", "CandidatesForDeletion": false }, { "animalId": "3", "animalName": "wolf", "cageNum": "414", "legsNum": "210.40", "CandidatesForDeletion": false } ] let tableBody = '<table id="table"><tr class="tr tr1"><td class="td1">animal Id</td><td class="td1">animal name</td><td class="td1">cage Number</td><td class="td1">legs Number</td><td class="td1">delete</td></tr>'; animals.forEach(function (d) { tableBody += `<tr class="tr tr2"> <td class="td2">${d.animalId}</td> <td class="td2">${d.animalName}</td> <td class="td2">${d.cageNum}</td> <td class = "td2">${d.legsNum}</td> <td class="td2 trash_button">click for strikethrough</td> </tr>`; }); $(document).ready(function () { $(document).on('click', '.trash_button', function () { $(this).closest('tr').toggleClass('strikethrough'); }); }); function CreateTableFromJSON() { $('#showData').html(tableBody); }

 #table { overflow-x: auto; overflow-y: auto; position: absolute; left: 5%; top: 30%; width: 90%; align-content: center; font-size:12px; border-collapse:collapse; border: 2px solid black; } .tr { font-weight:bold; border: 2px solid black; height: 17%; } .tr1 { background:#16A1E7; height: 80px; } .tr2 { background: #ffffff; transition: 0.4s; height: 80px; } .tr2:hover { background-color: cyan; transition: 0.4s; } .td1 { justify-items: center; align-items: center; text-align: center; color:white; border: 2px solid black; height: 17%; } .td2 { justify-items: center; align-items: center; text-align: center; color:black; border: 2px solid black; height: 17%; } .strikethrough { text-decoration: line-through; color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button tabindex="1" onclick="CreateTableFromJSON()" value="Create Table From JSON" style="border: 1px solid black">animals</button><p id="showData"></p>

Answer 1

修改 CSS 部分

#table td {
    position: relative;
}

tr.strikethrough td:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 1px solid #111;
    width: 100%;
}

 const animals = [{ "animalId": "1", "animalName": "elephent", "cageNum": "231", "legsNum": "4", "CandidatesForDeletion": false }, { "animalId": "2", "animalName": "tiger", "cageNum": "324", "legsNum": "56.00", "CandidatesForDeletion": false }, { "animalId": "3", "animalName": "wolf", "cageNum": "414", "legsNum": "210.40", "CandidatesForDeletion": false } ] let tableBody = '<table id="table"><tr class="tr tr1"><td class="td1">animal Id</td><td class="td1">animal name</td><td class="td1">cage Number</td><td class="td1">legs Number</td><td class="td1">delete</td></tr>'; animals.forEach(function (d) { tableBody += `<tr class="tr tr2"> <td class="td2">${d.animalId}</td> <td class="td2">${d.animalName}</td> <td class="td2">${d.cageNum}</td> <td class = "td2">${d.legsNum}</td> <td class="td2 trash_button">click for strikethrough</td> </tr>`; }); $(document).ready(function () { $(document).on('click', '.trash_button', function () { $(this).closest('tr').toggleClass('strikethrough'); }); }); function CreateTableFromJSON() { $('#showData').html(tableBody); }

 #table { overflow-x: auto; overflow-y: auto; position: absolute; left: 5%; top: 30%; width: 90%; align-content: center; font-size:12px; border-collapse:collapse; border: 2px solid black; } .tr { font-weight:bold; border: 2px solid black; height: 17%; } .tr1 { background:#16A1E7; height: 80px; } .tr2 { background: #ffffff; transition: 0.4s; height: 80px; } .tr2:hover { background-color: cyan; transition: 0.4s; } .td1 { justify-items: center; align-items: center; text-align: center; color:white; border: 2px solid black; height: 17%; } .td2 { justify-items: center; align-items: center; text-align: center; color:black; border: 2px solid black; height: 17%; } #table td { position: relative; } tr.strikethrough td:before { content: " "; position: absolute; top: 50%; left: 0; border-bottom: 1px solid #111; width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button tabindex="1" onclick="CreateTableFromJSON()" value="Create Table From JSON" style="border: 1px solid black">animals</button><p id="showData"></p>