使用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表格中的单元格

回答

相关问题