Develop Reference

How to run a javascript function on all the rows

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!

How can I access a cousin element, of an element with an identifier in Cypress

I am trying to click a check box in a list of Table rows
the only way I can think to access this level is by the span tag with its corresponding name.
cy.get('tr > td > span').contains('newCypressTestCore').siblings('td > input').click();
Although this would only return the siblings of the span tag when I actually need to access the cousin of the span tag.
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<span> newCypressTestCore </span>
</td>
</tr>

Cypress uses jquery, so this answer is useful How do I get to cousin elements with JQuery.
The closest() selector scans up the tree, use it to get the row, then within that the input.
spec
describe('cousins', () => {
it('scans up the table', () => {
cy.visit('app/table.example.html')
cy.get('tr > td > span').contains('newCypressTestCore')
.closest('tr')
.find('input')
.should('have.class', 'target')
})
})
app/table.example.html (sandboxed - Cypress can optionally act as your web server)
<table>
<tr>
<td>
<input type="checkbox" class="not.the.input.you.are.looking.for" />
</td>
<td>
<span> something </span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="target" />
</td>
<td>
<span> newCypressTestCore </span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="not.the.input.you.are.looking.for" />
</td>
<td>
<span> another thing </span>
</td>
</tr>
</table>

Could you use with .parents() to identify the parent class of the table and then use find() to narrow down till the input checkbox field is identified. See the below piece of code and see if that work;
cy.get('input[type="checkbox]').parents('.lh-copy').find('tr').find('td').find('input').click();
or may be try with immediate parent class of td
cy.get('input[type="checkbox]').parents('.hover-bg-near-white').find('td').find('input').click();

Can you insert HTML in jQuery without string?

So the normal way to insert a HTML element is by writing
$("#addingRow").before(`
<tr id="customer`+customer.id+`">
<td class="id">`+customer.id+`
</td>
<td class="firstname"><input type="text" value="`+customer.firstname+`"/>
</td>
<td class="lastname"><input type="text" value="`+customer.lastname+`"/>
</td>
<td class="email"><input type="text" value="`+customer.email+`"/>
</td>
<td>
<button onclick="onClickSave(`+customer.id+`)">Save</button>
<button onclick="onClickDelete(`+customer.id+`)">Delete</button>
</td>
</tr>
`)
or some function similar to this like (prepend, before, ...)
Is there some way to insert the HTML element without using the string tags?
Like in Angular where you only have to write *ngFor inside the HTML code.

Table Row mouseover effect with Javascript [duplicate]

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>

remove a <tr> element by clicking a button on it [closed]

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>