使用Javascript函數編輯HTML表格中的單元格

我試圖使用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個值取決於用戶的選擇。

來源

2014-12-28 tugce kahraman

指定cell2.innerHTML=price;僅在addTable中執行，其中右側最初未定義。它需要在計算價格後在事件處理程序中執行。

有各種方法可以修復，代碼應該可能被重構（重寫），但是一個相當微小（並且有點難看）的修復方法是使cell2成爲一個全局變量。

在下面的代碼中，我只做了以下其他基本修正： 1）要分配價格，對每個價格使用數組而不是單個變量要方便得多。 2）A 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>

來源

2014-12-28 15:06:08

Woww！這一個工作順利..我認爲我最大的錯誤是沒有宣佈cell2作爲一個全局變量。你剛纔提到的Array的思想要好得多！非常感謝您的幫助..您在這方面給了我很多幫助。 –

使用Javascript函數編輯HTML表格中的單元格

回答

相關問題