Button Add will generate new Textarea - javascript

Is there possible button "Add" will generate new textarea in form? I've searching for whole day but couldn't find any logic to make "Add" function that generate new textarea.
h1,h2,h3,h4,h5,p,table {font-family: Calibri;}
.content {
margin: 0 auto;
width: 75%;
margin-top: 15px;
}
table.addbutton {
border: solid black 1px;
width: 100%;
height: auto;
}
td,th,tr {
border: solid black 1px;
text-align: center;
}
textarea {
width: 100%;
margin: 0;
overflow: hidden
}
<div class="content">
<table class="addbutton">
<form action="" method="post">
<!-- Title -->
<tr style="color:White;">
<th bgcolor="#82BBE8">Fixed Title A</th>
<th bgcolor="#82BBE8">Fixed Title B</th>
<th bgcolor="#82BBE8">Fixed Title C</th>
<th bgcolor="black">Fixed Title D</th>
<th bgcolor="#82BBE8">Fixed Title E</th>
<th bgcolor="black">Fixed Title F</th>
<th bgcolor="#82BBE8">Fixed Title G</th>
</tr>
<!-- Title end -->
<tr style="color:White;">
<td rowspan="2" width="auto" bgcolor="#82BBE8">Title Example</td>
<td style="color:Black">
<p align="right"><input type="button" alt="AddColumn" value="Add"></p>
<br>
<h5>When we click "Add" button will show new textarea</h5>
<textarea placeholder="Please input text here.."></textarea>
</td>
<td style="color:Black">
Example 1
</td>
<td style="color:Black">
Example 2
</td>
<td style="color:Black">
Example 3
</td>
<td style="color:Black">
Example 4
</td>
<td style="color:Black">
Example 5
</td>
</tr>
<tr>
<td>
<br>
<p align="right"><input type="button" alt="AddColumn" value="Add"></p>
<h5>When we click "Add" button will show new textarea</h5>
<textarea placeholder="Please input text here.."></textarea>
</td>
<td style="color:Black">
Example 5
</td>
<td style="color:Black">
Example 6
</td>
<td style="color:Black">
Example 7
</td>
<td style="color:Black">
Example 8
</td>
<td style="color:Black">
Example 9
</td>
</tr>
</table>
</form>
</div>
</body>


Here's a sample to generate text-area
function myFunction() {
var x = document.createElement("FORM");
x.setAttribute("id", "myForm");
document.body.appendChild(x);
var y = document.createElement("TEXTAREA");
document.getElementById("myForm").appendChild(y);
}
<button onclick="myFunction()">Add</button>

Related

How to get sum of all row of the column from javascript?

I have an html table
<table class="table">
<thead class="table-primary">
<tr>
<th>Date</th>
<th>SKU</th>
<th style="width: 300px;">Activity</th>
<th>QTY</th>
<th>RATE</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>Test</strong><br />
Manish Rijal - JOB# 12345 <br />
1TestBiraz
</td>
<td style="text-align: center">78</td>
<td style="text-align: center">56</td>
<td style="text-align: center">99</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>qwert</strong><br />
Manish Rijal - JOB# 12345 <br />
asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong> Leave</strong><br />
Manish Rijal - JOB# 12345 <br />
asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
</tbody>
</table>
<div>
<a style="margin-left: 305px;">BALANCE DUE</a>
<strong>$800.00</strong>
</div>
The value of the amount is dynamic and there might be multiple row. Right Now I have done hard coded for $800.00. How can I sum the value of all Amount Column and display in Balance Due. I tried by couldn't get there.
https://jsfiddle.net/n6qo3u1b/

If you want to get the prices from Quantity and Rate then you can do it like.
var price = 0;
$('table tbody tr').each(function() {
var rate = +$(this).find("td:nth-last-child(3)").text();
var amount = +$(this).find("td:nth-last-child(2)").text();
price = price + (rate * amount);
})
$('.price strong').text('$' + price)
Please note I've added the class price to the div that surrounds the "price/strong"
Demo
var price = 0;
$('table tbody tr').each(function() {
var rate = +$(this).find("td:nth-last-child(3)").text();
var amount = +$(this).find("td:nth-last-child(2)").text();
price = price + (rate * amount);
})
$('.price strong').text('$' + price)
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-top: 30px;
}
td,
th {
/*border: 1px solid #dddddd;*/
text-align: left;
padding: 8px;
}
thead {
background: #DCE9F1
}
thead tr th {
color: #4F90BB;
}
tr:nth-child(even) {
background-color: #dddddd;
width: 50%;
}
hr {
color: #5A97BF;
width: 90%;
text-align: center;
height: 1px;
}
hr.new4 {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead class="table-primary">
<tr>
<th>Date</th>
<th>SKU</th>
<th style="width: 300px;">Activity</th>
<th>QTY</th>
<th>RATE</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>Test</strong><br /> Manish Rijal - JOB# 12345 <br /> 1TestBiraz
</td>
<td style="text-align: center">78</td>
<td style="text-align: center">56</td>
<td style="text-align: center">99</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>qwert</strong><br /> Manish Rijal - JOB# 12345 <br /> asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong> Leave</strong><br /> Manish Rijal - JOB# 12345 <br /> asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
</tbody>
</table>
<hr style="border-top: 1px dotted #5A97BF" />
<div class="price">
<a style="margin-left: 305px;">BALANCE DUE</a>
<strong>$800.00</strong>
</div>

You can also do it with vanilla javascript like so:
const nodes = document.querySelectorAll('td:last-child')
const arr = Array.from(nodes);
const res = arr.reduce((acc, curr) => {
return acc += Number(curr.textContent)
}, 0)
console.log(res);

Input field to the next line with CSS or JavaScript without altering the HTML

I'm working on a Survey and on the system that I work I don't have access to change the HTML directly but I can add CSS or JavaScript to the existing code.
I have the following HTML and I would like the input field to be right underneath the first name. I can only use the ID's as the classes are the same in many other fields that I don't want changing them. I'm a bit stack so if anyone has an idea I would really appreciate..Thanks!
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>

Please check if this helps you to achieve the desired style
td.pd_label ~ td {
float: left;
position: absolute;
left: 7px;
margin-top: 1em;
}
The same selector (td.pd_label ~ td) works in JavaScript also.

You can use the + selector
#pnlPersonalDetails2 + .surveyquestions td {
display:block;
}
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
<div id="someId"></div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>

