Develop Reference

How to display calculations in an html form using javascript

I have a short form in HTML and basically it calculates the results of the users input. I have 4 sections, section a.1, a.2, b.1, b.2. I want to be able to add sum of section a.1 and display it on the subtotal line, same goes for section a.2, b.1 and b.2. Lastly I would like to sum up the total points awarded and display it in the totals row on the summary table at the top of the page. Please run my code and any advice or code snippets is appreciated. I would like to maintain the structure of my code. I am new to javascript and would love some advice to help build my understanding. Thanks!
var sections = {
section_a: 0,
section_b: 0,
}
//Calculates Section A
function calcSectionA(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_a" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 8 * 100) + '%';
calcRanks();
}
//Calculates Section B
function calcSectionB(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_b" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
calcRanks();
}
function calcRanks() {
let sectionsArr = [];
let keys = Object.keys(sections);
keys.forEach((key, i) => {
sectionsArr.push({
section: key,
value: sections[key],
rank: 0
});
if (i + 1 === keys.length) {
sectionsArr.sort((a, b) => {
return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
});
let lastIndex = 0;
for (let i = 1; i < sectionsArr.length; i++) {
let section = sectionsArr[i];
let lastSection = sectionsArr[lastIndex];
//console.log(lastSection.value, section.value);
if (lastSection.value > section.value) {
sectionsArr[i].rank = lastSection.rank + 1;
}
if (lastSection.value === section.value) {
sectionsArr[i].rank = lastSection.rank;
}
lastIndex = i;
}
displayRanks(sectionsArr);
}
});
}
function displayRanks(sections) {
sections.forEach((section) => {
document.getElementById('rank_' + section.section).textContent = section.rank + 1;
});
}
<table>
<tr>
<th>Category</th>
<th>Points Possible</th>
<th>Points Awarded</th>
<th>Percent Achieved</th>
<th>Ranking</th>
</tr>
<tr>
<td align="center">A</td>
<td align="center">60</td>
<td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
<td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
<td bgcolor="#92d050" align="center" id="rank_section_a"></td>
</tr>
<tr>
<td align="center">B</td>
<td align="center">50</td>
<td align="center"><b><div><span id="summary_section_b"></span></div></td>
<td align="center"><b><div><span id="percent_section_b"></span></div></td>
<td bgcolor="#92d050" align="center" id="rank_section_b"></td>
</tr>
<tr>
<td align="right"><b>Totals=</b></td>
<td align="center"><b></b></td>
<td align="center"><b><div></div></b></td>
<td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
<td align="center"></td>
</tr>
</table>
<table>
<th>Section A.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<th>Section A.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<tr>
<td class="subtotal">Section A. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_a"></div></b></td>
</tr>
<th>Section B.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<th>Section B.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<tr class="blueHead">
<td class="subtotal">Section B. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_b"></div></b></td>
</tr>
</table>

