編輯、保存、向動態表添加功能

Question

我正在嘗試使用 javascript 向動態表中的一列（名稱列）添加編輯、保存、添加行功能，這里是代碼片段（代碼鏈接，這是可編輯的）： https : //www.jdoodle.com/小時/1IU

我的代碼目前存在的問題：

1. 每當我編輯任何行時，只會編輯第一行。
2. 編輯后保存消失。

 const is_weekend = function (dt) { if (dt.getDay() == 6 || dt.getDay() == 0) return true; else false; }; var array = ["Ram", "Shyam"]; var currArrIndex = 0; var start = new Date(); var end = new Date("2021-10-02"); var rows = Array(); var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ]; var currDate = start; //console.log(currDate); while (currDate <= end) { //alert(currDate); //console.log(currDate); if (is_weekend(currDate)) { //if the date is a weekend date let dayName = days[currDate.getDay()]; //get week day of the current date let rowElement = { name: array[currArrIndex], //set one of the names from array from first to last day: dayName, date: currDate.toLocaleDateString(), }; rows.push(rowElement); if (currDate.getDay() == 0) { //change after every week currArrIndex++; //current index array name is already assigned to last weekend, hence move to next array name currArrIndex %= array.length; //if current index goes beyond array length resign to 0 } } var newDate = currDate.setDate(currDate.getDate() + 1); currDate = new Date(newDate); } var html = "<table border='1|1'>"; let htmlElementBoot = ` <div class="container"> <div class="col-md12"> <div class="panel panel-default"> <table class="table table-condensed table-striped"> <tbody> <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle"> <td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td> <td>Orbital</td> </tr> <tr> <td colspan="12" class="hiddenRow"> <div class="accordian-body collapse" id="demo3"> <table class="table table-striped"> <thead> <tr class="info"> <th>Name</th> <th>Day</th> <th>Date</th> <th>Action</th> </tr> </thead> <tbody> `; let htmlElementCol = ` <tr> <td><b>Name</b></td> <td><b>Day</b></td> <td><b>Date</b></td> </tr>`; html += htmlElementBoot; //html+=htmlElementCol; for (var i = 0; i < rows.length; i++) { let htmlElement = ` <tr> <td id="name_row">${rows[i].name}</td> <td id="dayRow">${rows[i].day}</td> <td id="dateRow">${rows[i].date}</td> <td> <input type="button" id="edit_button" value="Edit" class="edit" onclick="edit_row()"> <input type="button" id="save_button" value="Save" class="save" onclick="save_row()"> </td> </tr>`; html += htmlElement; } html += "</table>"; document.getElementById("box").innerHTML = html; function edit_row() { document.getElementById("edit_button").style.display = "none"; var name = document.getElementById("name_row"); var name_data = name.innerHTML; name.innerHTML = "<input type='text' id='name_text" + "' value='" + name_data + "'>"; } function save_row() { var name_val = document.getElementById("name_text").value; document.getElementById("name_row").innerHTML = name_val; document.getElementById("edit_button").style.display = "block"; document.getElementById("save_button").style.display = "none"; }

 <div id="box"></div>

Answer 1

