gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:44:22 25 4
gpt4 key购买 nike

我正在尝试使用 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 个值。

最佳答案

赋值 cell2.innerHTML=price; 仅在 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 - 使用 Javascript 函数在 html 中编辑表格的单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27676854/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com