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 ><td >animal Id</td><td >animal name</td><td >cage Number</td><td >legs Number</td><td >delete</td></tr>';

animals.forEach(function (d) {
    tableBody  = `<tr >
<td >${d.animalId}</td>
<td >${d.animalName}</td>
<td >${d.cageNum}</td>
<td class = "td2">${d.legsNum}</td>
<td >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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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 ><td >animal Id</td><td >animal name</td><td >cage Number</td><td >legs Number</td><td >delete</td></tr>';

animals.forEach(function (d) {
    tableBody  = `<tr >
<td >${d.animalId}</td>
<td >${d.animalName}</td>
<td >${d.cageNum}</td>
<td class = "td2">${d.legsNum}</td>
<td >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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>