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>
Related
Currently using the Bootstrap Table library by wenzhixin. I'm trying to find a way to set up a filter that use the data range principle.
This code "https://jsfiddle.net/wenyi/06pg2wms/11/" is working fine but it doesn't work when the format of date (in the bootstrap table) is like this : YYY-MM-DD HH:mm:ss.
Does someone know a way to solve this ?
Code works with this type of date format :
<tr id="tr-id-1" class="tr-class-1">
<td id="td-id-1" class="td-class-1">2019-02-01</td>
<td>0</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">2019-02-02</td>
<td>1</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">2019-02-03</td>
<td>2</td>
</tr>
But I want something that work with these dates format :
<tr id="tr-id-1" class="tr-class-1">
<td id="td-id-1" class="td-class-1">2019-02-01 13:21:30</td>
<td>0</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">2019-02-02 15:23:11</td>
<td>1</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">2019-02-02 15:23:11</td>
<td>1</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">2019-02-03 20:21:43</td>
<td>2</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">2019-02-03 20:21:43</td>
<td>2</td>
</tr>
Javascript code :
$(function()
{
$('#table').bootstrapTable()
}
)
//Moment.JS Return Date Ranges
function getDates(startDate, stopDate) {
var dateArray = [];
var currentDate = moment(startDate);
var stopDate = moment(stopDate);
while (currentDate <= stopDate) {
dateArray.push( moment(currentDate).format('YYYY-MM-DD'))
currentDate = moment(currentDate).add(1, 'days');
}
return dateArray;
}
$('#ok').click( function()
{
var $table = $('#table')
var from=$("input[type=date][name=date1]" ).val();
var to=$("input[type=date][name=date2]" ).val();
$table.bootstrapTable('filterBy',{ ETA: getDates(from,to)})
})
HTML code :
<div id="toolbar">
<div class="form-inline" role="form">
<div class="form-group">
<span>From Date </span>
<input name="date1" class="form-control w70" type="date" >
</div>
<div class="form-group">
<span>To Date </span>
<input name="date2" class="form-control w70" type="date">
</div>
<button id="ok" type="submit" class="btn btn-primary">OK</button>
</div>
</div>
<table id="table" data-toggle="table" data-toolbar="#toolbar" >
<thead>
<tr>
<th data-field="ETA">Date</th>
<th data-field="number">Number</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="tr-class-1">
<td id="td-id-1" class="td-class-1">2019-02-01</td>
<td>0</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">2019-02-02</td>
<td>1</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">2019-02-03</td>
<td>2</td>
</tr>
<tr id="tr-id-4" class="tr-class-4">
<td id="td-id-4" class="td-class-4">2019-02-04</td>
<td>3</td>
</tr>
<tr id="tr-id-5" class="tr-class-5">
<td id="td-id-5" class="td-class-5">2019-02-05</td>
<td>4</td>
</tr>
<tr id="tr-id-6" class="tr-class-6">
<td id="td-id-6" class="td-class-6">2019-02-06</td>
<td>5</td>
</tr>
<tr id="tr-id-7" class="tr-class-7">
<td id="td-id-7" class="td-class-7">2019-02-07</td>
<td>6</td>
</tr>
<tr id="tr-id-8" class="tr-class-8">
<td id="td-id-8" class="td-class-8">2019-02-08</td>
<td>7</td>
</tr>
<tr id="tr-id-9" class="tr-class-9">
<td id="td-id-9" class="td-class-9">2019-02-09</td>
<td>8</td>
</tr>
<tr id="tr-id-10" class="tr-class-10">
<td id="td-id-10" class="td-class-10">2019-02-10</td>
<td>9</td>
</tr>
</tbody>
</table>
I've got 2 tables that I'm trying to shift rows between in HTML using JavaScript, but I'm not having much luck at the moment. I've tried plenty of solutions from here but none of them seem to be working for me at the moment!
Currently my HTML code is as per below
.container {
overflow: hidden
}
.tab {
float: left
}
.tab-btn {
margin: 50px
}
button {
display: block;
margin-bottom: 20px
}
<div class="container-fluid">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Manage Schools</h5>
<div class="container">
<div class="tab">
<table class="table table-sm table-hover" id="table1">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td>1</td>
<td>School A</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>School B</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>School C</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>School D</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>5</td>
<td>School E</td>
<td>
<input type="checkbox" "></td>
</tr>
<tr>
<td>6</td>
<td>School F</td>
<td><input type="checkbox "></td>
</tr>
</table>
</div>
<div class="tab tab-btn ">
<button>Add</button>
<button>Remove</button>
</div>
<div class="tab ">
<table class="table table-sm table-hover " id="table2 ">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Ideally, once a row has been shifted from table1 to the table2, it can then be removed from the table2 using the remove button. Also being able to select multiple rows and moving them at the same time would be a huge advantage.
Any and all help with the JavaScript would be very much appreciated!
I have a Bootstrap table in the following format
<div class="col-sm-8">
<div class="tablecontainer">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Instances</th>
<th scope="col">Chains</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='[0]' class='jmolInline'>1</td>
<td>4LF8|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[1]' class='jmolInline'>2</td>
<td>4LF7|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[2]' class='jmolInline'>1</td>
<td>4B3W|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[3]' class='jmolInline'>2</td>
<td>4AA4|1|A</td>
</tr>
</tbody>
</table>
</div>
I would like to get the ids of the checkboxes as they are being checked using d3. I've tried the following but it doesn't seem to work. What would be the best way to get the checked ids stored in an array using d3?
var checked = []
var boxes = d3.selectAll("input.jmolInline:checked");
boxes.each(function() {
checked.push(this.id)
});
console.log(checked)
use this code to get the job done
var inputs = d3.selectAll('input[type="checkbox"]')._groups[0];
document.getElementById('submit').addEventListener('click', function() {
var checked = [];
for (i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked.push(inputs[i].id);
}
}
document.getElementById('result').innerHTML = 'Array of ids selected ' + checked;
console.log(checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="col-sm-8">
<div class="tablecontainer">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Instances</th>
<th scope="col">Chains</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='[0]' class='jmolInline'>1</td>
<td>4LF8|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[1]' class='jmolInline'>2</td>
<td>4LF7|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[2]' class='jmolInline'>1</td>
<td>4B3W|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[3]' class='jmolInline'>2</td>
<td>4AA4|1|A</td>
</tr>
</tbody>
</table>
<button id="submit">get Id</button>
<div id="result"></div>
</div>
$(function() {
$('.sus').click(function(e) {
if($(".case").is(":checked")){
for (var i = Things.length; i >= 0; i++) {
Things[i]
}
alert("checkeado");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success sus">Success</button>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Checkbox</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
I'm trying to make ckecked to be showing me the first name of which is ckecked.
As shown in the picture
Or make a for which to cross the table and show me the ones that are checked
enter image description here
This should work for you. You will need to remove the extra comma (,) at the end.
$(function() {
$('.sus').click(function(e) {
var checkedNames = '';
var $things = $('.case:checked');
if($things.length > 0){
for (var i = 0; i < $things.length; i++) {
checkedNames += $($things[i]).closest('tr').find('td:first').text() + ',';
}
alert("checkeado " + checkedNames);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success sus">Success</button>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Checkbox</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
I have a table which can have variable # of rows. how can I disable all checkboxes at once?
<table border="1" class="myTable grid">
<tr align="center">
<td> </td>
<td>A</td>
</tr>
<tr align="center">
<td>1</td>
<td><input type="checkbox" name="cb1;1" value="1"></td>
</tr>
<td>2</td>
<td><input type="checkbox" name="cb2;1" value="1" checked></td>
</tr>
<tr align="center">
</table>
Here is a javascript only solution that disables all checkboxes in myTable.
document.getElementByClassName("myTable").querySelectorAll("input[type='checkbox']").disabled = true;
A jQuery solution would be:
$('.myTable input[type=checkbox]').attr('disabled', 'disabled');
Alternatively:
document.querySelectorAll('.myTable input[type=checkbox]').disabled = true;
Try utilizing a for loop to iterate NodeList returned by document.querySelectorAll(selectors) , set each [type=checkbox] element to disabled within for statement
var inputs = document.querySelectorAll("[type=checkbox]");
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
<table border="1" class="myTable grid">
<tbody>
<tr align="center">
<td> </td>
<td>A</td>
</tr>
<tr align="center">
<td>1</td>
<td>
<input type="checkbox" name="cb1;1" value="1">
</td>
</tr>
<td>2</td>
<td>
<input type="checkbox" name="cb2;1" value="1" checked>
</td>
</tr>
<tr align="center">
</tbody>
</table>