For回圈表內容中的洗掉按鈕-有解無憂

希望大家在這個悲慘的時代過得好好的！

我在完成上級指定的任務時遇到問題。也就是說，我創建了一個表格并完成了按評級排序并設法制作了一個有效的添加內容按鈕。但是我嘗試在表格中的每個物件旁邊添加洗掉按鈕時碰壁了。幫助將是非常受歡迎的。

這是js。代碼

'use strict'

let movieData = [{ "id": 1, "name": "Network", "genre": "Comedy|Drama", "rating": "68.22" },
    { "id": 2, "name": "Kommissarie Sp?ck", "genre": "Comedy", "rating": "30.65" },
    { "id": 3, "name": "Pirate, The", "genre": "Adventure|Comedy|Musical|Romance", "rating": "98.22" },
    { "id": 4, "name": "Mary and Martha", "genre": "Drama", "rating": "11.15" },
    { "id": 5, "name": "Four Days in September (O Que é Isso, Companheiro?)", "genre": "Drama", "rating": "20.35" },
    { "id": 6, "name": "Sibling Rivalry", "genre": "Comedy", "rating": "5.91" },
    { "id": 7, "name": "Alice in Wonderland", "genre": "Adventure|Children|Fantasy", "rating": "52.69" },
    { "id": 8, "name": "Dead Weekend", "genre": "Comedy|Sci-Fi", "rating": "30.84" },
    { "id": 9, "name": "Top Hat", "genre": "Comedy|Musical|Romance", "rating": "60.06" },
    { "id": 10, "name": "Cleopatra", "genre": "Drama|Romance|War", "rating": "65.39" },
    { "id": 11, "name": "For All Mankind", "genre": "Documentary", "rating": "73.24" },
    { "id": 12, "name": "Messiah of Evil", "genre": "Horror", "rating": "28.9" },
    { "id": 13, "name": "Princess and the Pirate, The", "genre": "Adventure|Comedy|Romance", "rating": "20.41" },
    { "id": 14, "name": "Restrepo", "genre": "Documentary|War", "rating": "71.18" },
    { "id": 15, "name": "Return to the Blue Lagoon", "genre": "Adventure|Romance", "rating": "67.92" },
    { "id": 16, "name": "Convoy", "genre": "Action|Comedy|Drama", "rating": "22.53" },
    { "id": 17, "name": "Perfect", "genre": "Drama|Romance", "rating": "86.25" },
    { "id": 18, "name": "Son of Babylon (Syn Babilonu)", "genre": "Drama", "rating": "26.54" },
    { "id": 19, "name": "Heaven and Earth (Ten to Chi to)", "genre": "Action|Adventure|Drama|War", "rating": "69.39" },
    { "id": 20, "name": "Carcasses", "genre": "Documentary", "rating": "3.72" },
    { "id": 21, "name": "Repentance", "genre": "Drama|Horror|Thriller", "rating": "55.21" },
    { "id": 22, "name": "Loose Change: Second Edition", "genre": "Documentary|Mystery", "rating": "72.22" },
    { "id": 23, "name": "Resurrection Man", "genre": "Drama|Thriller", "rating": "74.68" },
    { "id": 24, "name": "Green Card", "genre": "Comedy|Drama|Romance", "rating": "35.28" },
    { "id": 25, "name": "Micki   Maude", "genre": "Comedy", "rating": "2.02" },
    { "id": 26, "name": "Rover, The", "genre": "Crime|Drama", "rating": "18.73" },
    { "id": 27, "name": "Dark Horse (Voksne mennesker)", "genre": "Comedy|Drama|Romance", "rating": "28.19" },
    { "id": 28, "name": "Street Thief", "genre": "Crime|Documentary", "rating": "67.11" },
    { "id": 29, "name": "Woman In Berlin, A (Anonyma - Eine Frau in Berlin)", "genre": "Drama|War", "rating": "13.85" },
    { "id": 30, "name": "Expendables, The", "genre": "Action|Adventure|Thriller", "rating": "92.78" },
 
];


//Toggle Sort

