From the code below, I can't get the input[radio] to check the selected row in the table. The code below is using HTML5 and JQuery 1.10.2.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
input[type="radio"] {
margin: 10px;
}
</style>
<script src="jquery-1.10.2.min.js" />
<script>
$(function() {
$("#table_list tr").click(function() {
$(this).find("td input:radio").prop("checked", true);
});
});
</script>
</head>
<body>
<table id="table_list">
<thead>
<th></th>
<th>Name</th>
<th>Email</th>
</thead>
<tbody>
<tr>
<td><input type="radio" name="record"/></th>
<td>Sample1</td>
<td>sample_1#sample.com</td>
</tr>
<tr>
<th><input type="radio" name="record"/></th>
<td>Sample1</td>
<td>sample_1#sample.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Your first input is in a td and the second is in a th. You'll have to remove the td from your input selector: working codepen
$(function() {
$("#table_list tr").click(function() {
$(this).find("input:radio").prop("checked", true);
});
});
The attached javascript will work for both.. Another option is to just change the th to a td and keep your selector the way it was.
Note: you have a few more markup issues as people mentioned in the comments. (forgot tr in thead)
Please have a look at http://jsbin.com/atosaq/4/edit
$(document).ready(function(){
$('#table_list tr').on("click",function(){
$(this).find('input[type=radio]').prop("checked", true);
});
});
Related
is there something wrong with the code below
Just trying to fix decimal paces for a specific class of td.
need to use only jquery
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<td class="go"> 25.252525
</td>
<script type="text/javascript">
$('.go').each(function() {
return parseFloat($(this).toFixed(2));
}
</script>
</body>
</html>
You need to use .text() to get text from td then use .toFixed() and finally change updated value inside your td i.e : $(this).text(parseFloat($(this).text()).toFixed(2));
Demo Code :
$('.go').each(function() {
$(this).text(parseFloat($(this).text()).toFixed(2)); //change text..
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table>
<tr>
<td class="go"> 25.252525
</td>
</tr>
<tr>
<td class="go"> 25.2223525
</td>
</tr>
</table>
I have 2 tables and every row has own button for deleting itself :
<table class="table" id="Offers">
<tr id="row1">
<td><button type="button" id=1 class="removeOffer">X</button</td>
</tr>
</table>
<table class="table" id="OffersHistory">
<tr class="History1">
<td><button type="button" id=1 class="removeOfferHistory">X</button</td>
</tr>
</table>
And two simple JQuery code, for every table , serving for remove :
$(document).on('click', '.removeOffer', function(){
var button_id = $(this).attr("id");
$('#row'+button_id).remove();
});
$(document).on('click', '.removeOfferHistory', function(){
var button_id = $(this).attr("id");
$('.History'+button_id).remove();
});
When i click on "X" button in the first table, it works fine. Row from first table is removed... But when i click on "X" button from second table, it removes row from second and first at the same time. Same row with same number from both tables are removed.. Why?
Firstly, it's invalid HTML to have multiple elements with the same id.
But, you could simplify your code massively by using the power of jQuery...
$(function(){
$("button").on("click", function(e) {
e.preventDefault();
$(this).closest("tr").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>First Row</td>
<td><button>X</button></td>
</tr>
<tr>
<td>Second Row</td>
<td><button>X</button></td>
</tr>
</table>
Both buttons have an ID of 1, change the ID or call the javascript function within the button
Not sure you need to do this much coding.
You can simply do it by : -
$(document).ready(function() {
$('button').click(function() {
$(this).remove();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Remove button</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button class="first" value="button1">button1</button>
<button class="first" value="button1">button2</button>
</body>
</html>
How can I get only the id of a td element in a table with an inputClickHandler?
because if I do for example e.currentTarget or e.target it stores this in it: <td id='square0'>5</td>. I want it to store only the id. For the example above I want to store only square0.
Thank you, your answer is much appreciated.
Use e.target.id. id is a property of DOM element.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<table>
<tr><td id="1">Row 1</td></tr>
<tr><td id="2">Row 2</td></tr>
<tr><td id="3">Row 3</td></tr>
<tr><td id="4">Row 4</td></tr>
<tr><td id="5">Row 5</td></tr>
</table>
<script type="text/javascript">
$(document).on("click", "td", function(e) {
var data = $(this).attr('id');
alert (data);
});
</script>
</body>
</html>
If you use jquery it will be easier. I have made a simple page to demonstrate example of jquery code.
I am trying to get the selected data from table, I am using bootstrap and jquery. After selecting checkbox and click on Add to Cart button I have to get the selected data from table. Below is my code snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>
<script type="text/javascript">
var checkedRows = [];
$('#eventsTable').on('.bs-checkbox', function (e, row) {
checkedRows.push({id: row.id, name: row.name, forks: row.forks});
console.log(checkedRows);
});
$('#eventsTable').on('uncheck.bs.table', function (e, row) {
$.each(checkedRows, function(index, value) {
if (value.id === row.id) {
checkedRows.splice(index,1);
}
});
console.log(checkedRows);
});
$("#add_cart").click(function() {
$("#output").empty();
console.log(checkedRows);
$.each(checkedRows, function(index, value) {
$('#output').append($('<li></li>').text(value.id + " | " + value.name + " | " + value.forks));
});
});
</script>
</head>
<body>
<div style="position: absolute;bottom: 42px; padding-left:10px; ">
<table id="eventsTable"
data-toggle="table"
data-height="300"
data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
<button id="add_cart">Add to card</button>
<ul id="output"></ul>
</div>
</body>
</html>
When I click on my button none of my jquery functions are calling.
I have referred :
Getting values of selected table rows in bootstrap using jquery
Kindly help me to resolve this. Thanks in advance.
The problem is casued by the fact that your js loads before the DOM is ready.
You can do one of two things:
Put your script tag with the event handlers in it before
</body>
Add a document ready event around your code
$(document).ready(function(){
// your code here
});
Use #add_cart click function like this
$(document).ready(function(){
$("#add_cart").click(function() {
$("#output").empty();
$("tbody tr").each(function() {
if($(this).hasClass("selected")){
$('#output').append($('<li>'+$(this).find("td:eq(1)").text()+' | '+$(this).find("td:eq(2)").text()+'</li>'));
}
});
});
});
I have a Bootstrap table somewhat like this:
<table id="myTable">
<tr>
<th data-field="name" data-formatter="nameFormatter"></th>
<th data-field="number" data-formatter="numberFormatter"></th>
<th class="newClass"></th>
</tr>
</table>
jQuery
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
// $('.newClass').removeClass('newClass');
$('.newClass').addClass('shown') // <-- this doesn't seem to work
}
CSS
td.newClass {
background-image: url("../../Content/Images/open.png");
}
tr.shown td.newClass {
background-image: url("../../Content/Images/close.png");
}
I am trying to addClass() on the row click event of the table but it doesn't seem to work. Am I missing something or doing something incorrectly.
It appears that your CSS does not match your markup:
tr.shown td.newClass
{
background-image: url("../../Content/Images/close.png");
}
Which is looking for the shown class on the table-row. But it looks like you are adding the shown class to the table-cell:
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
//$('.newClass').removeClass('newClass');
$('.newClass').addClass('shown') // isn't $('.newClass') the cell and not the row?
}
UPDATE:
To fix this you can change your CSS:
td.newClass.shown { ... }
or your jQuery:
$element.addClass('shown');
It will help you :
$(document).ready(function(){
$("#myTable tr").on('click',function(){
$(this).find(".newClass").addClass("shown");
});
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title>SPLessons</title>
<script data-require="jquery#2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div class="container">
<div class="jumbotron">
<h3>
SPLessons.com
</h3>
<table id="myTable" class="table table-bordered">
<tr>
<th data-field="name" data-formatter="nameFormatter"></th>
<th data-field="number" data-formatter="numberFormatter"></th>
<th class="newClass"></th>
</tr>
</table>
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>