Develop Reference

How to insert the selected checkbox value into another column?

I am making a cart for my web app where user can select the item that they want in the product table by checking the checkbox, then the checkbox will show the selected item beside the table to show the user what he have selected. Assume the product list have 500+ products.
I have wrote a simple jQuery that manage to insert the selected items into "selecteditemlist", but even after I uncheck the checkbox, the product code still stay in the selected list.
Thanks in advance.
$('input[type="checkbox"]').change(function() {
var itemcode = $(this).closest("tr").find("td:nth-child(2)").text();
$("#selecteditemlist").append(itemcode);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-10">
<table>
<tr>
<th>No</th>
<th>Item Code</th>
<th>Description</th>
<th>Price</th>
<th>Selection</th>
</tr>
<tr>
<td>1</td>
<td>ABC123</td>
<td>Item1</td>
<td>$1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>BCD456</td>
<td>Item2</td>
<td>$1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>NBV345</td>
<td>Item3</td>
<td>$1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>POI345</td>
<td>Item4</td>
<td>$1</td>
<td><input type="checkbox"></td>
</tr>
</table>
</div>
<div class="col-2">
<div class="row sticky-top">
<h5><u>Selected Item</u></h5>
<div class="border border-danger" id="selecteditemlist">
</div>
</div>
</div>
</div>

By JavaScript you can achieve by doing like in below snippet :
Here main thing to notice is document.getElementById("selecteditemlist").textContent = ""; , which is important as on each subsequent clicks on checkbox leads to more and more addition to present data . By using this you can achieve that only 1 time data is added
var filterCheck = document.getElementsByClassName("prdCheck");
for (let i = 0; i < filterCheck.length; i++) { //looped through all wishlist classes so all can be run with single code
filterCheck[i].addEventListener("click", applyFilter);
}
function applyFilter() {
var i;
var filterLabel = document.getElementsByClassName("prdName");
var filterCheck = document.getElementsByClassName("prdCheck");
document.getElementById("selecteditemlist").textContent = "";
for (i = 0; i < filterCheck.length; i++) {
if (filterCheck[i].checked == true) {
var div = document.createElement("SPAN")
var txt = filterLabel[i].textContent
var text = document.createTextNode(txt)
div.appendChild(text)
document.getElementById("selecteditemlist").appendChild(div);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-10">
<table>
<tr>
<th>No</th>
<th>Item Code</th>
<th>Description</th>
<th>Price</th>
<th>Selection</th>
</tr>
<tr>
<td>1</td>
<td class="prdName">ABC123</td>
<td>Item1</td>
<td>$1</td>
<td><input type="checkbox" class="prdCheck"></td>
</tr>
<tr>
<td>2</td>
<td class="prdName">BCD456</td>
<td>Item2</td>
<td>$1</td>
<td><input type="checkbox" class="prdCheck"></td>
</tr>
<tr>
<td>3</td>
<td class="prdName">NBV345</td>
<td>Item3</td>
<td>$1</td>
<td><input type="checkbox" class="prdCheck"></td>
</tr>
<tr>
<td>4</td>
<td class="prdName">POI345</td>
<td>Item4</td>
<td>$1</td>
<td><input type="checkbox" class="prdCheck"></td>
</tr>
</table>
</div>
<div class="col-2">
<div class="row sticky-top">
<h5><u>Selected Item</u></h5>
<div class="border border-danger" id="selecteditemlist">
</div>
</div>
</div>
</div>

How to add dynamic texfield while clicking a checkbox?

I need to create textfield dynamically when I click checkbox in table. In table I have around 500 data. Each data has check box and user can search and select parameters. As below image, If user click Testing 1 checkbox from table, Same Testing1 value should present in Parameter name text field.
If the user selects Testing 2 checkbox, dynamically Textfield needs be added and Testing 2 value should be present in created textfield. If user uncheck checkbox, textfield has to be removed from table. I have attached snapshot for reference.
Below code for TextField which resides in table.
<div class="tab-content">
<div id="protocol" class="tab-pane fade in active">
<div class="span3 border-0" style="overflow: scroll">
<table id="addParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th>Parameter Name</th>
<th>Data Type</th>
<th>Expected Set Value</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr>
<td>
<input type="text" id="parameterName" class="parameterName" name="parameter_name">
</td>
<td>
<input type="text" class="parameterDscription" name="parameter_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>

You can do it like this:
$("#paramTable input[type='checkbox']").on("click", function() {
if ($(this).is(":checked")) {
let name = $(this).parent("td").next("td").text();
let newname = name.replace(" ", "_");
let newrow = $("<tr>");
let newcell = $("<td>");
let newinput = $("<input type='text' class='parameterName' name='" + newname + "' id='" + newname + "' value='" + name + "'/>");
newcell.append(newinput);
newrow.append(newcell);
let newcells = $("<td><input type='text' class='parameterDscription' name='parameter_description'></td><td><input type='text' class='expectedValue' name='expected_value'></td>")
newrow.append(newcells);
$("tbody.parameter_table").append(newrow);
} else {
let name = $(this).parent("td").next("td").text();
let newname = name.replace(" ", "_");
$("#addParamTable").find("#" + newname).closest("tr").remove();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramTable">
<tr>
<td><input type="checkbox"/></td>
<td>Testing 1</td>
<td>1, 4, 6, 5, 9</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>Testing 2</td>
<td>1, 4, 3, 5</td>
</tr>
</table>
<div class="tab-content">
<div id="protocol" class="tab-pane fade in active">
<div class="span3 border-0" style="overflow: scroll">
<table id="addParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th>Parameter Name</th>
<th>Data Type</th>
<th>Expected Set Value</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr>
<td>
<input type="text" id="parameterName" class="parameterName" name="parameter_name">
</td>
<td>
<input type="text" class="parameterDscription" name="parameter_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>

Getting value from specific cell in an html table is not working using JQuery

I am trying to get row data from a table so I can use it in a modal. Below is my code for Views.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#acctInfo").DataTable();
$(".td_0").hide();
});
</script>
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container clearfix">
<h1>View Accounts</h1>
</div>
</section><!-- #page-title end -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<table class="table table-striped table-condensed table-hover" id="acctInfo">
<thead>
<tr>
<th class="td_0">Account Id</th>
<th>Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Business Name</th>
<th>Account Type</th>
<th></th>
#*<th></th>*#
</tr>
</thead>
<tbody>
#foreach (var i in Model.AccountsViews)
{
<tr id="rowx">
<td > #Html.DisplayFor(m => i.AcctId)</td>
<td > #Html.DisplayFor(m => i.EmployeeId)</td>
<td > #Html.DisplayFor(m => i.FirstName)</td>
<td > #Html.DisplayFor(m => i.MiddleName)</td>
<td > #Html.DisplayFor(m => i.LastName)</td>
<td > #Html.DisplayFor(m => i.BusinessName)</td>
<td > #Html.DisplayFor(m => i.AccountType)</td>
#*<td>Edit</td>
<td>Delete</td>*#
<td>
<input type="button" value="Edit" class="btn btn-success form-control" onclick="OpenSelected()" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</section>
<div id="divEdit" style="display: none;">
<input type="hidden" id="hidId"/>
<table>
<tr>
<td>Employee Id</td>
<td><input type="text" id="txtEmployeeId" class="form-control"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txtFirstName" class="form-control"/></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="txtMiddleName" class="form-control"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLastName" class="form-control"/></td>
</tr>
<tr>
<td>Business Name</td>
<td><input type="text" id="txtBusinessName" class="form-control"/></td>
</tr>
#*<tr>
<td>Account Type</td>
<td>
#Html.DropDownListFor(o => )
</td>
</tr>*#
</table>
</div>
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
With that code, I am able to invoke the alert method with the following code:
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
but it has no value of the cell that I need. It only has "localhost/1234 Says: " the alert has no value. I need your help. Thank you.

Give a try to following code... .closset would give you the selected row and than you find columns value on the base of indexes.
<script>
$('.btn-success').click(function () {
var a = $(this).closest("tr").find('td:eq(0)').text();
var b = $(this).closest("tr").find('td:eq(1)').text();
alert(a);
});
</script>

Try using :eq() selector at this context
You should use .text() instead to retrieve its text content,
var t = $('#table');
var val1 = $(t).find('tr:eq(2) td:eq(4)').text();
alert(val1);
Or do,
alert($('#table tr:eq(2) td:eq(4)').text());
DEMO

How to switch decimal and rounded whole number using javascript

I have a table that renders data from my Django app which uses PostgreSQL database. How would I add a button to switch the Score column so it'll display the numbers between its original decimal value and rounded whole numbers?
Here is an example of what it would look like: https://jsfiddle.net/8a66gtww/
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="track_id"><input id="checkAll" type="checkbox" /></th>
<th>First Name</th>
<th>Last Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="2" /></td>
<td>John</td>
<td>Do</td>
<td>65.85</td>
</tr>
<tr class="even">
<td class="track_id"><input type="checkbox" name="track_id" value="1" /></td>
<td>Michael</td>
<td>Smith</td>
<td>88.25</td>
</tr>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="4" /></td>
<td>Donald</td>
<td>James</td>
<td>120.11</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<br />
<button onclick="myFunction()">Switch</button> // Switches score between decimal and rounded whole number

See if it helps. I just modified your html a little for storing your score values so it can undo the round.
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="track_id"><input id="checkAll" type="checkbox" /></th>
<th>First Name</th>
<th>Last Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="2" /></td>
<td>John</td>
<td>Do</td>
<td>65.85</td>
<input type="hidden" value="65.85">
</tr>
<tr class="even">
<td class="track_id"><input type="checkbox" name="track_id" value="1" /></td>
<td>Michael</td>
<td>Smith</td>
<td>88.25</td>
<input type="hidden" value="88.25">
</tr>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="4" /></td>
<td>Donald</td>
<td>James</td>
<td>120.11</td>
<input type="hidden" value="120.11">
</tr>
</tbody>
<tfoot></tfoot>
</table>
<br />
<button class="switch">Switch</button>
and jquery is:
$('.switch').click(function () {
$('.table tbody tr td:nth-child(4)').each(function() {
if ($(this).html().indexOf('.') >= 0) {
$(this).html(Math.round($(this).html()));
} else {
$(this).html($(this).parent().find('input[type=hidden]').val());
}
});
});
It verifies if your score has the decimal dot. If the score is decimal, then it rounds it. If the score isn't decimal, it restores the original value.
https://jsfiddle.net/jdm3eovz/

Here's something to get you started:
<script>
window.switcher = {
johnsScore: 0
}
switcher.switch = function(){
var $johnsScore = $('tbody > tr td').eq(3)
var $johnsCheckbox = $('tbody > tr input')
if ($johnsCheckbox.prop('checked')) {
if (this.johnsScore > 0) {
$johnsScore.text(this.johnsScore)
this.johnsScore = 0
}
else {
this.johnsScore = $johnsScore.text()
$johnsScore.text(Math.round(this.johnsScore))
}
}
}
</script>
The button then changes to:
<button onclick="switcher.switch()">Switch</button>

Add <tr> element in the table

I want when i click on the +add more button it should add the element same as in line no.1 also the S.No should incremented...and each row have remove option.
code in JSFIDDLE
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input id="1a" type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
<tr>
</tbody>
</table>

Jquery clone() is for cloning DOM element and then you can append it. Consider code something like this:
$(function(){
$("#c").click(function(e){
e.preventDefault();
$("table.table tbody tr:first").clone().appendTo("table.table tbody");
});
})
DEMO
For increment of serial number:
$(function(){
var counter = 1;
$("#c").click(function(e){
e.preventDefault();
var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
tr.find("td:eq(0)").text(++counter);
});
})
See it in action

You can use .clone() to copy your first tr:
$(".text-right").on("click", function() {
var tr = $("table tr:eq(1)").clone(true);
$(tr).find("td:first").text($("table tr").length - 1);
$("table").append(tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
<tr>
</tbody>
</table>
I remove id from input cause id must be unique. Also modify a bit the code to increase the numeric value of the td correct.

try:
html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control"/></br><a class="rm" href="#">remove</a>
</td>
</tr>
</tbody>
</table>
js:
function updateNumber() {
x = 0
$('table.table tbody tr').each(function(i,v){
$(this).find('td:eq(0)').text(x+1)
x++;
});
}
$("#c").on('click',function(e){
e.preventDefault();
var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
updateNumber();
console.log($('table.table tbody tr'));
});
$('body').on("click",".rm", function(e) {
e.preventDefault();
$(this).parents('tr').remove();
updateNumber();
});
jsfiddle:https://jsfiddle.net/pjeruccb/3/

Have a look at this:
$(".text-right").on("click", function() {
var prevNo = parseInt($(".table tr:last td:first-child").text());
var tr = $("table tr:eq(1)").clone(true);
$("table").append(tr);
$('.table tr:last-child td:first-child').html(prevNo + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
</tr>
</tbody>
</table>