function sortTable(n) {
    let table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("tableData");
    switching = true;
    dir = 'asc';
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 0; i < (movieData.length - 1); i  ) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName('td')[n];
            y = rows[i   1].getElementsByTagName('td')[n];
            if (dir == 'asc') {
                if (parseFloat(x.innerHTML) > parseFloat(y.innerHTML)) {
                    shouldSwitch = true;
                    break;
                }
            } else if (dir == 'desc') {
                if (parseFloat(x.innerHTML) < parseFloat(y.innerHTML)) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i   1], rows[i]);
            switching = true;
            switchcount  ;
        } else {
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
};

//Add content to the table
function addTableRow() {
    let table = document.getElementById('tableData');
    let txt = '';
    let movieNameInput = document.getElementById('movieName').value;
    let movieGenreInput = document.getElementById('movieGenre').value;
    let movieRatingInput = document.getElementById('movieRating').value;

    let row = table.insertRow();
    txt = txt   `<tr><td>${movieNameInput}</td><td>${movieGenreInput}</td><td>${movieRatingInput}</td></tr>`;
    row.innerHTML = txt;


}


window.onload = () => {
    loadTableData(movieData);
}



function loadTableData(movieData) {
    let tableBody = document.getElementById('tableData');
    let txt = '';
    for (let i = 0; i < movieData.length; i  ) {
        txt = txt   `<tr><td>${movieData[i].name}</td><td>${movieData[i].genre}</td><td>${movieData[i].rating}<td></tr>`;
    }
    tableBody.innerHTML = txt
}

body {
    background-color: #f2f2f2f2;
    color: black;
    font-weight: 500;
    background-color: rgb(250, 241, 231);
}

table {
    border-collapse: collapse;
    width: 50%;
    text-align: center;
    margin: 40px auto;
}

tr,
th {
    border: 1px solid #cccccc;
    padding: 8px;
    font-size: 16px Z;
}

th {
    font-weight: bold;
    text-transform: uppercase;
    color: bisque;
    background-color: #444
}

tr:nth-child(even) {
    background: rgba(15, 85, 6, 0.438);
}

tr:hover {
    color: whitesmoke;
    background-color: rgba(82, 79, 78, 0.568);
    transition: ease-in-out .5s;
}

.name {
    background: #444;
}

.genre {
    background-color: rgba(240, 101, 50, 0.411)
}

.toggler {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-color: rgba(245, 62, 6, 0.658);
}