I gave a number of your div and some span tag id attributes. In your onchange functions, I just grabbed the values of the ddls and sum them up for the individual totals for A and B sections. Then at the top of the table, I just grabbed the two numbers and summed those as well in your onchange function so every time you change a value, the sum will update. This isn't the best way to give your elements values, but this should help get you on the right track. Hopefully this helps
var sections = {
section_a: 0,
section_b: 0,
}
//Calculates Section A
function calcSectionA(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_a" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 8 * 100) + '%';
calcRanks();
var a1Q1 = document.getElementById('a1').value;
var a1Q2 = document.getElementById('a2').value;
document.getElementById('section_a1subTotal').textContent = parseInt(a1Q1) + parseInt(a1Q2);
var a2Q1 = document.getElementById('a3').value;
var a2Q2 = document.getElementById('a4').value;
document.getElementById('section_a2subTotal').textContent = parseInt(a2Q1) + parseInt(a2Q2);
var aTotals = document.getElementById('summary_section_a').textContent;
var bTotals = document.getElementById('summary_section_b').textContent;
if (aTotals !== "" && bTotals !== "") {
document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
}
}
//Calculates Section B
function calcSectionB(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_b" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
calcRanks();
var b1Q1 = document.getElementById('b1').value;
var b1Q2 = document.getElementById('b2').value;
document.getElementById('section_b1subTotal').textContent = parseInt(b1Q1) + parseInt(b1Q2);
var b2Q1 = document.getElementById('b3').value;
var b2Q2 = document.getElementById('b4').value;
document.getElementById('section_b2subTotal').textContent = parseInt(b2Q1) + parseInt(b2Q2);
var aTotals = document.getElementById('summary_section_a').textContent;
var bTotals = document.getElementById('summary_section_b').textContent;
if (aTotals !== "" && bTotals !== "") {
document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
}
}
function calcRanks() {
let sectionsArr = [];
let keys = Object.keys(sections);
keys.forEach((key, i) => {
sectionsArr.push({
section: key,
value: sections[key],
rank: 0
});
if (i + 1 === keys.length) {
sectionsArr.sort((a, b) => {
return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
});
let lastIndex = 0;
for (let i = 1; i < sectionsArr.length; i++) {
let section = sectionsArr[i];
let lastSection = sectionsArr[lastIndex];
//console.log(lastSection.value, section.value);
if (lastSection.value > section.value) {
sectionsArr[i].rank = lastSection.rank + 1;
}
if (lastSection.value === section.value) {
sectionsArr[i].rank = lastSection.rank;
}
lastIndex = i;
}
displayRanks(sectionsArr);
}
});
}
function displayRanks(sections) {
sections.forEach((section) => {
document.getElementById('rank_' + section.section).textContent = section.rank + 1;
});
}
<table>
<tr>
<th>Category</th>
<th>Points Possible</th>
<th>Points Awarded</th>
<th>Percent Achieved</th>
<th>Ranking</th>
</tr>
<tr>
<td align="center">A</td>
<td align="center">60</td>
<td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
<td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
<td bgcolor="#92d050" align="center" id="rank_section_a"></td>
</tr>
<tr>
<td align="center">B</td>
<td align="center">50</td>
<td align="center"><b><div><span id="summary_section_b"></span></div></td>
<td align="center"><b><div><span id="percent_section_b"></span></div></td>
<td bgcolor="#92d050" align="center" id="rank_section_b"></td>
</tr>
<tr>
<td align="right"><b>Totals=</b></td>
<td align="center" id="totalNum"><b></b></td>
<td align="center"><b><div></div></b></td>
<td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
<td align="center"></td>
</tr>
</table>
<table>
<th>Section A.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="a1" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="a2" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_a1subTotal"></div></b></td>
</tr>
<th>Section A.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="a3" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="a4" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_a2subTotal"></div></b></td>
</tr>
<tr>
<td class="subtotal">Section A. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_a"></div></b></td>
</tr>
<th>Section B.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="b1" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="b2" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_b1subTotal"></div></b></td>
</tr>
<th>Section B.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="b3" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="b4" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_b2subTotal"></div></b></td>
</tr>
<tr class="blueHead">
<td class="subtotal">Section B. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_b"></div></b></td>
</tr>
</table>
jsfiddle: https://jsfiddle.net/q28yk4j0/1/

Changing table rows depending on 3 selectors

