如何使用jQuery和乘法行和列创建HTML表
[英]How to create HTML table with jQuery and multiplication rows and columns
问题描述
我需要使用jQuery动态创建HTML表，并且还需要在行和列之间进行乘法。 我的行是收益，列是价格。 我有两个变量a和b。
var a; //represent price
var b; // represent yield
现在，我需要像这样创建表和乘法：
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" scope="col">Yield</th>
<th colspan="7" scope="col">Price</th>
</tr>
<tr>
<td>a-1.5</td>
<td>a-1</td>
<td>a-0.5</td>
<td>a</td>
<td>a+0.5</td>
<td>a+1</td>
<td>a+1.5</td>
</tr>
<tr>
<th scope="row">b-500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b</th>
<td> </td>
<td> </td>
<td> </td>
<td>a*b</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
因此，列基于价格+/-，行基于收益率+/-。 如何使用JavaScript表矩阵进行创建，以便需要计算每个单元格（a * b）？
请给我一些想法。 我不知道从哪里开始。
2 个解决方案
解决方案1
3 已采纳 2015-03-20 19:00:39
我认为您缺乏DOM技能。 您可以参考。
<head> <script type="text/javascript"> function addlabel(s,n){ if (n > 0){ return s + "+" + String(n); } else if (n < 0){ return s + String(n); } else{ return s; } } function multiplicationTable(){ x = document.getElementById("i1").value; x = parseInt(x); y = document.getElementById("i2").value; y = parseInt(y); var table = '<table border="1px"><thead>'; table += '<tr><th></th>' for (var a = -1.5; a<= 1.5 ; a+=0.5){ table += '<th>'+ addlabel("a", a) +'</th>'; } table += '</tr></thead><tbody>' // add num for (var b = y-500, ob = y; b<= y+500 ; b+=100){ table += "<tr>"; table += "<td>" + addlabel("b",b-ob) + "</td>" for (var a = x-1.5; a<= x+1.5 ; a+=0.5){ table += '<td>'+ a*b +'</td>'; } table += "</tr>"; } return table + '</tbody></table>'; } function build(){ document.getElementById('here').innerHTML = multiplicationTable(); } </script> </head> <body> <form name="f"> <input type="text" value ="15" name="r" id="i1"> <input type="text" value ="5000" name="c" id="i2"> <input type="button" value="make table" onclick="build()"> </form> <div id="here"> </div> </body>
解决方案2
1 2015-03-20 18:30:52
尽管我对js和jquery不太了解，但是您可以将它们混合使用，这可以做到。 使用嵌套的for循环创建表，并使用jquery的append（）附加表内容和简单乘法。
顺便说一句，可以使用php轻松完成。
如何使用jQuery重新调整HTML表格的行和列的大小？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.