ドロップダウンメニューを使用してテーブルから値を選択

Question

ドロップダウンメニューの値に基づいてテーブルから値を選択しようとしています。私はこれまでのところ、これを持っている：

<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> 

。私は未定義の値を得続けます。後で、私はその値（適切な行と列から）を、他の同様に選択された値と共に使用して、料金計算機を構築したいと考えています。テーブルの行と列から値を取得してください。

Answer 1

をつかむだろう。他のすべての要素については、textContentまたはinnerHTMLを使用してください。あなたが右のデータを引っ張って "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>

Answer 2

変更これまでの選択：

<select id="stateSel"> 
    <option value="AR">Arkansas</option> 
    <option value="AZ">Arizona</option> 
    <option value="CA">California</option> 
</select><br/> 

この機能を使用しますが、フォームフィールド以外にvalueを使用していないコンテンツ

/** 
** 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); 
} 

Answer 3

...解決のために、このフィドルを参照してください

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>