Depending on the value selected with the 3 selectors I only have to display the rows that contain those values selected earlier at the same time.
I currently have this and it works for one selector. How can I extend it for all the 3 selectors to affect the rows displayed?
<select id="selA">
<option value="0">Toate</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
</select>
<select id="selB">
<option value="0">Toate</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
<option value="b5">B5</option>
<option value="b6">B6</option>
</select>
<select id="selC">
<option value="0">Toate</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="c5">C5</option>
<option value="c6">C6</option>
<option value="c7">C7</option>
<option value="c8">C8</option>
<option value="c9">C9</option>
<option value="c10">C10</option>
</select>
</div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C1</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C2</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C3</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B2</td>
<td class="choice one">C4</td>
</tr>
</tbody>
</table>
AND JS:
$(document).ready(function(){
$("#selA").change(function(){
var textselected = document.getElementById("selA").value ;
target = '.' + textselected;
$('.choice').hide();
$(target).show();
});
});
How can I make it so it doesn't depend on the class and hides the rows that don't have ALL the values in the selectors?

K, I think you want something like this:
https://jsfiddle.net/agkh7f3w/2/
HTML:
<div id="filtru">filtru:
<select id="selA">
<option value="">Toate</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
</select>
<select id="selB">
<option value="">Toate</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
<option value="b5">B5</option>
<option value="b6">B6</option>
</select>
<select id="selC">
<option value="">Toate</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="c5">C5</option>
<option value="c6">C6</option>
<option value="c7">C7</option>
<option value="c8">C8</option>
<option value="c9">C9</option>
<option value="c10">C10</option>
</select>
</div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C2</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C3</td>
</tr>
<tr>
<td>A1</td>
<td>B2</td>
<td>C4</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() {
$('#filtru select').change(function() {
const filtru = [$('#selA').val(), $('#selB').val(), $('#selC').val()];
$('#table tr').each(function() {
$(this).show();
$('td', this).each(function(i) {
const text = $(this).text().toLowerCase();
if (text.indexOf(filtru[i]) === -1) {
$(this).closest('tr').hide();
}
})
})
});
});

Get data from specific columns in table when row checked

