Get Selected Value from Table using JQuery - javascript

I am using below code for getting check value from table which is printing all checked checkbox value.But i want to get only selected checkbox value not all checked value.
function clickedBoxAdd(checkBoxvalue) {
var values = new Array();
$.each($("input[name='" + checkBoxvalue + "']:checked").closest("td").next("td").next("td"),
function () {
values.push($(this).text());
});
alert(values);
addVariablesRow1()
}
For adding table row if i click checkbox using below code which is working.Can anyone please help how to delete rows as well when i unselect checkboxes.
function addVariablesRow1() {
var $t = $("#addTable");
var $row = $($t.find("tr")[1]);
var r = $row.clone();
r.find("input[type=text]").val("")
r.find("input[type=checkbox]").attr('checked', false)
r[0].style.display = "";
r.appendTo($t);
}
HTML
<input type="checkbox" class="checkBox" name="checkBox_B[]" onclick="clickedBoxAdd(this.name)">
Table
<table id="addTable" class="table table-bordered">
<thead>
<tbody class="snmp_oid_table">
<tr class="info">
<th>Oid</th>
<th>Data Type</th>
<th>Set Value</th>
</tr>
</thead>
<tr style="display:none">
<td>
<input type="text" class="name" id="oids" name="oid">
</td>
<td>
<input type="text" class="text" name="oid_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>
CheckBox
<table id="addOidTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="checkBox_add_b[]" onclick="selectAddAll(this)"/>SA</th>
<th>name</th>
<th>Oid </th>
</tr>
</thead>
<tbody class="oid_table">
<% #all_b_oids.each do |oids| %>
<tr id="tr_snmp_<%=oids['id'] %>">
<td>
<input type="checkbox" class="checkBox" name="checkBox_Oid_B[]" onclick="clickedBoxAddAll(this.name)">
</td>
<td style="word-break:break-all;">
<%= oids['name']%>
</td>
<td style="word-break:break-all;">
<%= oids['oid']%>
</td>
</tr>
<% end %>
</tbody>
</table>

You are actually getting all checkbox's values and pushing those in arrays by using '$.each'
Anyway, for the first part of your question, your checkbox should have a class e.g. chkbox, then you can get it's value in it's click handler:
$(".chkbox").click(function() {
$(this).closest('td').html()
});
To delete a row from table, assign id to each tr once you create it:
r.attr("id", "rowid");
Then once checkbox is unselected, you can remove row in checkbox's click handler:
$(".chkbox").click(function() {
if(!$(this).is(':checked')) {
$('#rowid').remove();
}
});
Hope this helps.

Related

i have to call two button click events add and remove from jquery tabs,i'm using jquery forms

