[英]Editing cells of a table in html using Javascript function
我正在嘗試使用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個值,具體取決於用戶選擇。
分配cell2.innerHTML=price;
僅在addTable
執行,在addTable
中最初未定義右側。 它需要在計算價格后在事件處理程序中執行。
修復的方法有很多種,可能應該重構(重寫)代碼,但是一個很小的(有點難看)的修復是使cell2
成為全局變量。
在以下代碼中,我僅作了以下其他基本修復:1)要分配價格,對每個價格使用數組而不是單個變量要方便得多。 2) select
元素通常應包含一個虛擬選項作為第一個選項; 這可以防止出現第一種葯物最初顯示為選定但未顯示價格的情況。
<script type="text/javascript" > var prices = ['', 5, 10, 15, 20]; var i=0; //Global counter - counts the number of rows var cell2; var dropDown; function selectChange(selection) { cell2.innerHTML = prices[selection.selectedIndex]; } 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); 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(this)\\">" + "<option value=''>Select a drug:</option>" + "<option value='1'>Paracetamol</option>" + "<option value='2'>Ibuprofen</option>" + "<option value='3'>Saxagliptin</option>"+ "<option value='4'>Liraglutide</option>"+ "</select>"; } } </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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.