從下拉菜單中將內部HTML插入新的表格行

Question

當我單擊標記為add Row的按鈕時，效果很好，但是當我單擊標記為Assign的按鈕時，我希望它將選擇的變量分配到適當的行和單元格中，但由於某種原因，它僅更改第一行。 我對JavaScript有點陌生。

 function myFunction() { var table = document.getElementById("Table1"); var row = table.insertRow(2); var cell1 = row.insertCell(0); var cell2 = row.insertCell(0); var cell3 = row.insertCell(0); var cell4 = row.insertCell(0); var cell5 = row.insertCell(0); var cell6 = row.insertCell(0); cell6.innerHTML = ' <button onclick="myFunction1()"> Assign </button> '; cell5.innerHTML = " A "; cell4.innerHTML = " B "; cell3.innerHTML = ' <center id="demo1"> '; cell2.innerHTML = ' <center id="demo2"> '; cell1.innerHTML = ' <center id="demo3"> '; } function myFunction1() { var a = document.getElementById("select1"); var b = document.getElementById("select2"); var c = document.getElementById("select3"); var x1 = a.options[a.selectedIndex].text; var x2 = b.options[b.selectedIndex].text; var x3 = c.options[c.selectedIndex].text; document.getElementById("demo1").innerHTML = x1; document.getElementById("demo2").innerHTML = x2; document.getElementById("demo3").innerHTML = x3;} 

 table, td { border: 1px solid black; } 

 <p>Click the button to add a new row at the first position of the table and then add cells and content.</p> <h5> <b> SELECT SORT VARIABLES FOR STRATUM </b></h5> <h1> </h1> <div class="unselected-field" style="display: inline-block; position: left;" > <h1> </h1> <span> SORT VARIABLE 1: </span> <select id="select1" name="SORTONE" value="EMPLOYMENT"> <option> EMPLOYMENT </option> <option> WAGES </option> </select> <h1> </h1> <span>SORT VARIABLE 2: </span> <select id="select2" name="SORTTWO" value="NONE"> <option> NONE </option> <option> EMPLOYMENT </option> <option> WAGES </option> </select> <h1></h1> <span>SORT VARIABLE 3: </span> <select id="select3" name="SORTTHREE" value="NONE"> <option> NONE </option> <option> EMPLOYMENT </option> <option> WAGES </option> </select> <h1></h1> <table id="Table1" align="right" style="margin:2% 10% auto;"> <tr> <th bgcolor="grey"> ASSIGN </th> <th bgcolor="grey"> SS </th> <th bgcolor="grey"> DESCRIPTION </th> <th bgcolor="grey"> SORT ORDER 1 </th> <th bgcolor="grey"> SORT ORDER 2 </th> <th bgcolor="grey" > SORT ORDER 3 </th> </tr> <tr><td> <button onclick="myFunction1()"> Assign </button> </td> <td><center> -- </center> </td> <td> DEFAULT SINGLE </td> <td> <center id="demo1"> </td> <td> <center id="demo2"> </td> <td> <center id="demo3"> </td> </tr> </table> <br> <button onclick="myFunction()"> Add New Row </button> 

Answer 1

根據id屬性的文檔：

id全局屬性定義一個唯一標識符（ID），該標識符在整個文檔中必須是唯一的。 其目的是在鏈接（使用片段標識符），腳本或樣式（使用CSS）時標識元素。 ^1個

因此，每個元素都需要具有唯一的id屬性。 一種解決方案是利用class屬性而不是id屬性。 所以像這樣的行：

 <td> <center id="demo1"> </td> <td> <center id="demo2"> </td> <td> <center id="demo3"> </td> 

像這樣獲取更新：

<td> <center class="demo1"> </td>
<td> <center class="demo2"> </td> 
<td> <center class="demo3"> </td>

同樣，在函數myFunction()中添加了新行：

cell3.innerHTML = ' <center class="demo1"> ';
cell2.innerHTML = ' <center class="demo2"> ';
cell1.innerHTML = ' <center class="demo3"> ';

