如何使用 jQuery 和乘法行和列创建 HTML 表答案

【问题标题】：How to create HTML table with jQuery and multiplication rows and columns如何使用 jQuery 和乘法行和列创建 HTML 表
【发布时间】：2015-03-20 17:38:52
【问题描述】：

我需要使用 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>&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 表格矩阵创建每个单元格都需要计算 (a*b)？

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

【问题讨论】：

你应该考虑使用 angular.js
你好，我附加了我的 jsfiddle.net。

标签： javascript jquery html html-table multiplication

【解决方案1】：

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

【讨论】：

好的，谢谢，但是这里的表头在哪里？我无法查看这个没有标题的标题......所以请使用我这里的所有元素来制作这个：jsfiddle.net/nexetdad

【解决方案2】：

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

顺便说一句，这可以使用 php 轻松完成。

【讨论】：

我假设你可以使用 php。使 2 嵌套 for 循环。 1 代表<tr>，另一个代表<td>，在<td> 中进行乘法运算。