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

时间:2015-03-20 17:38:52

标签: javascript jquery html html-table multiplication

我需要动态地使用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)?

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

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

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

顺便说一句,这可以通过php轻松完成。