this is my code with add and remove buttons on a table inside a jquery tab, but when i call click event
it is not calling it.
<div id="tabs-2">
<form id="DSLform">
<table id="table-1" class="add1" border ="1"><!-- DSL -->
<thead>
<tr><td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td></tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th >
<th><input type="submit" class="add1" value="+"></th>
<!-- <th><button id="butVal1" type="button"> + </button></th> -->
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no"/> </td>
<td> <input type="text" name="shed"/> </td>
<td> <input type="text" name="schedule"/> </td>
<td><input type="text" name="programme"/> </td>
<td><button class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
and my javascript file is
(document).ready( function() {
$("#butVal1").click(function(){
var rowLen = $('tr.tabRow1').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow1:first").clone(true).appendTo("#table-1>tbody");
$(".tabRow1:last").children("td").children("input").each(function(index, element)
{
$(element).val("");
});
}
});
$("tabs-1").on("click", "button.remove1", function(){
if($(this).parents("tr").siblings("tr.tabRow1").length > 0)
{
$(this).closest("tr.tabRow1").remove();
}
else
{
alert("you can't remove this record");
}
});
$("#tabs-1").on("click", ".add1, .remove1", function(){
$("td.sno1").each(function(index,element){
$(element).text(index + 1);
});
});
});
i have added my code above, i need this add and submit button to work from jquery tabs, also these textbox values need to be saved as records, how can i identify each row when i add or remove a row from table
In below code i have use .length to get the length of row and added 1 for displaying S.no count because count starts from 1. Then,instead of looping through all inputs i have just use .find("input").val("") to empty all inputs values and then finally use appendTo to append tr particular table only.
Then, when user will click on remove button i have get the id of table which will be unique in all tabs and then i have passed this value to the function resetValues to reset the S.no column count onces any row gets removed. So , using table id i have loop through tbody tr and have reset the counts .
Demo Code :
$(document).ready(function() {
$(function() {
$("#tabs").tabs();
});
//click on add
$(".add").click(function() {
var apendTo = $(this).closest("table").find("tbody")
//get length of trs
var rowLen = $(this).closest("table").find("tbody tr").length + 1;
if (rowLen > 9) {
alert("no of row is reached 10");
} else {
//get cloned of tr
var cloned = $(this).closest("table").find("tbody tr:first").clone(true);
//set s.no
cloned.find("td:eq(0)").text(rowLen);
cloned.find("input").val(""); //empty inputs
cloned.appendTo(apendTo) //appends
}
});
$(document).on("click", "button.remove1", function() {
var table_id = $(this).closest("table").attr("id") //get tablename
if ($(this).parents("tr").siblings("tr.tabRow1").length > 0) {
$(this).closest("tr.tabRow1").remove();
resetValues(table_id); //call to reset values
} else {
alert("you can't remove this record");
}
});
function resetValues(el) {
var counter = 2; //initialze to 2 because 1 is fixed
//looping through tr not first one
$("#" + el).find("tbody tr:not(:first)").each(function() {
//find .sno1 class replace its counter
$(this).find('.sno1').text(counter);
counter++;
})
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>FIRST</li>
<li>SECOND</li>
</ul>
<div id="tabs-1">
<form id="DSLform">
<table id="table-1" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="tabs-2">
<form id="DSLform">
<table id="table-2" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
Note : Above code will work on any table only you need to make sure id is unique for all tables .

each row of the table having check box. but by clicking on check box it is not selecting that row text value

In html table i have checkbox for each row. by clicking on check box it has to select person name of the table. but it is not working. and i want to provide validation for this check box user can select only check box at a time.
HTML:
<table id="personTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall_b" onclick="selectAll(this)"/>
SA
</th>
<th>person name</th>
<th> address</th>
</tr>
</thead>
<tbody class="person_table">
<% #persons.all.each do |person| %>
<tr id="tr_prns_<%=person.id %>">
<td>
<input type="checkbox" class="radio" name="checkBox[]"
onchange="personClickedBox(this.name)"/>
</td>
<td class="person" style="word-break:break-all;">
<%= person.name%>
</td>
<td class="person" style="word-break:break-all;">
<%= person.address%>
</td>
</tr>
<% end %>
</tbody>
</table>
JAVASCRIPT:
function personClickedBox(checkBoxName){
var values = new Array();
$.each($("input[name='"+checkBoxName+"']:checked").closest("td").next("td"),
function () {
values.input($(this).text().trim());
});
}
by clicking on check box it has to select person name
Your code get the clicked check box value perfectly. What you need to do is add a css style to select the specific raw

How to get one or more data when we do click in checkbox?

I have a problem , when i do click on one or select all , all data coming. But i need when I click on single checkbox then only that particular data should come.
html file
<div class="row">
<div class="col-md-12">
<h1>Student Information</h1>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class="button pull-right" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
Java script file
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
});
}
vm.selectedUsers = [];
vm.process = function() {
vm.selectedUsers.splice(0, vm.selectedUsers.length);
for (var i in vm.data) {
vm.selectedUsers.push(vm.data[i]);
}
}
This link may what your looking for : Angular Checkboxes “Select All” functionality with only one box selected initially
.

Get values of table row and print them in another div

