CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-tablemultiplication
johny mile
johny mile

Reputation: 145

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

I need to create HTML table using jQuery dynamically and also I need to make multiplication between rows and columns. My rows is yield and column is price. I have two variables a and b.

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

Now I need to create table and multiplication like this:

<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/

So columns is based on price +/- and rows are based on yield +/-. How I can create with JavaScript table matrix so every cell need to be calculated (a*b)?

Please give me some ideas. I don't know where to start.

Upvotes: 0

Views: 1462

Answers (2)

Burger King
Burger King

Reputation: 2965

I think you are lack of DOM skill. You can refer it.

<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/

Upvotes: 2

Chinmay Chandak
Chinmay Chandak

Reputation: 455

Although i dont know much about js and jquery you can mix them and this could be done. Go for nested for loop for creating your table and use append() of jquery for appending the content of table and simple multiplication.

By the way this can done easily using php.

Upvotes: 1

Related Questions