Question

我试图动态地使用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个值，具体取决于用户的选择。

Answer 1

作业cell2.innerHTML=price;仅在addTable中执行，其中右侧最初未定义。它需要在事件处理程序中计算价格后执行。

有多种方法可以修复，代码可能应该重构（重写），但是一个相当小的（有点难看）修复是使cell2成为一个全局变量。

在下面的代码中，我只做了以下其他基本修复： 1）要分配价格，使用数组而不是每个价格的单个变量会更方便。 2）select元素通常应包含虚拟选项作为第一个;在这里，这可以防止第一种药物最初显示为已选择但未显示价格的情况。

＆＃13;

<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>

＆＃13;

使用Javascript函数在html中编辑表格的单元格

1 个答案: