how to make a strikethrough on a table row withot messing the borders

Question

i need to make a strikethrough on a whole table row.

the strikethrough should work so whenever i click on a button that is inside one of the table's rows, it will run a Jquery function: $(this).closest('tr').toggleClass('strikethrough');

the class that named strikethrough is supposed to have the attribute the make the strikethrough.

i tried this:

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

but it just messed the whole tabel.

here is my code:

 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

Amend CSS part

#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>