将HTML选择值添加到javascript表中

时间:2014-12-11 15:56:56

标签: javascript html

我正在尝试从HTML文档中获取多个用户输入,然后使用Javascript将该数据传输到表中。数字数据将传输没有问题,但下拉选择菜单已显示为未定义,我尝试了许多不同的解决方案,我在这里的问题,但没有一个产生任何结果。任何人都可以提供任何帮助将非常感激。这是相关的代码......

HTML

<form class="items" action="" method="post" name="items">
            <ul>

                <li>
                    <label>Paint:</label>
                    <select id="paintColour">
                        <option value="White" selected="selected">White</option>
                        <option value="Blue">Blue</option>
                        <option value="Beige">Beige</option>
                        <option value="Red">Red</option>
                        <option value="Yellow">Yellow</option>
                    </select>
                    <select id="paintType">
                        <option value="Gloss">Gloss</option>
                        <option value="Matte">Matte</option>
                        <option value="Emulsion">Emulsion</option>
                    </select>
                    <input type="number" name="quantity" value="0" size="2" id="paintVolume">
                    <input type="button" value="Add" id="addPaint" onclick="Javascript:addPaints()">
                </li>

的Javascript

function addPaints(){

var paintColour = document.getElementById("paintColour").selectedIndex;

var paintType = document.getElementById("paintType").selectedIndex;

var paintVolume = document.getElementById("paintVolume");
var tblPaint = document.getElementById("tblPaint");



var paintRowCount = tblPaint.rows.length;
var paintRow = tblPaint.insertRow(paintRowCount);

paintRow.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick=deletePaint(this) ">';
paintRow.insertCell(1).innerHTML = paintColour.value;
paintRow.insertCell(2).innerHTML = paintType.value;
paintRow.insertCell(3).innerHTML = paintVolume.value;
}


function deletePaint(obj){
var index = obj.parentNode.parentNode.rowIndex;
var tblPaint = document.getElementById("tblPaint");
tblPaint.deleteRow(index);
}

1 个答案:

答案 0 :(得分:1)

您选择select的问题是您正在选择索引,然后尝试获取值。而是选择元素并获得价值。

function addPaints(){

var paintColour = document.getElementById("paintColour");

var paintType = document.getElementById("paintType");

var paintVolume = document.getElementById("paintVolume");
var tblPaint = document.getElementById("tblPaint");



var paintRowCount = tblPaint.rows.length;
var paintRow = tblPaint.insertRow(paintRowCount);

paintRow.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick=deletePaint(this) ">';
paintRow.insertCell(1).innerHTML = paintColour.value;
paintRow.insertCell(2).innerHTML = paintType.value;
paintRow.insertCell(3).innerHTML = paintVolume.value;
}


function deletePaint(obj){
var index = obj.parentNode.parentNode.rowIndex;
var tblPaint = document.getElementById("tblPaint");
tblPaint.deleteRow(index);
}