如何讓元素重新出現？-有解無憂

我已經構建了一個包含 3 個輸入的簡單費用跟蹤器

姓名輸入

日期輸入

金額輸入

用戶填寫這 3 個輸入后，他們可以單擊按鈕將費用添加到表中并將其存盤在那里。如果他們想從表中洗掉費用，他們可以單擊“洗掉條目”按鈕。

如何讓元素重新出現？

如果表為空，則顯示“尚未添加費用！ ”tr元素。一旦添加了費用，tr帶有訊息的元素就會消失。但是，如果我向表中添加費用然后將其洗掉，則tr不再顯示帶有訊息的元素。有什么辦法可以讓它再次出現嗎？

如何讓元素重新出現？

let nameInput = document.querySelector(".name");
let dateInput = document.querySelector(".date");
let amountInput = document.querySelector(".amount");

let button = document.querySelector(".add-btn");
let ifEmpty = document.querySelector(".if-empty");
let table = document.querySelector("table");

button.addEventListener("click", function() {
    ifEmpty.remove();
    
    // CREATE THE EXPENSE
    let holder = document.createElement("tr");
    let row = document.createElement("td");
    let btnRow = document.createElement("td");
    let removeButton = document.createElement("button");

    table.appendChild(holder);
    holder.appendChild(row).textContent = nameInput.value;
    holder.appendChild(row.cloneNode(true)).textContent = dateInput.value;
    holder.appendChild(row.cloneNode(true)).textContent = amountInput.value;
    holder.appendChild(btnRow);
    btnRow.appendChild(removeButton).textContent = "REMOVE ENTRY";

    // REMOVE THE EXPENSE
    removeButton.addEventListener("click", function() {
        holder.remove();
    });

    /* TRIED THIS TO MAKE THE ELEMENT RE-APPEAR IF THE TABLE IS EMPTY BUT                      
    IT DIDN'T WORK */

    if (!table.contains(holder)) {
       table.appendChild(ifEmpty);
    }
});

.container {
    text-align: center;
}

h1 {
    font-size: 3.5em;
}

h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
    color: green;
}

span {
    font-size: 1.4em;
}

.date-amount-input {
    margin-top: 0.5em;
}

input {
    height: 28px;
}

.name {
    padding-right: 5em;
}

.amount {
    padding-right: 15.35em;
}

.amount-text {
    margin-left: 0.4em;
}

.date {
    padding-right: 18.8em;
    
}

.add-btn {
    margin-top: 0.9em;
    padding: 0.6em;
    font-size: 1.1em;
    background: green;
    color: white;
    border: none;
    border-radius: 5px;
}

.add-btn:hover, .add-btn:focus {
    cursor: pointer;
    background: rgb(3, 177, 3);
}

table {
    margin: 0 auto;
    margin-top: 2em;
    width: 50%;
    height: 80px;
}

tr {
    height: 40px;
}

table, th, td{
    border: 1px solid rgba(0, 0, 0, 0.103);
    border-collapse: collapse;
}

.empty-text {
    font-size: 0.93em;
}

.if-empty {
    background: rgba(0, 0, 0, 0.055);
}

<body>
    <div class="container">
        <h1>Expense Tracker</h1>
        <h2>Add A New Item</h2>
        <div class="name-input">
            <span class="name-text">Name: </span>
            <input type="text" class="name" placeholder="Where was the expense made" size="117">
        </div>
        <div class="date-amount-input">
            <span>Date: </span>
            <input class="date" type="date">
            <span class="amount-text">Amount: </span>
            <input class="amount" type="text">
        </div>
        <button class="add-btn">Add Expense</button>
        <table>
            <tr>
                <th>Name</th>
                <th>Date</th>
                <th>Amount</th>
            </tr>
            <tr class="if-empty">
                <td colspan = "4">
                    <span  class="empty-text">No expenses added yet!</span>
                </td>
            </tr>
        </table>
    </div>
    <script src="main.js"></script>
</body>

我仍然是 JS 的初學者，所以任何提示都會被采納。

uj5u.com熱心網友回復：

你做了一個ifEmpty.remove();，實際上洗掉了元素。一旦它被移除，它就消失了，如果不重新創建它就無法讓它重新出現。

更簡單的解決方案可能是隱藏它而不是洗掉它。

您可以使用ifEmpty.style.display = "none"隱藏它并ifEmpty.style.display = "table-row"再次顯示它

uj5u.com熱心網友回復：

您可以簡單地使用 CSS 隱藏它，而不是從頁面中洗掉元素。

在 CSS 中添加以下類：


    .hide{
      display: none;
    }

