使用表單元素和PHP值添加新行

Question

我有一張表格，當按下按鈕時，它會添加一個新行。它是：

<table id='editTable' width='655' border='1'>"; 
<tr><th width='330' align='left'>Expense Description</th><th width='100'>Cost</th></tr> 

$result = mysqli_query($con,"SELECT ID,TASK_ID,EXPENSE_DESC,EXPENSE_COST FROM b_report_expense2 WHERE TASK_ID = $taskid AND REF = $referenceID"); 
while($row = mysqli_fetch_array($result)) 
{ 
$expenseDesc = $row['EXPENSE_DESC']; 
$expenseCost = $row['EXPENSE_COST']; 
$exID = $row['ID']; 
<tr><td><input type='hidden' name='ref[]' value='$exID' /><input type='text' name='expense[]' value='$expenseDesc'></td> 
<td><input type='text' name='expensecost[]' value='$expenseCost'></td></tr> 
} 

<tr><td colspan='2'><button class='no-style-button' type='button' onclick='displayResult2()'>Add Row</button><input type='submit' name='submit' value='submit'></td></tr></table> 

當添加新行按鈕被按下時，它會添加一個新的行，但它不會將$ exID識別爲循環中的值。 javascript：

function displayResult2() 
{ 
var table=document.getElementById("editTable"); 
var row=table.insertRow(1); 
var cell1=row.insertCell(0); 
var cell2=row.insertCell(1); 
cell1.innerHTML= "<input size='5' type='hidden' name='refID' value='$referenceID' style='padding:2px;'/><input type='text' name='expenseaddition[]' style='padding:2px;' size='80'>"; 
cell2.innerHTML="<input type='text' name='expensecostaddition[]' style='padding:2px;' size='6'>"; 
} 

新行被添加到表格頂部的其他行之上。現在的問題在於$ referenceID在JavaScript中沒有被識別。該頁面聲明它添加了新行，但它不能識別它。這個JavaScript被從外部文件調用到頁面，這是問題嗎？

您的幫助，將不勝感激。

Answer 1

問題是PHP是服務器端而JS是客戶端。這意味着JS在頁面被提供給用戶之後被執行。由於PHP變量只存在於服務器上，JS字面上將字符串插入$referenceID。

要解決這個問題，你可以的$referenceID值輸出到JS變種：

<script> 
var referenceID = <?php echo $referenceID?>; //If $referenceID isn't a numeric value, remember to use quotes (`'<?php echo $referenceID?>'`) 
</script> 
<!--Then include your JS--> 
<script src="location" type="text/javascript"></script> 

這樣，你就可以做得到referenceID：

cell1.innerHTML= "<input size='5' type='hidden' name='refID' value='"referenceID"' style='padding:2px;'/><input type='text' name='expenseaddition[]' style='padding:2px;' size='80'>";