将内部HTML从下拉菜单插入新表行

时间：2017-08-22 18:22:03

标签： javascript html dom

当我点击标有添加行的按钮时效果很好，但当我点击标有分配的按钮时，我希望它将所选的变量分配到适当的行和单元格但由于某种原因它只更改顶行。我在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>

1 个答案:

答案 0 :(得分：0)

根据id属性的文档：

  

id 全局属性定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符），脚本或样式（使用CSS）时识别元素。 1

因此每个元素都需要具有唯一的 id 属性。一种解决方案是使用类属性而不是 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"> ';

然后将click处理程序中的事件参数传递给function1：

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

同样在添加新行时：

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

并在函数参数中接受它：

function myFunction1(clickEvent) {

然后使用它来查找包含标有分配的按钮的行：

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>

1 <子> https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

相关问题
最新问题