I'm trying to add and remove the text of the cell 2 cells of that row when they are checked.
Let's say they have 4 columns on the table and want to show/hide some row in a different section of the page.
My goal is to add/display and delete/hide the selected row value based on the checkbox value (0|1). And for each row values, it should have a button/link (X) to delete that and uncheck the checkbox in the table.
<h1 style="text-align:center">Selector/Removal</h1>
<h4 class="selected_values"></h4>
<button onclick="clearSelection();">Clear</button>
<table id="" class="table table-bordered table-responsive table-striped">
<tr class="" style="background-color: #237ec2; color: white;">
<td class="text-center"><span>A</span></td>
<td class="text-center"><span>B</span></td>
<td class="text-center"><span>C</span></td>
<td class="text-center"><span>D</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="usercheck"><span>A1</span></td>
<td>
<h5>B1</td>
<td>
<h5>C1</h5></td>
<td>
<h5>D1</h5></td>
</tr>
<tr>
<td>
<input type="checkbox" class="usercheck"><span>A2</span></td>
<td>
<h5><span class="second_col">B2</span></h5></td>
<td>
<h5>C2</h5></td>
<td>
<h5>D2</h5></td>
</tr>
<tr style="">
<td>
<input type="checkbox" class="usercheck">
<span>A3</span></td>
<td>
<h5><span class="second_col">B3</span></h5></td>
<td>
<h5>C3</h5></td>
<td>
<h5>D3</h5></td>
</tr>
</table>
JavaScript that I tried is the below:
$(document).ready(function() {
$('.usercheck').change(function() {
$('.selected_values').empty();
$(".usercheck:checked").each(function(index) {
var chain = "";
chain = $(this).html(".usercheck").val();
$('.selected_values').append(chain + ' ' + '<span id="removeVal" style="color:red;">X</span>');
});
});
});
function clearSelection(){
$('.selected_values').empty();
$('.usercheck').attr('checked','false');
}
Here is the link to the js fiddle which I tried to work.
I was able to display the content but by giving value to just one column which is not the right way to do I suppose.
https://jsfiddle.net/rahilAhmed/y4fzj66o/
Without re-writing your whole HTML here is how I made it work.
What I did was I added an ID to each span that gets created. That ID is later used to iterate over all checkboxes and find which one needs to be unchecked then un-check it.
$(document).ready(function() {
$('.usercheck').change(function() {
$('.selected_values').empty();
$(".usercheck:checked").each(function(index) {
var chain = "";
chain = $(this).html(".usercheck").val();
$('.selected_values').append(chain + ' ' + '<span id='+ chain + ' class="removeVal" style="color:red;">X</span>');
});
$(".removeVal").click(checkRemove);
});
});
function checkRemove(e) {
var removeId = e.target.id;
$(".usercheck").each(function(index,checkbox) {
if (checkbox.value == removeId) {
checkbox.checked = false;
}
});
e.target.parentNode.previousSibling.remove();
e.target.remove();
}
function clearSelection(){
$('.selected_values').empty();
$('.usercheck').prop('checked',false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 style="text-align:center">Selector/Removal</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3">
Selected Users
<div class="" >
<h4 class="selected_values"></h4>
</div>
</div>
<div class="col-xs-1"><button onclick="clearSelection();">Clear</button></div>
<div class="col-xs-8">
<table id="" class="table table-bordered table-responsive table-striped">
<tr class="" style="background-color: #237ec2; color: white;">
<td class="text-center" ><span >A</span></td>
<td class="text-center" ><span >B</span></td>
<td class="text-center" ><span >C</span></td>
<td class="text-center" ><span >D</span></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A1[B1]"><span class="first_col" value="A1" >A1</span></td>
<td><h5><span class="second_col">B2</span></h5></td>
<td><h5>C1</h5></td>
<td><h5>D1</h5></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A2[B2]"><span class="first_col" value="a2" >A2</span></td>
<td><h5><span class="second_col">B2</span></h5></td>
<td><h5>C2</h5></td>
<td><h5>D2</h5></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A3[B3]">
<span class="first_col" value="a3" >A3</span></td>
<td><h5><span class="second_col">B3</span></h5></td>
<td><h5>C3</h5></td>
<td><h5>D3</h5></td>
</tr>
</table>
</div>
</div>
</div>
You can do this : JsFiddle
For unchecked Checkbox, you must do this :
.prop('checked', false);
Related
Currently I have a dynamic table that takes the values of queries to the database using forms (django)
When the table has been filled with information (there are 7 columns, but 5 of them are not visible despite having values), I would like to know how can I do so that when I select a row from the table or more, the values of the row are 'injected' into two other separate tables.
If only one row is selected from the first table, the values will be injected into two other tables, if two rows are selected from the first table then the values will be injected into 4 tables (2 tables for each selected row).
You can simply loop through checked checkboxes and then using .closest("tr") get reference of closest tr from that checked checkboxes then use .find("td:eq(1/*these values can change */)").text() to get td values and add these values to input boxes and append same to your tables.
Demo Code :
$(function() {
$("input.select-all").click(function() {
var checked = this.checked;
$("input.select-item").each(function(index, item) {
item.checked = checked;
});
});
//column checkbox select all or cancel
$("button#show-selected ,button#select-all").click(function() {
show_All();
});
function show_All() {
var html = "";
var html1 = "";
//loop through checked checkboxes
$("#searchVariantTable tbody input[type=checkbox]:checked").each(function(index, item) {
var selector = $(this).closest("tr") //get closest tr
//generate htmls
html1 += `<tr>
<td><input id="gene_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find('td:eq(1)').text()}" readonly/></td><td><input id="variant_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(2)").text()}" readonly/></td>
</tr>`
html += `<tr>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(3)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(4)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(5)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(6)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(7)").text().trim()}" readonly/></td>
</tr>`
});
$("#secondTable1").html(html1)
$("#secondTable2").html(html)
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<div class="container">
<div class="row" id="searchVariantTable">
<div class="col">
<table class="table table-hover mt-5">
<thead class="variants-table-thead">
<tr>
<th class="active">
<input type="checkbox" class="select-all checkbox" name="select-all" />
</th>
<th>Gene</th>
<th>Variant</th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
</tr>
</thead>
<!--The <tr> are populated dynamically after form submit, I just added some dummy values.
BACKEND: (Python-Django) -->
<tbody class="variants-table-tbody">
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene1</td>
<td class="warning">Variant1</td>
<td style="display: none;"> #1 value1</td>
<td style="display: none;"> #2 value1</td>
<td style="display: none;"> #3 value1</td>
<td style="display: none;"> #4 value1</td>
<td style="display: none;"> #5 value1</td>
</tr>
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene2</td>
<td class="warning">Variant2</td>
<td style="display: none;"> #1 value2</td>
<td style="display: none;"> #2 value2</td>
<td style="display: none;"> #3 value2</td>
<td style="display: none;"> #4 value2</td>
<td style="display: none;"> #5 value2</td>
</tr>
</tbody>
</table>
<button id="select-all" class="btn btn-primary">Select all</button>
<button id="show-selected" class="btn btn-primary">Show selected</button>
</div>
</div>
<div class="row">
<div class="col-6">
<table class="table mt-5">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Gene</th>
<th style="text-align:center;">Variant</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable1">
<!--data will come here -->
</tbody>
</table>
</div>
<div class="col-6">
<div style="text-align: center;">
<h5>Genomic coordinate</h5>
</div>
<table class="table mt-4">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Opt #1</th>
<th style="text-align:center;">Opt #2</th>
<th style="text-align:center;">Opt #3</th>
<th style="text-align:center;">Opt #4</th>
<th style="text-align:center;">Opt #5</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable2">
<!--data will come here -->
</tbody>
</table>
</div>
</div>
</div>
$(document).ready(function() {
$("#t1").hide(); // hide table by default
$('#sp1').on('click', function() {
$("#t1").show();
});
$('#close').on('click', function() {
$("#t1").hide();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>
<div class="col-md-12 col-12 table-responsive">
<div class="form-group">
<div class="col-md-12" style="padding: 10px !important;" align="center">
<div class="form-group">Main heading</div>
</div>
<table class="table table-hover">
<thead class="lbbg3">
<tr>
<td style="width: 800px;">Sub heading 1</td>
<td>Sub heading 2</td>
</tr>
</thead>
<tbody>
<tr>
<th style="background: #eef7fc; text-align: left;" colspan="2">
<button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button><button class="table-minus-btn" id="close"><i class="fa fa-minus"></i></button> Child Heading
</th>
</tr>
<tr>
<td colspan="2">
<div class="table1shw">
<table class="table1 table-hover" id="t1">
<tr>
<td style="text-align: left; width: 800px;">
Row 1
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<a href="#doc">
<input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
<label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
</a>
</div>
</td>
</tr>
<tr>
<td style="text-align: left; width: 800px;">
Row 2
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
<label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Hi, Currently i am using two button Plus and minus, Just i need to display at time one button. when the plus button click the hidden table will get displayed and minus button should appear and plus button is hide. same for the minus button too. more we can say toggle button. also required can we display at time only one hidden table.
All the code and table currently working fine i used this method for accordion but not used for table.
also you can write it a bit shorter
$(document).ready(function() {
$("#t1, #close").hide();
$('#sp1, #close').on('click', function() {
$('#t1, .table-plus-btn, .table-minus-btn').toggle();
});
});
You can hide / show buttons based on the click. I added the function toggleButtons(show) where show is equal to if you want to show or hide the row.
function toggleButtons(show) {
if (show) {
$("#sp1").hide();
$("#close").show();
} else {
$("#sp1").show();
$("#close").hide();
}
}
$(document).ready(function() {
$("#t1").hide(); // hide table by default
$('#sp1').on('click', function() {
toggleButtons(true)
$("#t1").show();
});
$('#close').on('click', function() {
toggleButtons(false)
$("#t1").hide();
});
function toggleButtons(show) {
if (show) {
$("#sp1").hide();
$("#close").show();
} else {
$("#sp1").show();
$("#close").hide();
}
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>
<div class="col-md-12 col-12 table-responsive">
<div class="form-group">
<div class="col-md-12" style="padding: 10px !important;" align="center">
<div class="form-group">Main heading</div>
</div>
<table class="table table-hover">
<thead class="lbbg3">
<tr>
<td style="width: 800px;">Sub heading 1</td>
<td>Sub heading 2</td>
</tr>
</thead>
<tbody>
<tr>
<th style="background: #eef7fc; text-align: left;" colspan="2">
<button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button>
<button class="table-minus-btn" id="close" style="display: none"><i class="fa fa-minus"></i></button>
Child Heading
</th>
</tr>
<tr>
<td colspan="2">
<div class="table1shw">
<table class="table1 table-hover" id="t1">
<tr>
<td style="text-align: left; width: 800px;">
Row 1
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<a href="#doc">
<input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
<label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
</a>
</div>
</td>
</tr>
<tr>
<td style="text-align: left; width: 800px;">
Row 2
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
<label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
If I am not mistaken this is what you want to do:
First - Display the plus button, and hide the table
Second- When plus button is clicked display the table, hide the plus button, and show the minus button
Third- When the minus button is clicked, hide the minus button, show the plus button, and hide the table.
It seems that you're code isn't working BECAUSE you are not hiding/displaying the buttons at the appropriate time. I am also assuming only one button should be shown at a time?
$(document).ready(function() {
$("#t1").hide(); // hide table by default
$("#close").hide(); //hide the minus button as well if you only want one button to display at a time
$('#sp1').on('click', function() { //when plus button is clicked
$("#t1").show();
$("#sp1").hide(); //you need to hide the plus button now
$("#close").show(); //and then display the minus button
});
$('#close').on('click', function() {
$("#t1").hide(); //hide table
$("#close").hide(); //hide minus btn
$("#sp1").show(); //show plus button
});
});
I have list of parameters along with checkboxs where i can search and select required parameters in table.Now i want to set values for selected parameters.For this i have created textfields(Parameters name,Datatype,Set Value) in table format.When i select check box in parameters table,textfields in table should be created with selected parameters . when i deselect checkbox textfields should removed. For instance if i select one parameter "TestingDevice" from parameters table,Textfields should be created value with "TestingDevice" and other DataType and Set value should be manually entered by user. Below the code i am using.
List Of Parameters
<div class="tab-content">
<div id="Device_B" class="tab-pane fade in active">
<div class="col-md-12">
<div class="col-md-6" style="overflow: auto">
<br>
<input type="text" class="form-control" id="customGroupAddParamInput" onkeyup="addParameterTableSearchFunction()" placeholder="Search 🔍 :">
<br>
<h4>All Parameters</h4>
<div class="span5 border-0" style="overflow: auto">
<table id="customGroupAddParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall_custom_B[]" onclick="selectAllCustom(this)"/>SA</th>
<th>Parameter Name</th>
</tr>
</thead>
<tbody class="parameter_table">
<% #all_br_parameters.each do |parameter| %>
<tr id="tr_rb_<%=parameter['id'] %>">
<td>
<input type="checkbox" class="checkBox" name="checkBox_custom_B[]" onchange="clickedParamBox(this.name)">
</td>
<td style="word-break:break-all;">
<%= parameter['parameter_name']%>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
Table For Textfield
<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>
Try this out: It's how I'd handle it.
$(document).ready(function() {
window.addEventListener('load', (event) => {
checkbox = document.getElementById("checkbox_to_be_evaluated");
textbox = document.getElementById("textbox_to_be_displayed_or_hidden");
evaluateCheckbox(checkbox, textbox);
});
$(checkbox).click(function(){
evaluateCheckbox(checkbox, textbox)
});
function evaluateCheckbox(checkbox, textbox) {
//take in element of checkbox
if(checkbox.checked){
textbox.style.display = "block";
}else {
textbox.style.display = "none";
}
//handle accordingly
};
});
I am trying to do multiple selections of rows and drag them into another container.
$(".draggable_tr").click(function()
...
function is called and append selected Row class in tr. But ui-draggable ui-draggable-handle is not appended in tr.This version is uploaded on jsFiddle
Html Code
<div class="new-drag">
<div class="myHeight" style="width: auto;" ng-scrollbars>
<div id="table1" class="bitacoratable">
<table id="table1" class="table table-hover table-striped childgrid border-zero">
<tr class="draggable_tr " ng-repeat="t in tabledata">
<td width="30" class="table-hover-dots">
<i class="table-dots dots"></i>
<div class="w-15 custom-inputs checkbox">
<input type="checkbox" name="check" id="check-1">
<label for="check-1"></label>
</div>
</td>
<td width="60" >{{t.id}}</td>
<td width="200">
{{t.name}}
</a>
</td>
<td width="60">{{t.dep_no}}</td>
<td width="80">{{t.status}}</td>
<td width="80">{{t.city}}</td>
</tr>
</table>
</div>
</div>
</div>
JS Code:
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: function(){
var selected = $('.childgrid tr.selectedRow');
if (selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
}
});
$("#table2 .childgrid").droppable({
drop: function (event, ui) {
console.log(angular.toJson(event));
$(this).append(ui.helper.children());
//$('.selectedRow').remove();
}
});
$scope.tabledata=[{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"}]
$(".draggable_tr").click(function(){
$(this).toggleClass("selectedRow");
});
I have a table I'm wanting to check the checkbox & add a class to a div when the user clicks on the table row, I can't get it to add the class.
can anyone show me where i'm going wrong.
HTML BELOW:
<div class="widgit">
<table id="QR_table">
<thead>
<tr class="QR_table-row">
<th class="qr_action">Checkbox</th>
<th class="qr_action">Action</th>
<th class="qr_from">FROM</th>
<th class="qr_to">TO</th>
<th class="qr_trans">Transport</th>
</tr>
</thead>
<tbody>
<tr class="QR-row">
<td class="checkbox">
<input class="modal-state" id="modal-1" type="checkbox" />
</td>
<td class="qr_action">PT</td>
<td class="qr_from">4</td>
<td class="qr_to">21</td>
<td class="qr_trans">WC</td>
</tr>
<tr class="QR-row">
<td class="checkbox">
<input class="modal-state" id="modal-1" type="checkbox" />
</td>
<td class="qr_action">PT</td>
<td class="qr_from">8</td>
<td class="qr_to">2</td>
<td class="qr_trans">T</td>
</tr>
</tbody>
JQUERY BLOW:
$(function() {
$(".QR-row").click(function() {
var $chk = $(this).find('input[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));
if($($chk).is(':checked')){
$(".widgit").addClass("modal-open");
} else {
$(".widgit").removeClass("modal-open");
}
});
});
JSFIDDLE
From my point of View everything works fine.
In your fiddle the only div that you have is around your table and it seems to be the one you try to give a class.
<div class="widgit">
<table id="QR_table">
And everything works fine. Fiddle
If you want it to do something else then you have to be a bit more specific about what you try to achive