Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm using Jquery to add a table row into an existing table. The I'm adding has two columns. One simple string, the other has a small button. I'd like a click on the button to remove its parent element in the most elegant way, ideally without calling an external JS function. IS that possible?
just use .closest and .remove in the click handler for the button
jQuery(this).closest('tr').remove()
closest will find the closest parent element matching the passed selector, and remove as the name implies will remove it.
And since you say you are adding the rows to an existing table you can use delegation to deal with new rows and not have to add new click listeners every time you add a new row.
jQuery(document).on("click",".removeBtn",function(){
jQuery(this).closest('tr').remove()
});
Demo
jQuery(".removeBtn").click(function(){
jQuery(this).closest("tr").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Sample row</td>
<td><button class="removeBtn">Remove</button></td>
</tr>
<tr>
<td>Sample row 2</td>
<td><button class="removeBtn">Remove</button></td>
</tr>
<tr>
<td>Sample row 3</td>
<td><button class="removeBtn">Remove</button></td>
</tr>
</table>
$(document).ready(function() {
$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
This is Item 1
</td>
<td>
This is still Item 1
</td>
<td>
<button class="remove">This is Button 1</button>
</td>
</tr>
<tr>
<td>
This is Item 2
</td>
<td>
This is still Item 2
</td>
<td>
<button class="remove">This is Button 2</button>
</td>
</tr>
<tr>
<td>
This is Item 3
</td>
<td>
This is still Item 3
</td>
<td>
<button class="remove">This is Button 3</button>
</td>
</tr>
<tr>
<td>
This is Item 4
</td>
<td>
This is still Item 4
</td>
<td>
<button class="remove">This is Button 4</button>
</td>
</tr>
</tbody>
</table>
Related
When a cell is clicked the function is suppose to run.
Right now it is working only on the first row.
When i click on the button on a row i want that specific row to affect.
$(document).ready(function() {
function loadHistory() {
$('#btn').data('valType', 'more');
$('#btn').click(function() {
var id = $('#btn').data("valType")
})
}
})
In this case, use class selector, instead of id.
For example, yo have any list:
$(document).ready(function() {
$('.delete').click(function(e) {
$(this).parent().parent().remove();
})
})
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Chair
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Sofa
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Table
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Without the HTML code it is a bit more difficult to answer you, but I try.
Usually the ID is unique, so it's assigned to only one element, so try using the class selector.
Then another thing, I don't know if this is your case, if you go to create the other lines dynamically, the jQuery .click () function will not be able to manage the clicks on the elements created after loading the page. In this case use $.on('click', '.yourClass', function).
I hope I was helpful!
This question already has answers here:
addEventListener to an article element in Javascript
(2 answers)
Closed 5 years ago.
I'm trying to perform a mouseover event on my table rows using Javascript. I understand CSS would better accomplish this task but I would like to learn how to do it in Javascript is well.
Here is my Code:
var tableRows = document.getElementsByTagName('tr');
tableRows.addEventListener("mouseover", rollOver);
function rollOver() {
alert('you scrolled over a table row');
}
<table>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
</tr>
<tr>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
<tr>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
</table>
Console.log seems to indicate that "addEventListener" is not a function. What am I doing wrong here? Any thoughts?
Thank you!
As tableRows will return object .addEventListener will not work with it...so looping them and use will..
var tableRows = document.getElementsByTagName('tr');
for (var i = 0; i < tableRows.length; i += 1) {
tableRows[i].addEventListener('mouseover', function(e){
console.log("sdsd");
});
// or attachEvent, depends on browser
}
<table>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
</tr>
<tr>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
<tr>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
</table>
This question already has answers here:
How to remove "onclick" with JQuery?
(8 answers)
Closed 8 years ago.
How to remove <tr> onclick method if child <td> </td> or <td></td> using jquery ?
<tr title="Click to select row" class="gridItem"
onclick="javascript:__doPostBack('ctl00$Body$grdComments','Select$0')">
<td> </td>
<td> </td>
</tr>
<tr title="Click to select row" class="SelectedRowStyle"
onclick="javascript:__doPostBack('ctl00$Body$grdComments','Select$0')">
<td> </td>
<td> </td>
</tr>
.text returns the (decoded) content of the element, so you just have to test whether a tr element only contains spaces or is empty:
$('tr').filter(function() {
return /^\s*$/.test($(this).text());
}).prop('onclick', null);
Also see How to remove "onclick" with JQuery?.
Ive got a table of data and on each row the there is a button, onclick im trying to 'copy' that rows data, and 'paste' it into another div.
Here's my HTML:
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
Ive been trying to do this using:
$(function() {
$('addValues').click(function(){
var content = $('tr').html();
var newdiv = $("#selection");
newdiv.html(content);
$('#content').after(newdiv);
});
});
But cant quite get it to work, any ideas ?
Ive made a fiddle of the problem here - http://jsfiddle.net/9sZaX/2/
There are a few things wrong with your jsFiddle and/or code.
Don't use duplicate id attributes. It will cause unexpected results because jQuery will only select the first one found (which is expected, since there should only be one element with that id). Instead, give the <button>s a class attribute, like "addValues", and use this selector: $(".addValues").
Also, try setting the jsFiddle to actually use jQuery (set up on the left side of the page).
Another important problem was the fact that there is no element with the id of "content" on the page, so the .after() wasn't really doing anything.
Here's how I would set it up, depending on your actual requirements:
HTML -
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
JS -
$(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 />");
});
});
DEMO: http://jsfiddle.net/RPd3v/2/
I am playing around with the JavaScript functions insertAfter and insertBefore, however I am trying to insertAfter and insertBefore two elements.
For instance, consider the following HTML:
<table>
<tbody>
<tr>
<td>
Item 1
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Item 2
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
</table>
Then I have this JavaScript code snippet:
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
Basically when the Up class is called, the previous row is moved up and when the Down class is called, the current row is moved down one row.
What I want to do, is move the rows Up/Down 2 rows... meaning something like row.prev().prev() or row.next().next() however this does not seem to work.
Is there an easy way around this?
Would appreciate any help/suggestions.
to go up
row.prev().prev().before(row)
to go down
row.next().next().after(row)
obviously the tr must exist prev/next have to exist
NB you are caching row as the first tr element so row is changing every time the first tr element change
listen to event
$("table").on("click","tr > td > span.moveup", function() {
var row = $(this).parent().parent();
if (row.prev().prev().get(0)) row.prev().prev().before(row)
})