.addremove {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 15px;
    color: coral;
    font-weight: 900;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Tabela</title>

</head>

<!--TABLE-->

<body>
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th class="name">Name</th>
                    <th class="genre">Genre</th>
                    <th class="toggler" onclick="sortTable(2)">Rating</th>
                    
                </tr>
            </thead>

            <tbody id="tableData">

            </tbody>

        </table>
    </div>

    <br>


    <!--ADD/REMOVE BUTTON-->
   
   <div class="addremove">

        Name : <input type="text" name="text" id="movieName"> 
        Genre : <input type="text" name="text" id="movieGenre"> 
        Rating : <input type="text" name="rating" id="movieRating">


        <button onclick="addTableRow();">Add</button>

    </div>

    </div>







    <script src="app.js"></script>
</body>

</html>

uj5u.com熱心網友回復：

如果我正確理解了您的問題，那么您可能希望在創建表格期間直接創建按鈕。在 HTML 中，您需要使用適當的標題創建另一個，例如“動作”

然后，您需要調整 addTableRow 和 loadTableData 函式，在最后一個包含按鈕后添加一個，例如呼叫函式“deleteRow(i)”的 onclick 事件，其中 i 相當于您正在創建的陣列元素的 id。

然后將這兩個函式中的元素更改為 id="rowi"，其中 "rowi" 中的 "i" 再次是串列中相應陣列元素的 id。

txt = txt   `<tr id="row` i `"><td>${movieData[i].name}</td><td>${movieData[i].genre}</td><td>${movieData[i].rating}</td><td><button value="Delete" onclick="deleteRow(` i `)"></tr>`;

不要忘記為 addTableRow 函式相應地調整此行，以便 i 對應于插入表中的下一個 id。

最后，您創建一個函式 deleteRow(rowid)，它洗掉整個 id 為 rowid 的內容。

function deleteRow(rowid) {
  document.getElementById(rowid).remove();
}

uj5u.com熱心網友回復：

據我了解delete，每行電影都需要一個按鈕。如果是這樣，您需要在loadTableData()方法本身中創建一個按鈕。

并且由于您希望通過單擊將電影從串列中完全洗掉，因此您需要發送 id 或在您的情況下，將電影的索引連同它一起發送，例如，

<td><button onclick="deleteRow(${i});">Delete</button></td>

并相應地創建一個處理程式，像這樣，

function deleteRow(i) {
  movieData.splice(i, 1);
  loadTableData(movieData);
}

正如你所看到的，這是有效的。但是最后的loadTableData(movieData)函式呼叫負責重繪 UI，但它并沒有真正考慮當前的排序視圖。我想你應該能夠根據自己的判斷來弄清楚或處理。

'use strict'

let movieData = [{ "id": 1, "name": "Network", "genre": "Comedy|Drama", "rating": "68.22" },
    { "id": 2, "name": "Kommissarie Sp?ck", "genre": "Comedy", "rating": "30.65" },
    { "id": 3, "name": "Pirate, The", "genre": "Adventure|Comedy|Musical|Romance", "rating": "98.22" },
    { "id": 4, "name": "Mary and Martha", "genre": "Drama", "rating": "11.15" },
    { "id": 5, "name": "Four Days in September (O Que é Isso, Companheiro?)", "genre": "Drama", "rating": "20.35" },
    { "id": 6, "name": "Sibling Rivalry", "genre": "Comedy", "rating": "5.91" },
    { "id": 7, "name": "Alice in Wonderland", "genre": "Adventure|Children|Fantasy", "rating": "52.69" },
    { "id": 8, "name": "Dead Weekend", "genre": "Comedy|Sci-Fi", "rating": "30.84" },
    { "id": 9, "name": "Top Hat", "genre": "Comedy|Musical|Romance", "rating": "60.06" },
    { "id": 10, "name": "Cleopatra", "genre": "Drama|Romance|War", "rating": "65.39" },
    { "id": 11, "name": "For All Mankind", "genre": "Documentary", "rating": "73.24" },
    { "id": 12, "name": "Messiah of Evil", "genre": "Horror", "rating": "28.9" },
    { "id": 13, "name": "Princess and the Pirate, The", "genre": "Adventure|Comedy|Romance", "rating": "20.41" },
    { "id": 14, "name": "Restrepo", "genre": "Documentary|War", "rating": "71.18" },
    { "id": 15, "name": "Return to the Blue Lagoon", "genre": "Adventure|Romance", "rating": "67.92" },
    { "id": 16, "name": "Convoy", "genre": "Action|Comedy|Drama", "rating": "22.53" },
    { "id": 17, "name": "Perfect", "genre": "Drama|Romance", "rating": "86.25" },
    { "id": 18, "name": "Son of Babylon (Syn Babilonu)", "genre": "Drama", "rating": "26.54" },
    { "id": 19, "name": "Heaven and Earth (Ten to Chi to)", "genre": "Action|Adventure|Drama|War", "rating": "69.39" },
    { "id": 20, "name": "Carcasses", "genre": "Documentary", "rating": "3.72" },
    { "id": 21, "name": "Repentance", "genre": "Drama|Horror|Thriller", "rating": "55.21" },
    { "id": 22, "name": "Loose Change: Second Edition", "genre": "Documentary|Mystery", "rating": "72.22" },
    { "id": 23, "name": "Resurrection Man", "genre": "Drama|Thriller", "rating": "74.68" },
    { "id": 24, "name": "Green Card", "genre": "Comedy|Drama|Romance", "rating": "35.28" },
    { "id": 25, "name": "Micki   Maude", "genre": "Comedy", "rating": "2.02" },
    { "id": 26, "name": "Rover, The", "genre": "Crime|Drama", "rating": "18.73" },
    { "id": 27, "name": "Dark Horse (Voksne mennesker)", "genre": "Comedy|Drama|Romance", "rating": "28.19" },
    { "id": 28, "name": "Street Thief", "genre": "Crime|Documentary", "rating": "67.11" },
    { "id": 29, "name": "Woman In Berlin, A (Anonyma - Eine Frau in Berlin)", "genre": "Drama|War", "rating": "13.85" },
    { "id": 30, "name": "Expendables, The", "genre": "Action|Adventure|Thriller", "rating": "92.78" },
 
];


//Toggle Sort

function sortTable(n) {
    let table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("tableData");
    switching = true;
    dir = 'asc';
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 0; i < (movieData.length - 1); i  ) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName('td')[n];
            y = rows[i   1].getElementsByTagName('td')[n];
            if (dir == 'asc') {
                if (parseFloat(x.innerHTML) > parseFloat(y.innerHTML)) {
                    shouldSwitch = true;
                    break;
                }
            } else if (dir == 'desc') {
                if (parseFloat(x.innerHTML) < parseFloat(y.innerHTML)) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i   1], rows[i]);
            switching = true;
            switchcount  ;
        } else {
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
};