然后將點擊處理程序中的事件參數傳遞給function1：

<button onclick="myFunction1(event)"> Assign </button>

同樣，在添加新行時：

cell6.innerHTML = ' <button onclick="myFunction1(event)"> Assign </button> ';

並在該函數參數中接受它：

function myFunction1(clickEvent) { 

然后使用它來查找包含標記為Assign的按鈕的行：

var target = clickEvent.target;
//ascend up the DOM-tree until we find the table row
while (target.tagName.toUpperCase() != "TR") {
    target = target.parentNode;
}

然后，利用getElementsByClassName（） （返回一個數組，因此取第一個元素）而不是getElementById（）來用類名更新元素。

target.getElementsByClassName("demo1")[0].innerHTML = x1;
target.getElementsByClassName("demo2")[0].innerHTML = x2;
target.getElementsByClassName("demo3")[0].innerHTML = x3;

展開下面的代碼片段進行演示：

 function myFunction() { var table = document.getElementById("Table1"); var row = table.insertRow(2); var cell1 = row.insertCell(0); var cell2 = row.insertCell(0); var cell3 = row.insertCell(0); var cell4 = row.insertCell(0); var cell5 = row.insertCell(0); var cell6 = row.insertCell(0); cell6.innerHTML = ' <button onclick="myFunction1(event)"> Assign </button> '; cell5.innerHTML = " A "; cell4.innerHTML = " B "; cell3.innerHTML = ' <center class="demo1"> '; cell2.innerHTML = ' <center class="demo2"> '; cell1.innerHTML = ' <center class="demo3"> '; } function myFunction1(clickEvent) { var target = clickEvent.target; while (target.tagName.toUpperCase() != "TR") { target = target.parentNode; } var a = document.getElementById("select1"); var b = document.getElementById("select2"); var c = document.getElementById("select3"); var x1 = a.options[a.selectedIndex].text; var x2 = b.options[b.selectedIndex].text; var x3 = c.options[c.selectedIndex].text; target.getElementsByClassName("demo1")[0].innerHTML = x1; target.getElementsByClassName("demo2")[0].innerHTML = x2; target.getElementsByClassName("demo3")[0].innerHTML = x3; } 

 table, td { border: 1px solid black; } 

 <p>Click the button to add a new row at the first position of the table and then add cells and content.</p> <h5> <b> SELECT SORT VARIABLES FOR STRATUM </b></h5> <h1> </h1> <div class="unselected-field" style="display: inline-block; position: left;"> <h1> </h1> <span> SORT VARIABLE 1: </span> <select id="select1" name="SORTONE" value="EMPLOYMENT"> <option> EMPLOYMENT </option> <option> WAGES </option> </select> <h1> </h1> <span>SORT VARIABLE 2: </span> <select id="select2" name="SORTTWO" value="NONE"> <option> NONE </option> <option> EMPLOYMENT </option> <option> WAGES </option> </select> <h1></h1> <span>SORT VARIABLE 3: </span> <select id="select3" name="SORTTHREE" value="NONE"> <option> NONE </option> <option> EMPLOYMENT </option> <option> WAGES </option> </select> <h1></h1> <table id="Table1" align="right" style="margin:2% 10% auto;"> <tr> <th bgcolor="grey"> ASSIGN </th> <th bgcolor="grey"> SS </th> <th bgcolor="grey"> DESCRIPTION </th> <th bgcolor="grey"> SORT ORDER 1 </th> <th bgcolor="grey"> SORT ORDER 2 </th> <th bgcolor="grey"> SORT ORDER 3 </th> </tr> <tr> <td> <button onclick="myFunction1(event)"> Assign </button> </td> <td> <center> -- </center> </td> <td> DEFAULT SINGLE </td> <td> <center class="demo1"> </td> <td> <center class="demo2"> </td> <td> <center class="demo3"> </td> </tr> </table> <br> <button onclick="myFunction()"> Add New Row </button> 

---

¹ _{https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/id}