如何在不弄亂邊框的情況下在表格行上添加洗掉線

我需要在整個表格行上添加洗掉線。

洗掉線應該可以作業，因此每當我單擊表行內的按鈕時，它都會運行 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 ><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>

uj5u.com熱心網友回復：

修改 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 ><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>

標籤：javascript 查询 css

上一篇：如何創建帶有影像氣泡的滾動影像拼貼畫？

下一篇：嘗試在NextJS專案中覆寫react-bootstrapcss