How to overwrite a CSS class at the press of a button and remove it with another button?

I and trying to apply a blinking effect css class to the whole table when someone presses the button. However, some rows are not being affected by the blink class.
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

All the elements that have their own background-color style won't inherit the style from the container. You need to put the class on those elements.
$("#alarm").click(function() {
$("#tableContainer td, #tableContainer th").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer td, #tableContainer th").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

Check This
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#status").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#status").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr id="status" class="status">
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

The answer was to make my jQuery addClass and Remove Class to be more specific:
$("#alarm").click(function(){
$("#tableContainer th").addClass("blink");
$("#tableContainer td").addClass("blink");
});
$("#stopAlarm").click(function(){
$("#tableContainer th").removeClass("blink");
$("#tableContainer td").removeClass("blink");
});

How to add a CSS class with animation to the border of a table's cells?

I am trying to add a blinking effect to my table when a button is pressed. My code kind of achieves this by making the whole table blink however it makes the data in the cells without an existing css hard to read. Therefore, I am trying to figure out if it is possible to make the just the border of each cell have the blinking effect instead of the whole cell so that the data is still easily readable as seen in the status row. Is this possible without having to add a css to every single cell?
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

To achieve this you first need to put borders on the th and td elements. Then you can amend the .blink selector to amend the colours of the border, instead of the background, like this:
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
table {
border-collapse: collapse;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
border: 2px solid #FFF;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink th,
.blink td {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
border-color: white;
}
to {
border-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>

jQuery expand/collapse a link

I am working with a MVC view that has a 3 columns table. The table displays a list of Products. Column #1 (product name) contains links to a product specific page. When a user clicks on the links, I want to expand and display the product description and at the end of the product description, I want to include a link that takes the user to the product page. If a user clicks on the link again, I want to collapse it back. I have a model that represents the product and the product description is stored in its own field.
The table is built and populated as below. Any insight on how to achieve the expand/collapse via jQuery is very much appreciated.
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
foreach (product p in model.products)
{
<tr>
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
}
</tbody>
</table>

The easiest way to to utilize product IDs as well. Add the specific product ID as a data attribute, then using jQuery, pull that attribute and reuse it to target rows containing the descriptions.
$('.productname').on('click', function() {
var id= $(this).attr('data-id');
$(this).toggleClass('active');
$('.data' + id).slideToggle(500);
});
.hide {display: none; }
/* -- below is just to "pretty up" the snippet ------ */
table {
width: 100%;
background: #eee;
border-collapse: collapse;
border: 1px solid #aaa;}
th { background: #cef; color: #4cf; text-transform: uppercase; font-size: 0.8em; padding: 3px;border: 1px solid #aaa;}
td { font-size: 1.1em; padding: 5px 10px; border: 1px solid #aaa; border-bottom: none; }
tr.collapsed td { padding: 0; border: none; }
.productname:hover, .active { background: #eff; }
.productdesc { padding: 5px 10px; background: #eff; border-top: 1px solid #aaa; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!--
foreach (product p in model.products)
{
-->
<tr class="productname" data-id="prodID00">
<!-- Change data-id="prodID00" to data-id="#p.productI‌D" -->
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID00">
<!-- Change class="hide productdesc dataprodID00" to class="hide productdesc data#p.productI‌D" -->
<p>#p.productDescription #p.productLink</p></div>
</td>
</tr>
<!-- } -->
<!-- below are just manual iterations of the row above -->
<tr class="productname" data-id="prodID01">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID01">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID02">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID02">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID03">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID03">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID04">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID04">
<p>product description and link</p></div>
</td>
</tr>
</tbody>
</table>
Note where the prodID is located in the rows.....
I removed the foreach function and brackets because it's invalid HTML. But if they are there and dynamically generate the HTML it'll work fine. The rows I used are just manual iterations opposed to dynamic iterations.

Categories

Resources