二の表の値の計算をしたい。

質問

いつもお世話になります。
見よう見まねでやっている超初心者です。

下の様なテーブルが二つあるページで
テーブルabcの<td>のリンゴ、なす、西瓜の数値を
テーブルefgのリンゴ、なす、西瓜の元値の値に
対して+-してその売値の数値を
を自動で計算して求めたいと思っています。
<td>?</td>（(）内の回答のように）
表の値はどちらも可変します。

jabascriptでなるべくシンプルで簡単にできないでしょうか？
ご教授の程、どうぞよろしくお願い致します。

<table id="abc">
<tr>
<th>リンゴ</th>
<th>なす</th>
<th>西瓜</th>
</tr>
<tr>
<td>-20</td>
<td>-10</td>
<td>+200</td>
</tr>
</table>

<table id="efg">
<tr>
<th >ID</th>
<th>果物</th>
<th>元値</th>
<th>売値</th>
</tr>
<tr>
<td>1</td>
<td>リンゴ</td>
<td>140</td>
<td>?(120)</td>
</tr>
<tr>
<td>2</td>
<td>リンゴ</td>
<td>120</td>
<td>?(100)</td>
</tr>
<tr>
<td>3</td>
<td>なす</td>
<td>40</td>
<td>?(30)</td>
</tr>
<tr>
<td>4</td>
<td>なす</td>
<td>80</td>
<td>?(70)</td>
</tr>
<tr>
<td>5</td>
<td>すいか</td>
<td>800</td>
<td>?(1000)</td>
</tr>
<tr>
<td>6</td>
<td>すいか</td>
<td>1000</td>
<td>?(1200)</td>
</tr>
</table>

回答No.1

yambejp · ベストアンサー

たとえばこんな感じ

<script>
window.onload=function(){
var t1=document.getElementById("abc");
var vals=new Object();
for(var i=0;i<t1.rows[0].cells.length;i++){
vals[t1.rows[0].cells[i].innerHTML]=parseInt(t1.rows[1].cells[i].innerHTML);
}
var t2=document.getElementById("efg");
for(var i=1;i<t2.rows.length;i++){
for(var j in vals){
if(j==t2.rows[i].cells[1].innerHTML){
var v=parseInt(t2.rows[i].cells[2].innerHTML);
t2.rows[i].cells[3].innerHTML=v + vals[j];
break;
}
}
}

}
</script>

<table id="abc">
<tr>
<th>リンゴ</th>
<th>なす</th>
<th>西瓜</th>
</tr>
<tr>
<td>-20</td>
<td>-10</td>
<td>+200</td>
</tr>
</table>

<table id="efg">
<tr>
<th >ID</th>
<th>果物</th>
<th>元値</th>
<th>売値</th>
</tr>
<tr>
<td>1</td>
<td>リンゴ</td>
<td>140</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>リンゴ</td>
<td>120</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>なす</td>
<td>40</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>なす</td>
<td>80</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>西瓜</td>
<td>800</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>西瓜</td>
<td>1000</td>
<td></td>
</tr>
</table>

お礼

早速のご回答ありがとうございます。
思う通りに出来ました！素晴らしいです。
全て教えて頂き、本当に感謝致します。
列の位置等を変えて使わせて頂きました。
本当にありがとうございます。又何かありましたら
是非よろしくお願い致します。