I am retrieving values from database and print them in table. Now I want to get values to another div and place them in form.
I am using twitter bootstrap.
First I get values from database and print them in table
<div class="col-xs-10">
<table id="example" class="table table-bordered table-striped">
<thead>
<tr class="bg-red">
<th>Id</th>
<th>Name</th>
<th>Quality</th>
<th>Dimensions</th>
<th>COlor</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<?php
while($r=$q->fetch()){ ?>
<tr>
<td><?='Nb'. $r['Id']?> </td>
<td> <?=$r['MatVrstaNaziv']?> </td>
<td><?=$r['Quality']?></td>
<td><?=$r['Width'] . ' X '. $r['Height']?></td>
<td><?=$r['COlor']?></td>
<td> <button class="addValues" value="<?='Nb'. $r['Id']?> "> Add</button></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<div class="col-xs-2">
<div id="selection">
</div>
</div>
I have added button Add to add that row in another div. For that I am using script
<script>
$(function () {
$(".addValues").click(function () {
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
targetArea.append(myRow.children().not(myCol).text() + "<br />");
});
});
</script>
This script does not work it does not print values in specified div. I only want to print id number in another div.
Could someone give me advice what is wrong?
When you add . before addValues in selector $(".addValues") its work, see example bellow with static data.
If it still not working that mean you have problem in your PHP code, check if the query return valide result and check name of attributes like 'COlor' for example.
$(".addValues").click(function () {
$('#selection').show();
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
var rowId = $("td.data-id", myRow).text();
var qte_input = (' <input type="text" placeholder="Qte" size="5"/>');
targetArea.prepend(rowId + qte_input +"<br />");
});
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-10">
<table id="example" class="table table-bordered table-striped">
<thead>
<tr class="bg-red">
<th>Id</th>
<th>Name</th>
<th>Quality</th>
<th>Dimensions</th>
<th>COlor</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr>
<td class='data-id'> 1</td>
<td> bb</td>
<td> ccc</td>
<td> dd X '. dd</td>
<td> ee</td>
<td> <button class="addValues" value="fff"> Add</button></td>
</tr>
<tr>
<td class='data-id'>2</td>
<td> YYY</td>
<td> ccc</td>
<td> dd X '. dd</td>
<td> ee</td>
<td> <button class="addValues" value="fff"> Add</button></td>
</tr>
<tr>
<td class='data-id'>3</td>
<td> XXX</td>
<td> ccc</td>
<td> dd X '. dd</td>
<td> ee</td>
<td> <button class="addValues" value="fff"> Add</button></td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-2">
<div id="selection" style="display: none">
</br>
<button class="submitValues">Submit</button>
</div>
</div>

How to get the id of first <tr> of <tbody> in HTML table using jQuery?

I've following HTML table:
<table id="blacklistgrid_1" class="table table-bordered table-hover table-striped">
<thead>
<tr id="jumbo">
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1_1">
<td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb1_2">
<td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
Now I want to get the id of first row from . The id in this case is reb1_1. For getting it I tried below code but it didn't work.
$(document).ready(function() {
$('.products').click(function () {
var row = $(this).closest('table tbody:tr:first').attr('id');
alert(row);
});
});
Thank you.
first go to table tbody then find tr then filter first row like below
var row = $(this).closest('table').find(' tbody tr:first').attr('id');
or can try
var row = $(this).closest('table').find(' tbody tr:eq(0)').attr('id');
reference :first and :eq
Make changes as shown in demo :-
http://jsfiddle.net/avmCX/38/
$(document).ready(function() {
$('.products').click(function () {
var row = $(this).closest('table').find('tbody tr:first').attr('id');
alert(row);
});
});
For more info have a look here :-
http://api.jquery.com/first/
change your function to this:
$(document).ready(function() {
$('.products').click(function () {
var id = $(this).closest("table").find("tbody>tr").first().attr("id");
alert(id);
});
});
this will show you the id.

Categories