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; ?>">