就我所知，我認為您可以通過將event (click) 與querySelector和一些兄弟選擇器結合使用來實現您的目標。 所有重復的 IDS 都被刪除了——一些改變了dataset屬性以幫助識別。 我希望以下是有意義的/。

 const is_weekend = function (dt) { if (dt.getDay() == 6 || dt.getDay() == 0) return true; else false; }; var array = ["Ram", "Shyam"]; var currArrIndex = 0; var start = new Date(); var end = new Date("2021-10-02"); var rows = Array(); var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ]; var currDate = start; while (currDate <= end) { if (is_weekend(currDate)) { //if the date is a weekend date let dayName = days[currDate.getDay()]; //get week day of the current date let rowElement = { name: array[currArrIndex], //set one of the names from array from first to last day: dayName, date: currDate.toLocaleDateString(), }; rows.push(rowElement); if (currDate.getDay() == 0) { //change after every week currArrIndex++; //current index array name is already assigned to last weekend, hence move to next array name currArrIndex %= array.length; //if current index goes beyond array length resign to 0 } } var newDate = currDate.setDate(currDate.getDate() + 1); currDate = new Date(newDate); } var html = "<table border='1'>"; let htmlElementBoot = ` <div class="container"> <div class="col-md12"> <div class="panel panel-default"> <table class="table table-condensed table-striped"> <tbody> <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle"> <td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td> <td>Orbital</td> </tr> <tr> <td colspan="12" class="hiddenRow"> <div class="accordian-body collapse" id="demo3"> <table class="table table-striped"> <thead> <tr class="info"> <th>Name</th> <th>Day</th> <th>Date</th> <th>Action</th> </tr> </thead> <tbody>`; let htmlElementCol = ` <tr> <td><b>Name</b></td> <td><b>Day</b></td> <td><b>Date</b></td> </tr>`; html += htmlElementBoot; for (var i = 0; i < rows.length; i++) { let htmlElement = ` <tr> <td data-id="name_row">${rows[i].name}</td> <td data-id="dayRow">${rows[i].day}</td> <td data-id="dateRow">${rows[i].date}</td> <td> <input type="button" value="Edit" class="edit" onclick="edit_row(event)"> <input type="button" value="Save" class="save" onclick="save_row(event)"> </td> </tr>`; html += htmlElement; } html += "</table>"; document.getElementById("box").innerHTML = html; function edit_row(e) { e.target.style.display='none'; e.target.nextElementSibling.style.display = "block"; var name = e.target.parentNode.parentNode.querySelector('[data-id="name_row"]'); var data = name.innerHTML; name.innerHTML = "<input type='text' name='name_text' value='" + data + "'>"; } function save_row(e) { var name = e.target.parentNode.parentNode.querySelector('input[name="name_text"]'); e.target.parentNode.parentNode.querySelector('[data-id="name_row"]').innerHTML = name.value; e.target.previousElementSibling.style.display = "block"; e.target.style.display='none'; }

 .save{display:none}

 <div id="box"></div>

Answer 2

您需要像這樣將唯一 ID 添加到您的可編輯標簽中： <td id="name_row${i}">${rows[i].name}</td>並編輯然后保存該標簽具有相應的 ID，例如這： onclick="edit_row(${i})"

完整代碼：

 const is_weekend = function (dt) { if (dt.getDay() == 6 || dt.getDay() == 0) return true; else false; }; var array = ["Ram", "Shyam"]; var currArrIndex = 0; var start = new Date(); var end = new Date("2021-10-02"); var rows = Array(); var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ]; var currDate = start; //console.log(currDate); while (currDate <= end) { //alert(currDate); //console.log(currDate); if (is_weekend(currDate)) { //if the date is a weekend date let dayName = days[currDate.getDay()]; //get week day of the current date let rowElement = { name: array[currArrIndex], //set one of the names from array from first to last day: dayName, date: currDate.toLocaleDateString(), }; rows.push(rowElement); if (currDate.getDay() == 0) { //change after every week currArrIndex++; //current index array name is already assigned to last weekend, hence move to next array name currArrIndex %= array.length; //if current index goes beyond array length resign to 0 } } var newDate = currDate.setDate(currDate.getDate() + 1); currDate = new Date(newDate); } var html = "<table border='1|1'>"; let htmlElementBoot = ` <div class="container"> <div class="col-md12"> <div class="panel panel-default"> <table class="table table-condensed table-striped"> <tbody> <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle"> <td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td> <td>Orbital</td> </tr> <tr> <td colspan="12" class="hiddenRow"> <div class="accordian-body collapse" id="demo3"> <table class="table table-striped"> <thead> <tr class="info"> <th>Name</th> <th>Day</th> <th>Date</th> <th>Action</th> </tr> </thead> <tbody> `; let htmlElementCol = ` <tr> <td><b>Name</b></td> <td><b>Day</b></td> <td><b>Date</b></td> </tr>`; html += htmlElementBoot; //html+=htmlElementCol; for (var i = 0; i < rows.length; i++) { let htmlElement = ` <tr> <td id="name_row${i}">${rows[i].name}</td> <td id="dayRow">${rows[i].day}</td> <td id="dateRow">${rows[i].date}</td> <td> <input type="button" id="edit_button${i}" value="Edit" class="edit" onclick="edit_row(${i})"> <input type="button" style="display:none" id="save_button${i}" value="Save" class="save" onclick="save_row(${i})"> </td> </tr>`; html += htmlElement; } html += "</table>"; document.getElementById("box").innerHTML = html; function edit_row(i) { document.getElementById("edit_button" + i).style.display = "none"; var name = document.getElementById("name_row" + i); var name_data = name.innerHTML; name.innerHTML = "<input type='text' id='name_text" + i + "' value='" + name_data + "'>"; document.getElementById("save_button" + i).style.display = "block"; } function save_row(i) { var name_val = document.getElementById("name_text" + i).value; document.getElementById("name_row" + i).innerHTML = name_val; document.getElementById("edit_button" + i).style.display = "block"; document.getElementById("save_button" + i).style.display = "none"; }

 <div id="box"></div>