如何创建 HTML table 与 jQuery 和乘法行和列

Question

我需要使用 jQuery 动态创建 HTML table 并且我还需要在行和列之间进行乘法运算。我的行是收益率，列是价格。我有两个变量 a 和 b.

var a; //represent price
var b; // represent yield

现在我需要像这样创建 table 和乘法：

<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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">b-400</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">b-300</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">b-200</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">b-100</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">b</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>a*b</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">b+100</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">b+200</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">b+300</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">b+400</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">b+500</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>

http://jsfiddle.net/nexetdad/

因此，列基于价格 +/-，行基于收益率 +/-。如何使用 JavaScript table 矩阵创建每个单元格都需要计算 (a*b)?

请给我一些想法。我不知道从哪里开始。

Answer 1

虽然我不太了解js和jquery你可以把它们混合起来，这是可以做到的。使用嵌套的 for 循环创建 table 并使用 jquery 的 append() 附加 table 的内容和简单的乘法。

顺便说一下，使用 php.

可以轻松完成此操作

Answer 2

我认为你缺乏 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>

https://jsfiddle.net/tonypythoneer/z5reeomj/2/

如何创建 HTML table 与 jQuery 和乘法行和列

How to create HTML table with jQuery and multiplication rows and columns

html

javascript

jquery

html-table

multiplication