We Keep Coding

Copy Paste multiple rows from CSV to input fields in an HTML Form

I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a
2 5 b
3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<table style="display : inline;width : 100%;"></table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[1]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[1]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>

Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your "main" container <td>s. After that the whole thing fell into place fairly easily:
to prevent the actual TSV text from being pasted directly into the first input field I used e.preventDefault()
I then used .split() twice on the TSV string to turn it into the 2D array vals
I identified the .closest() td.contTD element (--> td) and its column and row numbers (col and row) by finding the .index() of td and its parent row.
starting form the .closest('tbody')I then worked my way down again through the .slice()of rows starting with row and its (sliced) child input elements starting at column col.
in an .each() loop I then assigned the value of the vals-array to the input element, but only if val[i][j] exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /\s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<label>sample data for copying and pasting via clipboard:</label>
<table>
<tr><td>1</td><td>4</td><td>a</td></tr>
<tr><td>2</td><td>5</td><td>b</td></tr>
<tr><td>3</td><td>6</td><td>c</td></tr>
</table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[1]">
<table>
<tbody>
<tr id="tr_validation_options[1]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[1]">
<table>
<tbody>
<tr id="tr_validation_display[1]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[1]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>

JavaScript sum table value

I have the HTML table below. How can I sum up all of the columns based on continent group?
<html>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center>Asia</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">IND</font>
</td>
<td>
<font style="float:right;">900,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;">25,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">CHN</font>
</td>
<td>
<font style="float:right;">9,000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">RUS</font>
</td>
<td>
<font style="float:right;">3,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;">5,000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">OTH</font>
</td>
<td>
<font style="float:right;">90,000</font>
</td>
</tr>
</table>
</html>
Example: in order to get the Total, I need to add all of the continents, in this case Asia + Europe + Others, but first I need to have the subtotal of those continents. Additional info: Those continents and nations can be editable(add/remove) based on database. How can I do that?
In simple terms, like using Microsoft Excel, where we can sum up each/any column that we want.
I know JavaScript sum() that I got from other sites, but so far it only gives me the total for all column values. Below is the code, where index equals to number of column.
function sumColumn(index) {
var total = 0;
$("td:nth-child(" + index + ")").each(function() {
total += parseFloat($(this).text(), 10) || 0;
});
return total.toFixed(2);
}