//Add content to the table
function addTableRow() {
    let table = document.getElementById('tableData');
    let txt = '';
    let movieNameInput = document.getElementById('movieName').value;
    let movieGenreInput = document.getElementById('movieGenre').value;
    let movieRatingInput = document.getElementById('movieRating').value;

    let row = table.insertRow();
    txt = txt   `<tr><td>${movieNameInput}</td><td>${movieGenreInput}</td><td>${movieRatingInput}</td></tr>`;
    row.innerHTML = txt;


}

function deleteRow(i) {
  movieData.splice(i, 1);
  loadTableData(movieData);
}


window.onload = () => {
    loadTableData(movieData);
}



function loadTableData(movieData) {
    let tableBody = document.getElementById('tableData');
    let txt = '';
    for (let i = 0; i < movieData.length; i  ) {
        txt = txt   `<tr><td>${movieData[i].name}</td><td>${movieData[i].genre}</td><td>${movieData[i].rating}</td><td><button onclick="deleteRow(${i});">Delete</button></td></tr>`;
    }
    tableBody.innerHTML = txt
}

body {
    background-color: #f2f2f2f2;
    color: black;
    font-weight: 500;
    background-color: rgb(250, 241, 231);
}

table {
    border-collapse: collapse;
    width: 50%;
    text-align: center;
    margin: 40px auto;
}

tr,
th {
    border: 1px solid #cccccc;
    padding: 8px;
    font-size: 16px Z;
}

th {
    font-weight: bold;
    text-transform: uppercase;
    color: bisque;
    background-color: #444
}

tr:nth-child(even) {
    background: rgba(15, 85, 6, 0.438);
}

tr:hover {
    color: whitesmoke;
    background-color: rgba(82, 79, 78, 0.568);
    transition: ease-in-out .5s;
}

.name {
    background: #444;
}

.genre {
    background-color: rgba(240, 101, 50, 0.411)
}

.toggler {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-color: rgba(245, 62, 6, 0.658);
}

.addremove {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 15px;
    color: coral;
    font-weight: 900;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Tabela</title>

</head>

<!--TABLE-->

<body>
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th class="name">Name</th>
                    <th class="genre">Genre</th>
                    <th class="toggler" onclick="sortTable(2)">Rating</th>
                    <th class="name">Action</th>
                    
                </tr>
            </thead>

            <tbody id="tableData">

            </tbody>

        </table>
    </div>

    <br>


    <!--ADD/REMOVE BUTTON-->
   
   <div class="addremove">

        Name : <input type="text" name="text" id="movieName"> 
        Genre : <input type="text" name="text" id="movieGenre"> 
        Rating : <input type="text" name="rating" id="movieRating">


        <button onclick="addTableRow();">Add</button>

    </div>

    </div>







    <script src="app.js"></script>
</body>

</html>

快樂編碼！

uj5u.com熱心網友回復：

像這樣：

For 回圈表內容中的洗掉按鈕

添加您的 HTML 代碼（表格）

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336417.html

標籤：javascript 数组循环

上一篇：ansible和sub回圈

下一篇：處理字串時跳過for回圈中的迭代（在Python中）