动态输入表:由于输入对象的未定义长度,无法找到选项ID

时间:2017-08-18 21:04:55

标签: javascript html

嘿我正在尝试创建一个动态表,我无法读取列表中选项的长度。我是新手,所以我觉得我错过了一些简单的东西,但由于某种原因,我在网上找到的任何东西都不适用于我,或者有我不使用的JQuery东西,现在也不会使用。请只在常规javascript中回答。

<form action="/HTMLtoPDF.php" method="post">
<datalist id="PartNum">
    <select id="PartNum2">
        <option value = "929_460MHz" class = "PgrSys" id = "Apollo Gold" >Apollo Gold</option>
        <option value = "0100-2701" class = "PgrSys" id = "SPS-5v9S" selected = "selected">SPS-5v9S</option>
        <option value = "PGRM" id = "924/Gold/Pilot/TP-200 Programmer">924/Gold/Pilot/TP-200 Programmer</option>
    </select>
</datalist>
<input type="button" name="LineButton" value="Add Line Item" onClick="NewLineItem()"> &emsp;<input type="button" name="LineButton2" value="Remove Line Item" onClick="RemoveLineItem()"><br><br>

<div id="Line">

    <table style="width: 60%;" border = "2" id="order">
        <tbody>
            <tr>
                <td>Line Item</td>
                <td>Qty.</td>
                <td>Part Num.</td>
                <td>Product</td>
                <td>Comments/Customizations</td>
                <td>Extra Fields</td>
            </tr>
        </tbody>
    </table>

</div>

<br><br><input type = "submit">


<script>

var LineItemId = 0;

function getComboA(selectObject) {
var opt;
for ( var i = 0, len = selectObject.options.length; i < len; i++ ) {
    opt = selectObject.options[i];
    if ( opt.selected === true ) {
        break;
    }
}
console.debug(opt)
return opt;
}   

function NewLineItem() {
LineItemId++;
var table = document.getElementById("order");
var row = table.insertRow(-1);
var LineId = row.insertCell(0);
var Qty = row.insertCell(1);
var QtyE = document.createElement("input");
QtyE.type = "text";
QtyE.name="qty" + LineItemId.toString();
var Part = row.insertCell(2);
var PartE = document.createElement("input");
PartE.type = "text";
PartE.setAttribute("list", "PartNum");
PartE.name = "part" + LineItemId.toString();
PartE.id = "part" + LineItemId.toString();
PartE.setAttribute("onblur", "ProductText(" + LineItemId.toString() + ", getComboA(this) )");
var Product = row.insertCell(3);
var Cust = row.insertCell(4);
var CustE = document.createElement("input");
CustE.type = "text";
CustE.name = "cust" + LineItemId.toString();
var Extra = row.insertCell(5);
LineId.innerHTML = LineItemId;
Qty.appendChild(QtyE);
Part.appendChild(PartE);
Product.innerHTML = "";
Cust.appendChild(CustE);

}

function ProductText(x,y) {
var table = document.getElementById("order");
var cell = table.rows[x].cells[3];
cell.innerHTML = y.id;
}

function RemoveLineItem() {

if(LineItemId > 0){
document.getElementById("order").deleteRow(-1);
LineItemId--;
    }
else {

}
}</script>

</form>

记住没有JQuery我现在没时间学习它。

1 个答案:

答案 0 :(得分:1)

嘿我发现我试图找到错误变量的长度抱歉。以下是我改为的答案:

function getComboA(selectObject) {
var data = document.getElementById("PartNum2");
var value2 = selectObject.value;  
var opt;
var opt2; 
for ( var i = 0, len = data.options.length; i < len; i++ ) {
opt = data.options[i].value;
if ( opt == value2 ) {
    opt2 = data.options[i].id;
    return opt2;
    break;
}
}
}