我尝试根据下拉菜单中的值从表格中选择一个值。到目前为止我有这个:
<table class="table table-striped table-hover table-bordered table-responsive" id="rates">
<thead>
<tr style="background-color: "><th>State</th><th>Fee1</th><th>Fee2</th><th>Fee3</th><th>Fee4</th><th>Fee5</th><th>Fee6</th></tr>
</thead>
<tbody id="rates">
<tr><td id="AR">Arkansas</td><td id="AR_F1">.04</td><td id="AR_F2">0.00</td><td id="AR_F3">0.00</td><td id="AR_F4">0.00</td><td id="AR_F5">0.00</td><td id="AR_F6">0.00</td></tr>
<tr><td id="AZ">Arizona</td><td id="AZ_F1">.03</td><td id="AZ_F2">0.002</td><td id="AZ_F3">0.00</td><td id="AZ_F4">0.00</td><td id="AZ_F5">0.00</td><td id="F6_O">0.00</td></tr>
<tr><td id="CA">California</td><td id="CA_F1">.03</td><td id="CA_F2">0.002</td><td id="CA_F3">0.00</td><td id="CA_F4">0.00</td><td id="CA_F5">0.00</td><td id="CA_F6">0.00</td></tr>
</tbody>
</table><br/>
<select id="stateSel">
<option value="Arkansas">Arkansas</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
</select><br/>
<table class="table table-bordered">
<tbody>
<tr><td><h4>Tax Calculator</h4></td></tr>
<tr><th>Fee1:</th><td><input type="text"/></td></tr>
<tr><th>Fee2:</th><td><input type="text" /></td></tr>
<tr><th>Fee3:</th><td><input type="text"/></td></tr>
<tr><th>Fee4:</th><td><input type="text"/></td></tr>
<tr><th>Total:</th><td><input type="text" id="totalAmount"/></td></tr>
</tbody>
</table>
<br/>
<button onclick="myFunction()">Calculate</button>
到目前为止我的脚本是这样的:
<script>
function myFunction() {
var x = document.getElementById("stateSel").selectedIndex;
var y = document.getElementById("stateSel").options;
var rowIndex = y[x];
var fee1 = document.getElementById("rates").rows[rowIndex.index + 1].cells[2].value;
alert(fee1.index);
}
</script>
我正在使用警报来查看是否可以从费率表中选择一个值。我一直得到一个未定义的值。之后,我想使用该值(来自适当的行和列)以及其他类似选择的值来构建费用计算器。请帮我从表格的行和列中获取值。
答案 0 :(得分:1)
将选择更改为:
<select id="stateSel">
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
</select><br/>
使用此功能可获取内容
/**
** Define your own function and documentation
**/
function myFunction() {
var
// Get the selected country. It should be the value of your option
state = document.querySelector('#stateSel').value,
// Get the value (text) of any selected _FX from the table
fee1 = document.querySelector('#' + state + '_F1').textContent;
alert(fee1);
}
答案 1 :(得分:0)
您需要使用“innerHTML”来提取正确的数据...请参阅此解决方案
https://jsfiddle.net/shemdani/t5fmzbw4/7/
<table class="table table-striped table-hover table-bordered table-responsive" id="rates">
<thead>
<tr style="background-color: "><th>State</th><th>Fee1</th><th>Fee2</th><th>Fee3</th><th>Fee4</th><th>Fee5</th><th>Fee6</th></tr>
</thead>
<tbody id="ratesBody">
<tr><td id="AR">Arkansas</td><td id="AR_F1">.04</td><td id="AR_F2">0.00</td><td id="AR_F3">0.00</td><td id="AR_F4">0.00</td><td id="AR_F5">0.00</td><td id="AR_F6">0.00</td></tr>
<tr><td id="AZ">Arizona</td><td id="AZ_F1">.03</td><td id="AZ_F2">0.002</td><td id="AZ_F3">0.00</td><td id="AZ_F4">0.00</td><td id="AZ_F5">0.00</td><td id="F6_O">0.00</td></tr>
<tr><td id="CA">California</td><td id="CA_F1">.03</td><td id="CA_F2">0.002</td><td id="CA_F3">0.00</td><td id="CA_F4">0.00</td><td id="CA_F5">0.00</td><td id="CA_F6">0.00</td></tr>
</tbody>
</table><br/>
<select id="stateSel">
<option value="Arkansas">Arkansas</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
</select><br/>
<table class="table table-bordered">
<tbody>
<tr><td><h4>Tax Calculator</h4></td></tr>
<tr><th>Fee1:</th><td><input type="text"/></td></tr>
<tr><th>Fee2:</th><td><input type="text" /></td></tr>
<tr><th>Fee3:</th><td><input type="text"/></td></tr>
<tr><th>Fee4:</th><td><input type="text"/></td></tr>
<tr><th>Total:</th><td><input type="text" id="totalAmount"/></td></tr>
</tbody>
</table>
<br/>
<button onClick="calculate()">Calculate</button>
<script>
function calculate(){
var x = document.getElementById("stateSel").selectedIndex;
var y = document.getElementById("stateSel").options[x].value;
alert ('selected state: ' + y);
var rowIndex = x;
var fee1 = document.getElementById("rates").rows[rowIndex + 1].cells[1].innerHTML;
alert(fee1);
}
</script>
答案 2 :(得分:-2)
除了表单字段之外,您不会使用value
。对于所有其他元素,请使用 textContent
或 innerHTML
。
function myFunction() {
var x = document.getElementById("stateSel").selectedIndex;
var y = document.getElementById("stateSel").options;
var rowIndex = y[x];
var fee1 = document.getElementById("rates").rows[rowIndex.index + 1].cells[2].textContent;
alert(fee1);
}
<table class="table table-striped table-hover table-bordered table-responsive" id="rates">
<thead>
<tr style="background-color: "><th>State</th><th>Fee1</th><th>Fee2</th><th>Fee3</th><th>Fee4</th><th>Fee5</th><th>Fee6</th></tr>
</thead>
<tbody id="rates">
<tr><td id="AR">Arkansas</td><td id="AR_F1">.04</td><td id="AR_F2">0.00</td><td id="AR_F3">0.00</td><td id="AR_F4">0.00</td><td id="AR_F5">0.00</td><td id="AR_F6">0.00</td></tr>
<tr><td id="AZ">Arizona</td><td id="AZ_F1">.03</td><td id="AZ_F2">0.002</td><td id="AZ_F3">0.00</td><td id="AZ_F4">0.00</td><td id="AZ_F5">0.00</td><td id="F6_O">0.00</td></tr>
<tr><td id="CA">California</td><td id="CA_F1">.03</td><td id="CA_F2">0.002</td><td id="CA_F3">0.00</td><td id="CA_F4">0.00</td><td id="CA_F5">0.00</td><td id="CA_F6">0.00</td></tr>
</tbody>
</table><br/>
<select id="stateSel">
<option value="Arkansas">Arkansas</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
</select><br/>
<table class="table table-bordered">
<tbody>
<tr><td><h4>Tax Calculator</h4></td></tr>
<tr><th>Fee1:</th><td><input type="text"/></td></tr>
<tr><th>Fee2:</th><td><input type="text" /></td></tr>
<tr><th>Fee3:</th><td><input type="text"/></td></tr>
<tr><th>Fee4:</th><td><input type="text"/></td></tr>
<tr><th>Total:</th><td><input type="text" id="totalAmount"/></td></tr>
</tbody>
</table>
<br/>
<button onclick="myFunction()">Calculate</button>