嗨我有一张桌子,我希望在第二行“a2”的第一个单元格中显示下拉列表中所选数字的总数+第一行“a1”中的数字。我怎样才能做到这一点?现在我已经向我展示了从下拉列表中选择的数字。另外如何使数字与数字相加并显示总数?
function myFunction() {
var month = document.getElementById("drop");
document.getElementById("a2").innerHTML = drop.options[drop.selectedIndex].text;
}
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th, tr{
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
</style>
</head>
<body>
<form>
Number:
<select id="drop" onchange ="myFunction()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
<br><br>
<table>
<tr>
<tr>
<th id="a1">1</th>
<th id="b1">2</th>
<th id="c1">3</th>
<th id="d1">4</th>
<th id="e1">5</th>
<th id="f1">6</th>
<th id="g1">7</th>
<th id="h1">8</th>
<th id="i1">9</th>
<th id="j1">10</th>
<th id="k1">11</th>
<th id="l1">12</th>
<th id="m1">13</th>
<th id="n1">14</th>
<th id="o1">15</th>
<th id="p1">16</th>
<th id="q1">17</th>
<th id="r1">18</th>
<th id="s1">19</th>
<th id="t1">20</th>
<th id="u1">21</th>
<th id="v1">22</th>
<th id="w1">23</th>
<th id="x1">24</th>
<th id="y1">25</th>
<th id="z1">26</th>
<th id="aa1">27</th>
<th id="ab1">28</th>
<th id="ac1">29</th>
<th id="ad1">30</th>
<th id="ae1">31</th>
</tr>
<tr>
<td id = "a2" >0</td>
<td id = "b2" >0</td>
<td id = "c2" >0</td>
<td id = "d2" >0</td>
<td id = "e2" >0</td>
<td id = "f2" >0</td>
<td id = "g2" >0</td>
<td id = "h2" >0</td>
<td id = "i2" >0</td>
<td id = "j2" >0</td>
<td id = "k2" >0</td>
<td id = "l2" >0</td>
<td id = "m2" >0</td>
<td id = "n2" >0</td>
<td id = "o2" >0</td>
<td id = "p2" >0</td>
<td id = "q2" >0</td>
<td id = "r2" >0</td>
<td id = "s2" >0</td>
<td id = "t2" >0</td>
<td id = "u2" >0</td>
<td id = "v2" >0</td>
<td id = "w2" >0</td>
<td id = "x2" >0</td>
<td id = "y2" >0</td>
<td id = "z2" >0</td>
<td id = "aa2" >0</td>
<td id = "ab2" >0</td>
<td id = "ac2" >0</td>
<td id = "ad2" >0</td>
<td id = "ae2" >0</td>
</tr>
<tr>
<td id = "a3" >0</td>
<td id = "b3" >0</td>
<td id = "c3" >0</td>
<td id = "d3" >0</td>
<td id = "e3" >0</td>
<td id = "f3" >0</td>
<td id = "g3" >0</td>
<td id = "h3" >0</td>
<td id = "i3" >0</td>
<td id = "j3" >0</td>
<td id = "k3" >0</td>
<td id = "l3" >0</td>
<td id = "m3" >0</td>
<td id = "n3" >0</td>
<td id = "o3" >0</td>
<td id = "p3" >0</td>
<td id = "q3" >0</td>
<td id = "r3" >0</td>
<td id = "s3" >0</td>
<td id = "t3" >0</td>
<td id = "u3" >0</td>
<td id = "v3" >0</td>
<td id = "w3" >0</td>
<td id = "x3" >0</td>
<td id = "y3" >0</td>
<td id = "z3" >0</td>
<td id = "aa3" >0</td>
<td id = "ab3" >0</td>
<td id = "ac3" >0</td>
<td id = "ad3" >0</td>
<td id = "ae3" >0</td>
</tr>
</body>
</html>
答案 0 :(得分:1)
您必须使用parseInt()
将您的html或文字转换为数字,并能够对它们求和。
这是一个工作示例,我只修改了一点JS:
function myFunction() {
var month = document.getElementById("drop");
document.getElementById("a2").innerHTML = parseInt(drop.options[drop.selectedIndex].text) + parseInt(document.getElementById("a1").innerHTML);
}
&#13;
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th, tr{
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
</style>
</head>
<body>
<form>
Number:
<select id="drop" onchange ="myFunction()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
<br><br>
<table>
<tr>
<tr>
<th id="a1">1</th>
<th id="b1">2</th>
<th id="c1">3</th>
<th id="d1">4</th>
<th id="e1">5</th>
<th id="f1">6</th>
<th id="g1">7</th>
<th id="h1">8</th>
<th id="i1">9</th>
<th id="j1">10</th>
<th id="k1">11</th>
<th id="l1">12</th>
<th id="m1">13</th>
<th id="n1">14</th>
<th id="o1">15</th>
<th id="p1">16</th>
<th id="q1">17</th>
<th id="r1">18</th>
<th id="s1">19</th>
<th id="t1">20</th>
<th id="u1">21</th>
<th id="v1">22</th>
<th id="w1">23</th>
<th id="x1">24</th>
<th id="y1">25</th>
<th id="z1">26</th>
<th id="aa1">27</th>
<th id="ab1">28</th>
<th id="ac1">29</th>
<th id="ad1">30</th>
<th id="ae1">31</th>
</tr>
<tr>
<td id = "a2" >0</td>
<td id = "b2" >0</td>
<td id = "c2" >0</td>
<td id = "d2" >0</td>
<td id = "e2" >0</td>
<td id = "f2" >0</td>
<td id = "g2" >0</td>
<td id = "h2" >0</td>
<td id = "i2" >0</td>
<td id = "j2" >0</td>
<td id = "k2" >0</td>
<td id = "l2" >0</td>
<td id = "m2" >0</td>
<td id = "n2" >0</td>
<td id = "o2" >0</td>
<td id = "p2" >0</td>
<td id = "q2" >0</td>
<td id = "r2" >0</td>
<td id = "s2" >0</td>
<td id = "t2" >0</td>
<td id = "u2" >0</td>
<td id = "v2" >0</td>
<td id = "w2" >0</td>
<td id = "x2" >0</td>
<td id = "y2" >0</td>
<td id = "z2" >0</td>
<td id = "aa2" >0</td>
<td id = "ab2" >0</td>
<td id = "ac2" >0</td>
<td id = "ad2" >0</td>
<td id = "ae2" >0</td>
</tr>
<tr>
<td id = "a3" >0</td>
<td id = "b3" >0</td>
<td id = "c3" >0</td>
<td id = "d3" >0</td>
<td id = "e3" >0</td>
<td id = "f3" >0</td>
<td id = "g3" >0</td>
<td id = "h3" >0</td>
<td id = "i3" >0</td>
<td id = "j3" >0</td>
<td id = "k3" >0</td>
<td id = "l3" >0</td>
<td id = "m3" >0</td>
<td id = "n3" >0</td>
<td id = "o3" >0</td>
<td id = "p3" >0</td>
<td id = "q3" >0</td>
<td id = "r3" >0</td>
<td id = "s3" >0</td>
<td id = "t3" >0</td>
<td id = "u3" >0</td>
<td id = "v3" >0</td>
<td id = "w3" >0</td>
<td id = "x3" >0</td>
<td id = "y3" >0</td>
<td id = "z3" >0</td>
<td id = "aa3" >0</td>
<td id = "ab3" >0</td>
<td id = "ac3" >0</td>
<td id = "ad3" >0</td>
<td id = "ae3" >0</td>
</tr>
</body>
</html>
&#13;
答案 1 :(得分:0)
这是正确的功能:
function myFunction() {
var month = document.getElementById("drop");
var a1 = Number(document.getElementById("a1").innerHTML);
var dropVal = Number(drop.options[drop.selectedIndex].text);
document.getElementById("a2").innerHTML = dropVal + a1;
}