Javascript從php變量定義getElementById（）？

Question

我有一個運輸模塊，我正在嘗試更新。我希望能夠爲我的php表格/表格中的每個行項目添加行。最終會發生的是，按需添加/刪除行按鈕顯示每個訂單項，但僅影響第一個訂單項。如果我將行添加到訂單項1，則會正確添加一行。但是，如果我爲行項目2添加一行，它實際上也會爲行項目1添加一行。如果我嘗試爲訂單項3添加一行，它會再次爲項目1添加一行。我希望能夠爲每個項目添加行。

我在php中調用了一個javascript函數的while循環。問題是JavaScript中的一個變量需要一個ID。儘管經歷了我的循環，ID永遠不會改變，因此我的JavaScript只適用於單個循環，這不是我想要的輸出。我想如果我可以讓JavaScript從PHP獲得一個包含我的ID的變量，我可以通過我的循環獲取每次通過的javascript運行。

這裏是我的javascript：

<SCRIPT language="javascript"> 
     // Last updated 2006-02-21 
function addRowToTable() 
{ 
    var tbl = document.getElementById('tblSample'); 
    var lastRow = tbl.rows.length; 
    // if there's no header row in the table, then iteration = lastRow + 1 
    var iteration = lastRow + 1; 
    var row = tbl.insertRow(lastRow); 

    // Item cell 
    var cellLeft = row.insertCell(0); 
    var textNode = document.createTextNode(iteration); 
    cellLeft.appendChild(textNode); 

    // Cust PN cell 
    var cellBox_Num = row.insertCell(1); 
    var el = document.createElement('input'); 
    el.type = 'text'; 
    el.name = 'Box_Num[]'; 
    el.id = 'Box_Num' + iteration; 
    el.size = 18; 

    el.onkeypress = keyPressTest; 
    cellBox_Num.appendChild(el); 
} 
function keyPressTest(e, obj) 
{ 
    var validateChkb = document.getElementById('chkValidateOnKeyPress'); 
    if (validateChkb.checked) { 
    var displayObj = document.getElementById('spanOutput'); 
    var key; 
    if(window.event) { 
     key = window.event.keyCode; 
    } 
    else if(e.which) { 
     key = e.which; 
    } 
    var objId; 
    if (obj != null) { 
     objId = obj.id; 
    } else { 
     objId = this.id; 
    } 
    displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key); 
    } 
} 
function removeRowFromTable() 
{ 
    var tbl = document.getElementById('tblSample'); 
    var lastRow = tbl.rows.length; 
    if (lastRow > 1) tbl.deleteRow(lastRow - 1); 
} 

    </SCRIPT> 

這裏是我的循環：

<?php 

$i=0; 
$n=1; 

while($i < $num1) { 

$SO_Line_Item=mysql_result($result1,$i,"SO_Line_Item"); 
$Cust_PN=mysql_result($result1,$i,"Cust_PN"); 
$Cust_PN_Rev=mysql_result($result1,$i,"Cust_PN_Rev"); 
$Description=mysql_result($result1,$i,"Description"); 
$SOItemQty=mysql_result($result1,$i,"Qty"); 
$UOM=mysql_result($result1,$i,"UOM"); 
$Program=mysql_result($result1,$i,"Program"); 
$Required_Date=mysql_result($result1,$i,"Required_Date"); 
$SOItemShipQty=mysql_result($result2,$i,"count(E9_SN)"); 

?> 
<tr> 
<td width="3px" valign="top" align="center"><?php 
echo "$SO_Line_Item";?> 
</td> 
<td nowrap="nowrap" valign="top" align="center"><?php 
echo "$Cust_PN - $Cust_PN_Rev";?> 
</td> 
<td nowrap="nowrap" valign="top" align="center"><?php 
echo "$Description";?> 
</td> 
<td nowrap="nowrap" valign="top" align="center"> 
<?php 
echo "$SOItemQty";?> 
</td> 
<td nowrap="nowrap" valign="top" align="center"> 
<?php 
echo "$UOM";?> 
</td> 
<td nowrap="nowrap" valign="top" align="center"> 
<?php 
echo $SOItemQty - $SOItemShipQty;?> 
</td> 
<td nowrap="nowrap" valign="top" align="center"> 
<input size="2" align="right" type="text" name="Qty"> 
</td> 
<td nowrap="nowrap" valign="top" align="center"> 
<?php 
echo "$Required_Date";?> 
</td> 
<td nowrap="nowrap" valign="top" align="center"> 
<?php 
echo "$Program";?> 
</td> 
</tr> 

//HERE IS WHERE THINGS GO SOUTH. I'd LIKE TO BE ABLE TO ADD A LINE FOR EACH PART 
//NUMBER... WHAT HAPPENS IS THIS IS ALWAYS RUN FOR THE SAME ID AND WHILE THE FORM 
//DISPLAYS PROPERLY THE ADD AND DELETE ALWAYS MODIFY THE FIRST PART 

<tr> 
<td colspan="10"> 
<p> 
<input type="button" value="Add" onclick="addRowToTable();" /> 
<input type="button" value="Remove" onclick="removeRowFromTable();" /> 
<!-- 
<input type="button" value="Submit" onclick="validateRow(this.form);" /> 
<input type="checkbox" id="chkValidate" /> Validate Submit 
--> 
<b><font color="RED">Add/Remove Box Number For This Line Item</font></b> 
</p> 
</td> 
</tr> 

<tr> 
<td></td> 
<td> 
<table id="tblSample"> 
<tr> 
    <td>1</td> 
    <td><input type="text" name="Box_Num[]" 
    id="Box_Num1" size="18" onkeypress="keyPressTest(event, this);" /></td> 

    </tr> 
</table> 
</td> 
</tr> 
<?php 



$i++; 
} 

在此先感謝！

Answer 1

只需將表id添加到行添加和刪除javascript函數中即可。你可以改變這兩個函數的第一對夫婦行是這樣的：

function addRowToTable(tableID) 
{ 
    var tbl = document.getElementById('tblSample_' + tableID); 
    ... 
} 

您也將使用PHP計數器表計數器的值傳遞給JavaScript函數這樣

<input type="button" value="Add" onclick="addRowToTable('<?php echo $i; ?>');" /> 
<input type="button" value="Remove" onclick="removeRowFromTable('<?php echo $i; ?>');" /> 

，並添加表格ID的計數器是這樣的。

<table id="tblSample_<?php echo $i; ?>">