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

Question

I'm trying to modify the content of a cell in a table (HTML) using Javascript dynamically. 我正在尝试使用Javascript动态修改表（HTML）中单元格的内容。

We have a select input, and when the user change the value of the selection, some items in the other cells should change respectively. 我们有一个选择输入，当用户更改选择的值时，其他单元格中的某些项目应分别更改。

This is my html code: 这是我的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>

and this is the Javascript: 这是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 refers to the global variable price. cell2.innerHTML是指全局可变价格。 By changing the value of this variable using the onchange event, nothing is happening and it keeps showing undefined . 通过使用onchange事件更改此变量的值，什么都没有发生，并且始终显示undefined 。

Do you know the solution? 您知道解决方案吗？ I should have 4 values depending on the user selection. 我应该有4个值，具体取决于用户选择。

Answer 1

The assignment cell2.innerHTML=price; 分配cell2.innerHTML=price; is executed only in the addTable , where the right hand side is initially undefined. 仅在addTable执行，在addTable中最初未定义右侧。 It needs to be executed after computing the price, in the event handler. 它需要在计算价格后在事件处理程序中执行。

There are various ways to fix, and the code should probably be refactored (rewritten), but a rather minimal (and somewhat ugly) fix is to make cell2 a global variable. 修复的方法有很多种，可能应该重构（重写）代码，但是一个很小的（有点难看）的修复是使cell2成为全局变量。

In the following code, I have made just the following other basic fixes: 1) To assign the price, it is much more convenient to use an array rather than individual variables for each price. 在以下代码中，我仅作了以下其他基本修复：1）要分配价格，对每个价格使用数组而不是单个变量要方便得多。 2) A select element should normally contain a dummy option as the first one; 2） select元素通常应包含一个虚拟选项作为第一个选项； here this prevents a situation where the first drug initially appears as selected but no price is shown. 这可以防止出现第一种药物最初显示为选定但未显示价格的情况。

 <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