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

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执行，在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>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-12-28 15:06:08

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-12-28 15:06:08

解决方案1
0 已采纳 2014-12-28 15:06:08