添加新Activity行时保留原有输入内容的JavaScript问题求助

Hey there! Let's get that issue sorted where your existing activity input values get cleared when you click the "Add Activity" button.

The Root Cause #

The problem is in how you're updating the table: using tracklistTable.innerHTML += rewrites the entire table's HTML content from scratch. When the browser does this, it destroys all the existing input elements (and their entered values) and recreates them—so your filled-in data gets lost in the process.

The Solution #

Instead of using innerHTML, we'll build the new table row using DOM creation methods like document.createElement() and appendChild(). This way, we only add the new row without touching the existing ones, so your input values stay intact.

Here's the updated script portion of your code:

window.onload = function() {
    // Initialize the activityNumber
    var activityNumber = 6;
    // Select the add_activity button
    var addButton = document.getElementById("add_activity");
    // Select the table element
    var tracklistTable = document.getElementById("tracklist");

    // Attach handler to the button click event
    addButton.onclick = function() {
        // Create the new row
        const newRow = document.createElement('tr');

        // Create the first td with activity number
        const numberTd = document.createElement('td');
        numberTd.textContent = activityNumber;
        newRow.appendChild(numberTd);

        // Create the second td with Activity Log input
        const activityTd = document.createElement('td');
        activityTd.innerHTML = '<label>Activity Log: </label><br/><input type="text" name="actlog' + activityNumber + '" class="required">';
        newRow.appendChild(activityTd);

        // Create the third td with Time input
        const timeTd = document.createElement('td');
        timeTd.innerHTML = '<label>Time: </label><br/><input type="time" name="time' + activityNumber + '" class="required">';
        newRow.appendChild(timeTd);

        // Add the new row to the table
        tracklistTable.appendChild(newRow);

        // Increment the activityNumber
        activityNumber += 1;
    }
}

What Changed? #

• We build each part of the new row (<tr>, <td> elements) individually with document.createElement()
• We only append the new row to the existing table using appendChild(), which doesn't affect any existing rows or their input values
• We still use a bit of innerHTML for the label/input pairs inside the td elements since that's simpler, but since we're only applying it to the new td (not the whole table), it doesn't interfere with existing content

This approach keeps all your previously entered data intact while adding new rows exactly as you need.

内容的提问来源于stack exchange，提问作者kelrob-dev