If you're trying to learn on how to use Jquery Selectors, I've modified the snippet according to what you have mentioned. However, what you are trying to do here is a bad way of handling data. You should never represent data in this form. Use PHP or ajax to load data to the elements.
$(function() {
let asia_sum = 0;
$('.asia').each( function() {asia_sum+= parseInt($(this).text()); });
let eur_sum = 0;
$('.eur').each( function() {eur_sum+= parseInt($(this).text()); });
let other_sum = 0;
$('.other').each( function() {other_sum+= parseInt($(this).text()); });
let total = asia_sum + eur_sum + other_sum;
$('#total').text(total);
$('#eur').text(eur_sum);
$('#asia').text(asia_sum);
$('#other').text(other_sum);
console.log(other_sum);
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center id='total'>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center >Asia</center>
</td>
<td>
<center id='asia'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >IND</font>
</td>
<td>
<font style="float:right;" class='asia'>900000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;" class='asia'>25000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >CHN</font>
</td>
<td>
<font style="float:right;" class='asia'>9000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center id='eur'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >RUS</font>
</td>
<td>
<font style="float:right;" class='eur'>3000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;" class='eur'>5000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center id='other'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >OTH</font>
</td>
<td>
<font style="float:right;" class='other'>90000</font>
</td>
</tr>
</table>
</body>
</html>

how to redesign all table td in tr rows

I have table like this:
<table>
<tr>
<td> A-1 </td>
<td> A-2 </td>
<td> A-3 </td>
<td> A-4 </td>
<td> A-5 </td>
<td> A-6 </td>
<td> A-7 </td>
<td> A-8 </td>
</tr>
<tr>
<td> B-1 </td>
<td> B-2 </td>
<td> B-3 </td>
<td> B-4 </td>
<td> B-5 </td>
<td> B-6 </td>
<td colspan=2> B-7 </td>
</tr> </table>
it's something like this:
A-1 A-2 A-3 A-4 A-5 A-6 A-7 A-8
B-1 B-2 B-3 B-4 B-5 B-6 B-8
During some change on page size i want to change that table to be like following table design:
<table>
<tr>
<td> A-1 </td>
<td> A-2 </td>
</tr>
<tr>
<td> A-3 </td>
<td> A-4 </td>
</tr>
<tr>
<td> A-5 </td>
<td> A-6 </td>
</tr>
<tr>
<td> A-7 </td>
<td> A-8 </td>
</tr>
<tr>
<td> B-1 </td>
<td> B-2 </td>
</tr>
<tr>
<td> B-3 </td>
<td> B-4 </td>
</tr>
<tr>
<td> B-5 </td>
<td> B-6 </td>
</tr>
<tr>
<td colspan=2> B-7 </td>
</tr> </table>
It's something like this:
A-1 A-2
A-3 A-4
A-5 A-6
..
B-7
I'm not sure if that can be done with css or javascript.

Use .querySelectorAll("#table1 td") to select all td, then use [].forEach.call, this way you can loop through a Element List, and buld the new table.
var x = document.querySelectorAll("#table1 td");
var _html = "<table>";
[].forEach.call(x, function(el, i) {
if(i%2==0) _html += "<tr>";
_html += el.outerHTML;
if(i%2==1) _html += "</tr>";
});
_html += "</table>";
alert(_html);
document.write(_html);
<table id="table1">
<tr>
<td>A-1</td>
<td>A-2</td>
<td>A-3</td>
<td>A-4</td>
<td>A-5</td>
<td>A-6</td>
<td>A-7</td>
<td>A-8</td>
</tr>
<tr>
<td>B-1</td>
<td>B-2</td>
<td>B-3</td>
<td>B-4</td>
<td>B-5</td>
<td>B-6</td>
<td>B-7</td>
<td>B-8</td>
</tr>

How to sort table by date string in javascript/ jquery...?

I am trying to sort table by date it works in Chrome but does not work in IE and Mozilla browsers?
JSFIDDLE
<article>
<div style="margin-bottom: 10px;">
<label for="dept" class="lbl-title">Select Department :</label> <select
name="dept" id="dept" class="select_dept">
<option value="">All</option>
<option value="DEPT-1">Information Technology Department</option>
<option value="DEPT-2">Networking Department</option>
<option value="DEPT-3">Testing Department</option>
<option value="DEPT-4">Account Department</option>
<option value="DEPT-5">Sales Department</option>
<option value="DEPT-6">Marketing Department</option>
</select>
</div>
<table class="table" id="tbl-dept" border="1">
<thead>
<tr>
<th class="layout-1">Department Name</th>
<th>Description</th>
<th class="layout-1" id="sort"
style="cursor: pointer; background: red;">Date
<span class="arrow">⇅</span></a><input type="hidden"
id="sort-direction" value="SORT_ASC" />
</th>
</tr>
</thead>
<tbody>
<tr class="DEPT-1">
<td>Information Technology Department</td>
<td>Sample description</td>
<td>06 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr class="DEPT-2">
<td>Networking Department</td>
<td>Sample description</td>
<td>02 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr class="DEPT-3">
<td>Testing Department</td>
<td>Sample description</td>
<td>05 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr class="DEPT-4">
<td>Account Department</td>
<td>Sample Description</td>
<td>01 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr class="DEPT-5">
<td>Sales Department</td>
<td>Sample Description</td>
<td>03 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr class="DEPT-5">
<td>Marketing Department</td>
<td>Sample Description</td>
<td>04 May, 2015</td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Link</td>
<td> </td>
</tr>
</tbody>
</table>
</article>
$(document).ready(function(){
$("#sort").on("click",function (e) {
e.preventDefault();
if ($("#sort-direction").val() === "SORT_ASC") {
$('#tbl-dept tbody tr').sort(function (a, b) {
return new Date($(a).find('td:eq(2)').text()).getTime() - new Date($(b).find('td:eq(2)').text()).getTime();
}).appendTo('#tbl-dept tbody');
$("#sort-direction").val("SORT_DESC");
} else {
$('#tbl-dept tbody tr').sort(function (a, b) {
return new Date($(b).find('td:eq(2)').text()).getTime() - new Date($(a).find('td:eq(2)').text()).getTime();
}).appendTo('#tbl-dept tbody');
$("#sort-direction").val("SORT_ASC");
}
});
$("#dept").on("change", function () {
var cls = $(this).val();
if (cls === "") {
$("#tbl-dept tbody tr").show();
} else {
$("#tbl-dept tbody tr").hide();
$("#tbl-dept tbody tr." + cls).show();
}
});
});

You need to use the debugger in Firefox and inspect your sort comparator function. Check that your date values are not NaN. (use isNaN).
I've simplified and fixed your code.
De-duplicate lines code by setting variables instead of using if/else.
sort function returns either 1 or -1 explicitly. (Just because JS lets you be dirty, doesn't mean you should be dirty)
Always check for NaN values and set to something explicit, such as Infinity.
http://jsfiddle.net/tcqv58ke/2/

The problem is that Date returns NaN when the text is empty (Chrome seems to be more flexible), which causes the sort to fail. You could alter your current sort into something like:
new Date($(tr).find('td:eq(2)').text()).getTime() || 0
The || 0 makes sure a number is returned. Best is to have a helper function so you don't have repeated code and don't have to alter each occurrence.
Example Fiddle

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

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/

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.