現在，在 JavaScript 中創建一個函式來檢查表是否為 Empty，不包括標題行和 ifEmpty 行：


    let toggleIfEmpty = () => {
                if(table.getElementsByTagName('tr').length <= 2){
                ifEmpty.classList.remove("hide");
          } else {
            ifEmpty.classList.add("hide");
          }
    };

在 eventListener 上呼叫此函式：


    removeButton.addEventListener("click", function() {
            holder.remove();
            toggleIfEmpty();
        });

然后再次呼叫該函式而不是附加子元素：

這樣做：toggleIfEmpty(); 而不是：


    if (!table.contains(holder)) {
           table.appendChild(ifEmpty);
        }

它會起作用。

完整更新的 JS 供您參考：


    let nameInput = document.querySelector(".name");
    let dateInput = document.querySelector(".date");
    let amountInput = document.querySelector(".amount");
    
    let button = document.querySelector(".add-btn");
    let ifEmpty = document.querySelector(".if-empty");
    let table = document.querySelector("table");
    
    let toggleIfEmpty = () => {
                if(table.getElementsByTagName('tr').length <= 2){
                ifEmpty.classList.remove("hide");
          } else {
            ifEmpty.classList.add("hide");
          }
    };
    
    button.addEventListener("click", function() {
        
        // CREATE THE EXPENSE
        let holder = document.createElement("tr");
        let row = document.createElement("td");
        let btnRow = document.createElement("td");
        let removeButton = document.createElement("button");
    
        table.appendChild(holder);
        holder.appendChild(row).textContent = nameInput.value;
        holder.appendChild(row.cloneNode(true)).textContent = dateInput.value;
        holder.appendChild(row.cloneNode(true)).textContent = amountInput.value;
        holder.appendChild(btnRow);
        btnRow.appendChild(removeButton).textContent = "REMOVE ENTRY";
    
        // REMOVE THE EXPENSE
        removeButton.addEventListener("click", function() {
            holder.remove();
                    toggleIfEmpty();
        });
    
        /* TRIED THIS TO MAKE THE ELEMENT RE-APPEAR IF THE TABLE IS EMPTY BUT                      
        IT DIDN'T WORK */
    
     /*    if (!table.contains(holder)) {
           table.appendChild(ifEmpty);
        } */
        
            toggleIfEmpty();
    });

uj5u.com熱心網友回復：

顯示/隱藏可以用純 CSS 來完成，顯示就table-row好像它是最后一個<tr>. 確保在同一個<tbody>.

tr.if-empty {
    background: rgba(0, 0, 0, 0.055);
    display: none;
}
tr:last-child.if-empty {
    display: table-row;
}

let nameInput = document.querySelector(".name");
let dateInput = document.querySelector(".date");
let amountInput = document.querySelector(".amount");

let button = document.querySelector(".add-btn");
let ifEmpty = document.querySelector(".if-empty");
let table = document.querySelector("table > tbody");

button.addEventListener("click", function() {
    
    // CREATE THE EXPENSE
    let holder = document.createElement("tr");
    let row = document.createElement("td");
    let btnRow = document.createElement("td");
    let removeButton = document.createElement("button");

    table.appendChild(holder);
    holder.appendChild(row).textContent = nameInput.value;
    holder.appendChild(row.cloneNode(true)).textContent = dateInput.value;
    holder.appendChild(row.cloneNode(true)).textContent = amountInput.value;
    holder.appendChild(btnRow);
    btnRow.appendChild(removeButton).textContent = "REMOVE ENTRY";

    // REMOVE THE EXPENSE
    removeButton.addEventListener("click", function() {
        holder.remove();
    });

});

.container {
    text-align: center;
}

h1 {
    font-size: 3.5em;
}

h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
    color: green;
}

span {
    font-size: 1.4em;
}

.date-amount-input {
    margin-top: 0.5em;
}

input {
    height: 28px;
}

.name {
    padding-right: 5em;
}

.amount {
    padding-right: 15.35em;
}

.amount-text {
    margin-left: 0.4em;
}

.date {
    padding-right: 18.8em;
    
}

.add-btn {
    margin-top: 0.9em;
    padding: 0.6em;
    font-size: 1.1em;
    background: green;
    color: white;
    border: none;
    border-radius: 5px;
}

.add-btn:hover, .add-btn:focus {
    cursor: pointer;
    background: rgb(3, 177, 3);
}

table {
    margin: 0 auto;
    margin-top: 2em;
    width: 50%;
    height: 80px;
}

tr {
    height: 40px;
}

table, th, td{
    border: 1px solid rgba(0, 0, 0, 0.103);
    border-collapse: collapse;
}

.empty-text {
    font-size: 0.93em;
}

tr.if-empty {
    background: rgba(0, 0, 0, 0.055);
    display: none;
}
tr:last-child.if-empty {
    display: table-row;
}

