javascript將值傳遞到彈出頁面

Question

我有一個包含100行的訂單表。 對於每個按鈕，都有一個帶有彈出按鈕的按鈕，用戶可以在其中選擇要訂購的產品。

我已經修改了我在網上找到的javscript，它可以按照以下代碼運行。 我的問題是我有100行，每個產品的名稱分別為sku1，sku2，sku3 ... sku4，sku5。 我不想創建100個javascript代碼實例？

我正在尋找一種將輸入字段sku3的值傳遞給彈出窗口的方法，以便它知道將值發送回哪個字段。

任何幫助，將不勝感激。

我的主頁代碼是：（相關事件的代碼段-實際文檔中有100行）

<tr id="r1">  
    <td>
        <input size=10  type=number id=sku1 name=sku1>
        <img src=q.png border=0 onClick="window.open('popupselector.php','orderform','width=500,height=600');">
    </td>
    <td>
        <input type="number" name="qty1" id="qty1">
    </td>   
</tr>
<tr id="r2">  
    <td>
        <input size=10  type=number id=sku2 name=sku2>
        <img src=q.png border=0 onClick="window.open('popupselector.php','orderform','width=500,height=600');">
    </td>
    <td>
        <input type="number" name="qty2" id="qty2">
    </td>   
</tr>
<tr id="r3">  
    <td>
        <input size=10  type=number id=sku3 name=sku3>
        <img src=q.png border=0 onClick="window.open('popupselector.php','orderform','width=500,height=600');">
    </td>
    <td>
        <input type="number" name="qty3" id="qty3">
    </td>   
</tr>

popupselector.php的JavaScript代碼為：

<SCRIPT LANGUAGE="JavaScript">

function sendValue(s){
var selvalue = s.options[s.selectedIndex].value;
window.opener.document.orderform.sku1.value = selvalue;
window.close();
}

</script>
<form name=selectform>

<SELECT NAME=selectmenu size=30> 
<?=$options?> 
</SELECT> 

<input type=button value="Select" onClick="sendValue(this.form.selectmenu);">
</form>

在javascript具有sku1的地方，我希望它是一個變量，具體取決於用戶單擊的行：

window.opener.document.orderform.sku1.value = selvalue;

我不想將sku1，sku2，sku3硬編碼到這些頁面中，因為我需要100個popupselector.php頁面。

謝謝和問候，瑞安·史密斯

Answer 1

我認為您可以創建一個變量作為項目的id ，然后在循環中查詢它們。

function sendValue(s){
    for (var i = 1; i < 101; i++) {
        var selvalue = s.options[s.selectedIndex].value;
        var itemId = 'sku' + i;
        var item = document.getElementById(itemId).value = selvalue;
    }
    window.close();
}

如果selvalue在每個循環中均未更改，則可以將其移出循環

--更新以將ID從表單發送到javascript彈出窗口--您可以使用DOM訪問在單擊img之前的輸入的ID：

function sendValue(s){
    var inputField = s.previousSibling; // will be the space between <input> and <img>
    if (inputField.nodeName != 'INPUT') 
        inputField = inputField.previousSibling; // will be the <input> node

    // Here you can get id, name... attributes with: inputField.getAttribute('id'), inputField.getAttribute('name')
    window.close();
}

一些想法 ：如果表行是從PHP代碼生成的，為什么不直接將id插入到img標記中，然后將其返回到popupselector.php中

<img src=q.png border=0 onClick="window.open('popupselector.php?<?=$rowId ?>','orderform','width=500,height=600');">