0
我試圖使用Javascript動態地修改表格(HTML)中單元格的內容。使用Javascript函數編輯HTML表格中的單元格
我們有一個選擇輸入,當用戶改變選擇的值時,其他單元中的一些項目應該分別改變。
這是我的html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drug Shopping Cart</title>
<script type="text/javascript" src="drugShoppingCart.js"></script>
</head>
<body>
<h1 style="text-align:center">Drug shopping cart</h1>
<h2 style="text-align:center">Please enter your age & weight then choose what medicaments you want to buy to calculte the total price.</h2>
<div style="text-align:center">
<input type="text" value="Age" id="getAge" />
<input type="text" value="Wieght" id="getWeight" />
</div>
<br />
<div style="border:groove; border-color:#006; background-color:rgb(0,51,153); color:rgb(255,255,255)">
<table cellspacing="50" id="shopTable" align="center">
<th>Drug Name</th><th>Price</th><th>Amount</th><th>Allergic</th><th>Amount of drug per item</th><th>Daily dose</th>
</table>
<br />
<input type="button" value="Add a new item" onClick="addTable()">
<br />
</div>
<br />
</body>
</html>
,這是JavaScript:
// JavaScript Document
var price;
var price1=5;
var price2=10;
var price3=15;
var price4=20;
var i=0; //Global counter - counts the number of rows
var dropDown;
function selectChange(){
alert(dropDown.value); //keep a track if the event is working..
if(dropDown.value==2)
price=price2;
}
function addTable(){
i++;
var table=document.getElementById("shopTable");
{
var age=document.getElementById("getAge");
var weight=document.getElementById("getWeight");
var row = table.insertRow(1);
var cell1= row.insertCell(0);
var cell2= row.insertCell(1);
var cell3= row.insertCell(2);
var cell4= row.insertCell(3);
var cell5= row.insertCell(4);
var cell6= row.insertCell(5);
cell1.innerHTML= "<select id=\"selectMenu\" onchange=\"selectChange()\">" +
"<option value='1'>Paracetamol</option>" +
"<option value='2'>Ibuprofen</option>" +
"<option value='3'>Saxagliptin</option>"+
"<option value='4'>Liraglutide</option>"+
"</select>";
dropDown= document.getElementById("selectMenu");
cell2.innerHTML=price;
//cell3.innerHTML=""; //" <input type='text' id='amount' value='Enter the amount here' />";
//cell4.innerHTML="";
//cell5.innerHTML="";
//cell6.innerHTML="";
}
}
cell2.innerHTML
指的是全局變量的價格。通過使用onchange
事件更改此變量的值,沒有任何事情發生,並且它一直顯示undefined
。
你知道解決方案嗎?我應該有4個值取決於用戶的選擇。
Woww!這一個工作順利..我認爲我最大的錯誤是沒有宣佈cell2作爲一個全局變量。你剛纔提到的Array的思想要好得多!非常感謝您的幫助..您在這方面給了我很多幫助。 –