<body>
    <div class="container">
        <h1>Expense Tracker</h1>
        <h2>Add A New Item</h2>
        <div class="name-input">
            <span class="name-text">Name: </span>
            <input type="text" class="name" placeholder="Where was the expense made" size="117">
        </div>
        <div class="date-amount-input">
            <span>Date: </span>
            <input class="date" type="date">
            <span class="amount-text">Amount: </span>
            <input class="amount" type="text">
        </div>
        <button class="add-btn">Add Expense</button>
        <table>
          <tbody>
            <tr>
                <th>Name</th>
                <th>Date</th>
                <th>Amount</th>
            </tr>
            <tr class="if-empty">
                <td colspan = "4">
                    <span  class="empty-text">No expenses added yet!</span>
                </td>
            </tr>
          </tbody>
        </table>
    </div>
    <script src="main.js"></script>
</body>

uj5u.com熱心網友回復：

您可以執行類似的操作，在remove entry按鈕的 eventListener 內部，您可以檢查表中子元素的數量是否小于或等于 1（包括名稱日期和金額元素），在這種情況下將沒有條目，您可以附加訊息。

在此解決方案中，我為“無條目”訊息創建了一個占位符，并在每次必須附加訊息時創建該占位符，您可以使用元素的 display 屬性來相應地隱藏或顯示它，而不是為每個創建一個新元素會議

let nameInput = document.querySelector(".name");
let dateInput = document.querySelector(".date");
let amountInput = document.querySelector(".amount");

let button = document.querySelector(".add-btn");
let ifEmpty = document.querySelector(".if-empty");
let table = document.querySelector("table");

const emptyMessage = ifEmpty;

button.addEventListener("click", function() {
ifEmpty.remove();

// CREATE THE EXPENSE
let holder = document.createElement("tr");
let row = document.createElement("td");
let btnRow = document.createElement("td");
let removeButton = document.createElement("button");

// REMOVE THE EXPENSE
removeButton.addEventListener("click", function() {
    holder.remove();
    if (table.children.length <= 1) table.appendChild(emptyMessage)
});

table.appendChild(holder);
holder.appendChild(row).textContent = nameInput.value;
holder.appendChild(row.cloneNode(true)).textContent = dateInput.value;
holder.appendChild(row.cloneNode(true)).textContent = amountInput.value;
holder.appendChild(btnRow);
btnRow.appendChild(removeButton).textContent = "REMOVE ENTRY";

// TRIED THIS BUT IT DIDN'T WORK

});

.container {
    text-align: center;
}

h1 {
    font-size: 3.5em;
}

h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
    color: green;
}

span {
    font-size: 1.4em;
}

.date-amount-input {
    margin-top: 0.5em;
}

input {
    height: 28px;
}

.name {
    padding-right: 5em;
}

.amount {
    padding-right: 15.35em;
}

.amount-text {
    margin-left: 0.4em;
}

.date {
    padding-right: 18.8em;
    
}

.add-btn {
    margin-top: 0.9em;
    padding: 0.6em;
    font-size: 1.1em;
    background: green;
    color: white;
    border: none;
    border-radius: 5px;
}

.add-btn:hover, .add-btn:focus {
    cursor: pointer;
    background: rgb(3, 177, 3);
}

table {
    margin: 0 auto;
    margin-top: 2em;
    width: 50%;
    height: 80px;
}

tr {
    height: 40px;
}

table, th, td{
    border: 1px solid rgba(0, 0, 0, 0.103);
    border-collapse: collapse;
}

.empty-text {
    font-size: 0.93em;
}

.if-empty {
    background: rgba(0, 0, 0, 0.055);
}

<body>
    <div class="container">
        <h1>Expense Tracker</h1>
        <h2>Add A New Item</h2>
        <div class="name-input">
            <span class="name-text">Name: </span>
            <input type="text" class="name" placeholder="Where was the expense made" size="117">
        </div>
        <div class="date-amount-input">
            <span>Date: </span>
            <input class="date" type="date">
            <span class="amount-text">Amount: </span>
            <input class="amount" type="text">
        </div>
        <button class="add-btn">Add Expense</button>
        <table>
            <tr>
                <th>Name</th>
                <th>Date</th>
                <th>Amount</th>
            </tr>
            <tr class="if-empty">
                <td colspan = "4">
                    <span  class="empty-text">No expenses added yet!</span>
                </td>
            </tr>
        </table>
    </div>
    <script src="main.js"></script>
</body>

使用顯示屬性方法

更換ifEmpty.remove()用ifEmpty.style.display = 'none隱藏它并更換table.appendChild(emptyMessage)與ifEmpty.style.display = 'table-row重新顯示它。

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

標籤：javascript html css

上一篇：如何將request-promise遷移到axios或fetch

下一篇：如何讓readline等待異步承諾？