将下拉列表添加到按钮上的新行上 [英] Adding dropdown list to new row on button click

问题描述

我正在尝试在按钮点击上添加一个新行。在我的新行中，我试图添加一个Textbox和一个下拉列表。我不知道我在做错什么？有人可以帮我解决这个问题。提前致谢。

HTML

 < table> 
< tr> 
< td>< input type =textname =data1value =TempData/>< / td> 
< td>< button type =buttononClick =addRow（this）>添加< / button>< / td> 
< / tr> 
 
< / table> 
  

Javascript功能：

  function addRow（btn）{
 var parentRow = btn.parentNode.parentNode; 
 var table = parentRow.parentNode; 
 var rowCount = table.rows.length; 
 
 var row = table.insertRow（rowCount）; 
 
 var cell1 = row.insertCell（0）; 
 var element1 = document.createElement（input）; 
 element1.type =text; 
 cell1.appendChild（element1）; 
 
 
 var cell3 = row.insertCell（1）; 
 var element2 = document.createElement（input）; 
 element2.type =select; 
 var option1 = document.createElement（option）; 
 option1.innerHTML =Option1; 
 option1.value =1; 
 element2.add（option1，null）; 
 var option2 = document.createElement（option）; 
 option2.innerHTML =Option2; 
 option2.value =2; 
 element2.add（option2，null）; 
 cell3.appendChild（element2）; 
} 
  

JSFiddle
http://jsfiddle.net/wAyhm/2/

解决方案

  function addRow（btn）{
 var parentRow = btn.parentNode.parentNode; 
 var table = parentRow.parentNode; 
 var rowCount = table.rows.length; 
 var row = table.insertRow（rowCount）; 
 var cell1 = row.insertCell（0）; 
 var element1 = document.createElement（input）; 
 element1.type =text; 
 cell1.appendChild（element1）; 
 var cell3 = row.insertCell（1）; 
 // var element2 = document.createElement（input）; 
 var element2 = document.createElement（select）; 
 //element2.type =select; 
 var option1 = document.createElement（option）; 
 option1.innerHTML =Option1; 
 option1.value =1; 
 element2.add（option1，null）; 
 var option2 = document.createElement（option）; 
 option2.innerHTML =Option2; 
 option2.value =2; 
 element2.add（option2，null）; 
 cell3.appendChild（element2）; 
} 
  

更新小提琴：

问题是与注释行。一个选择元素不是输入元素。你不能有一个< input type =select/> 。由于 HTMLInputElement 没有添加方法， addRow 抛出一个例外。

I am trying to add a new row on button click. In my new row I am trying to add a Textbox and a dropdown list. I don't know what I am doing wrong ? Can anybody help me with this problem. Thanks in advance.

HTML

<table>
        <tr>
            <td><input type="text" name="data1" value="TempData" /></td>
              <td><button type="button" onClick ="addRow(this)">Add</button></td>
         </tr>

 </table>

Javascript function:

function addRow(btn) {         
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var rowCount = table.rows.length;

    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    cell1.appendChild(element1);


    var cell3 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "select";
    var option1 = document.createElement("option");
    option1.innerHTML = "Option1";
    option1.value = "1";
    element2.add(option1, null);
    var option2 = document.createElement("option");
    option2.innerHTML = "Option2";
    option2.value = "2";
    element2.add(option2, null);
    cell3.appendChild(element2);
}

JSFiddle http://jsfiddle.net/wAyhm/2/

解决方案

function addRow(btn) {         
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    cell1.appendChild(element1);
    var cell3 = row.insertCell(1);
    //var element2 = document.createElement("input");
    var element2 = document.createElement("select");
    //element2.type = "select";
    var option1 = document.createElement("option");
    option1.innerHTML = "Option1";
    option1.value = "1";
    element2.add(option1, null);
    var option2 = document.createElement("option");
    option2.innerHTML = "Option2";
    option2.value = "2";
    element2.add(option2, null);
    cell3.appendChild(element2);
}

Updated Fiddle:

Problem was with the commented lines. A select element isn't an input element. You can't have a <input type="select"/>. Since an HTMLInputElement doesn't have an add method, addRow threw an exception.

这篇关于将下拉列表添加到按钮上的新行上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！