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>
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>
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 need a table whose rows can be added dynamically on a button click and the table itself can be re-created and shown on the page with another button click
I have created the following
HTML:
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Add Rows</title>
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<a href="#"
class="button"
ng-click="addRow()">
Add Row</a>
<a href="#"
class="button"
ng-click="addTable()">
Add Table </a>
<div ng-repeat="data in table">
<table>
<thead>
<tr>
<th width="200">Name</th>
<th width="200">Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rowContent in rows">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</tbody>
</table>
<div>
</body>
</html>
Here's my Controller:
angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {
$scope.table=['Table 1'];
$scope.rows = ['Row 1'];
$scope.counter = 3;
$scope.addRow = function() {
$scope.rows.push('Row ' + $scope.counter);
$scope.counter++;
}
$scope.addTable = function() {
$scope.table.push('Table ' + $scope.counter);
$scope.counter++;
}
}]);
Everything works fine except that when I click on Add Table , The previous table along with the added rows gets copied.
I want to just have the initial instance of the table with just one row to add age and name.
Please help:
Code pen Link :http://codepen.io/anon/pen/wBwXJP
if you make an object from the table by doing this
$scope.tables=[{name: "table 1"}];
$scope.tables[0].rows=['row1']
this will make it posible to add a row to $scope.tables[0].rows
that way it will only be added to the first
for new you just push
$scope.tables.push({name: 'Table ' + $scope.counter});
and it will create a whole new table
and you have to change rows in
<tr ng-repeat="rowContent in table.rows">
i hope this will help you in the right way
here i edited your code to make it the way i think it is best
code
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);
});
});
I have a table with names that correspond with their urls
I want to use the information in the table to create the urls that the page will go to if I click that row.
I'm using datatables http://www.datatables.net , if someone can point me to code or api for this that'd be great.
FULL CODE: ARTICLE DESCRIBES IT STEP BY STEP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Full Row Select Using jQuery</title>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.Highlight
{
background-color: #dcfac9;
cursor: pointer;
}
</style>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0" id="link-table">
<tr>
<td>http://www.yahoo.com/</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>http://www.microsoft.com/</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>http://imar.spaanjaars.com/</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script type="text/javascript">
$(function ()
{
// Hide the first cell for JavaScript enabled browsers.
$('#link-table td:first-child').hide();
// Apply a class on mouse over and remove it on mouse out.
$('#link-table tr').hover(function ()
{
$(this).toggleClass('Highlight');
});
// Assign a click handler that grabs the URL
// from the first cell and redirects the user.
$('#link-table tr').click(function ()
{
location.href = $(this).find('td a').attr('href');
});
});
</script>
</body>
</html>
Below are exmaples:
http://imar.spaanjaars.com/549/how-do-i-make-a-full-table-row-clickable-using-jquery
http://imar.spaanjaars.com/312/how-do-i-make-a-full-table-row-clickable