I need to get from specific table columns in a row. All data should be pushed into an array.
I should take data from each checked row from different columns (1,3,4). Column #4 contains drop-down option and it should take only selected value.
I am having a hard time getting this function to work, it works if I have only one column. I am facing trouble when I am retrieving data from , it retrieves all data from option values, I should get only selected value.
function getData() {
// Enumerate over each checked checkbox
$('input:checked').each(function() {
var row = [];
$(this).closest('tr').find('td:eq(5)').each(function() {
row.push($(this).text());
});
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(row);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
Function displays only data from one column. If I add .'td:eg(6)' I got empty array

#Bruno your case is little different and to get the desired result I have updated your code for button click event & it is as follow.
$("#btnSubmit").click(function(){
var rows = [];
$('input:checked').each(function() {
var row = $(this).parent().parent();
var data = {};
$(row).find("td").each(function(i,obj){
if(i == 1){
data.name = $(this).text();
}
else if(i == 3){
data.age = $(this).text();
}
else if(i == 4){
data.country = $(this).find("select").val();
}
})
rows.push(data);
})
console.log(rows);
})
And before implementing it to your code you can play it in here at JS Fiddle Demo.
In fiddle demo open console [F12] you can see your list of selected row value in an array.
Hope this is what you are looking for.

Here i try your result to get select row dropdwun value.
function getData(){
var rows=[];
// Enumerate over each checked checkbox
$('input:checked').each(function () {
var row = [];
var cnty= $(this).closest('tr').find('td:nth-child(5)').children('select').val();
var fname=$(this).closest('tr').find('td:nth-child(2)').text();
var lname=$(this).closest('tr').find('td:nth-child(3)').text();
var age=$(this).closest('tr').find('td:nth-child(4)').text();
var vals=[fname ,lname, age, cnty];
row.push(vals);
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(rows);
}
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here is how you could have all the selected values on button click. Just iterate over all tr and find select inside and get the value .
function getData(){
$("tr").each(function() {
if($(this).find("select")){
console.log($(this).find("select").val())
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select class="select-cls" id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>

jquery - how to move td to another td

I have a table like this.
<table>
<tr>
<td>A</td>
<td><select id="B" name="B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td class="sample">F: will hide/show</td>
<td class="sample">G: will hide/show</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td class="id1">J</td>
<td class="id1">K</td>
<td>L</td>
</tr>
<tr>
<td>M</td>
<td class="id2">N</td>
<td class="id2">O</td>
<td>P</td>
</tr>
</table>
Then, whenever I change the value in <td>B select option , <td>F and <td>G will hide..
It will then move up belows <td>...
<td>J & <td>K to <td>F & <td>G ,
<td>N & <td>O to <td>J & <td>K ,
Opposite happens if <td>F and <td>G will be shown.. other <td> will move down
here is the jquery ive started.
$('select#B').change(function(event) {
if (this.value == '2') {
$(".sample").show();
} else {
$(".sample").hide();
}
});
http://jsfiddle.net/rucsh/40/

$('select#B').change(function(event) {
var clone = $('td.id1').clone();
var clone2 = $('td.id2').clone();
if (this.value == '2') {
$(".sample, td.id1, td.id2").show();
$('.clone').remove();
} else {
$(".sample, td.id1, td.id2").hide();
$(clone).insertAfter('.sample:last').addClass('clone');
$(clone2).insertAfter('.id1:last').addClass('clone');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>A</td>
<td><select id="B" name="B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td class="sample">F: will hide/show</td>
<td class="sample">G: will hide/show</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td class="id1">J</td>
<td class="id1">K</td>
<td>L</td>
</tr>
<tr>
<td>M</td>
<td class="id2">N</td>
<td class="id2">O</td>
<td>P</td>
</tr>
</table>

High-level instructions,
Clone the target element you want to move
Save it variable
Remove the original element
Insert the cloned element (in step 2) to the desired location.
All above steps can be easily competed using jQuery.

When i select a value from select option it multiply by my set value and show on div

here i use a select option menu for select a value like 1, 2, 3 to 10 then it is automatically multiply by my set value like 1000 and show in my div
here is my code
<table width="100%" border="0">
<tr>
<td style="text-align:left; text-indent:10px;padding:5px;" width="39%"><b>Listing Type </b></td>
<td width="15%"><b>No. of listings </b></td>
<td width="18%"><b>Price Per Listings </b></td>
<td width="15%"><b>Listing Duration</b> </td>
<td width="13%"><b>Total Price </b></td>
</tr>
<tr>
<td style="font-weight:600;text-align:left; padding:0px 10px;" height="39">Successghar fast listing (should be consumed within 90 days of buying) </td>
<td><select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
<td>Rs. 1099 </td>
<td>90 Days </td>
<td> Price show here </td>
</tr>
</table>

This solution will populate the table row using a JS variable. It will also initially set the "price per listing" based on that variable. Here is a working plunkr.
HTML:
<table width="100%" border="0">
<tr>
<td style="text-align:left; text-indent:10px;padding:5px;" width="39%"><b>Listing Type </b>
</td>
<td width="15%"><b>No. of listings </b>
</td>
<td width="18%"><b>Price Per Listings </b>
</td>
<td width="15%"><b>Listing Duration</b>
</td>
<td width="13%"><b>Total Price </b>
</td>
</tr>
<tr>
<td style="font-weight:600;text-align:left; padding:0px 10px;" height="39">Successghar fast listing (should be consumed within 90 days of buying)</td>
<td>
<select id="num-listings">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td id="price-per-listing"></td>
<td>90 Days</td>
<td id="total-price">Price show here</td>
</tr>
</table>
JavaScript:
$(document).ready(function() {
var pricePerListing = 1099.0;
var numListingsSelect = $('#num-listings');
var pricePerListingCell = $('#price-per-listing');
pricePerListingCell.html("Rs. " + pricePerListing);
function updateTotalPrice() {
numListings = numListingsSelect.val();
$('#total-price').html(pricePerListing * numListings);
}
numListingsSelect.change(function() {
updateTotalPrice();
});
updateTotalPrice();
});