我需要根据第1列和标题从html表中获取值(价格)。
表格如下:
html代码如下所示:
<input id="search_height" placeholder="height...">
<input id="search_width" placeholder="width...">
<input id="result" placeholder="Price is...">
<br>
<table>
<tr id="width"><th></th><th>30</th><th>60</th><th>70</th><th>80</th><th>90</th><th>100</th></tr>
<tr>
<td id="height">60</td><td>442</td><td>850</td><td>999</td><td>1852</td><td>2442</td><td>3999</td>
</tr>
<tr>
<td id="height">70</td><td>2442</td><td>2850</td><td>2999</td><td>21852</td><td>22442</td><td>23999</td>
</tr>
<tr>
<td id="height">80</td><td>3442</td><td>3850</td><td>3999</td><td>31852</td><td>32442</td><td>33999</td>
</tr>
<tr>
<td id="height">90</td><td>1442</td><td>4850</td><td>4999</td><td>41852</td><td>42442</td><td>43999</td>
</tr>
</table>
我想在jquery中使用一个函数,以便给我正确的价格并打印出数字:
<input id="result" placeholder="Price is...">
基于这两个输入
<input id="search_width" placeholder="Width...">
<input id="search_height" placeholder="Height...">
例如,如果我写 70高 和 80宽 它应打印出 3999 :
<input id="result" placeholder="Price is...">
答案 0 :(得分:2)
如果有人需要这是另一种解决方案:Working solution
$(document).ready(function(){
var x=[];
var y=[];
function getTableData(){
var j=0;
$('table tr:first-child').find('th').each(function(){
y.push(parseInt($(this).html()));
x[0]=y;
});
for(i=1; i<$('table tr').length; i++){
y=[];
var row=$('table tr').get(i);
$(row).find('td').each( function(){
y.push(parseInt($(this).html()));
});
x[i]=y;
}
}
getTableData();
var indexH=0;
var indexW=0;
$('#search_width').on('keyup', function(){
var valueW=parseInt($(this).val());
$('#result').val(" ");
$('table tr:first-child').find('th').each(function(){
if(valueW===parseInt($(this).html())){
indexW=$(this).index();
if(indexH){
$('#result').val(x[indexH][indexW]);
}
}
});
});
$('#search_height').on('keyup', function(){
var valueH=parseInt($(this).val());
$('#result').val(" ");
$('table tr td:first-child').each(function(){
if(valueH===parseInt($(this).html())){
indexH=$(this).parent().index();
if(indexW){
$('#result').val( x[indexH][indexW] );
}
}
});
});
});
答案 1 :(得分:1)
我得到了它的工作,感谢阅读。 JSfiddle
<input id="search_width" placeholder="Width...">
<input id="search_height" placeholder="Height...">
<br>
<input id="round_width" placeholder="roundWidth...">
<input id="round_height" placeholder="roundHeight...">
<br>
<input id="result" placeholder="Price is...">
<br>
<table id="mytable">
<tr id="width"><th></th><th>30</th><th>60</th><th>70</th><th>80</th><th>90</th><th>100</th></tr>
<tr>
<td id="height">60</td><td>442</td><td>850</td><td>999</td><td>1852</td><td>2442</td><td>3999</td>
</tr>
<tr>
<td id="height">70</td><td>2442</td><td>2850</td><td>2999</td><td>21852</td><td>22442</td><td>23999</td>
</tr>
<tr>
<td id="height">80</td><td>3442</td><td>3850</td><td>3999</td><td>31852</td><td>32442</td><td>33999</td>
</tr>
<tr>
<td id="height">90</td><td>1442</td><td>4850</td><td>4999</td><td>41852</td><td>42442</td><td>43999</td>
</tr>
</table>
var rows = $( "#mytable tr" ).length;
var columns = $( "#mytable th" ).length;
alert("rows are " + columns + " st" );
function updatePrice2(){
for(i = 2; i < $("#mytable th").length+1; i++) {
var mywidth = document.getElementById('search_width').value,
myheight = document.getElementById('search_height').value,
result = document.getElementById('round_width'),
result2 = document.getElementById('round_height'),
myResult;
var r = $( "#mytable tr:nth-child(1) th:nth-child("+i+")" ).text();
if (mywidth == r) {
for(p = 2; p < $("#mytable tr").length+1; p++) {
var q = $( "#mytable tr:nth-child("+p+") td:nth-child(1)" ).text();
if (myheight == q) {
alert(q);
myResult = $( "#mytable tr:nth-child("+p+") td:nth-child("+i+")" ).text();
result.value = Math.round(myResult);
result2.value = Math.round(myResult);
}
}
}
}
}
$(document).on("change, keyup", "#search_width", updatePrice2);
$(document).on("change, keyup", "#search_height", updatePrice2);