Im trying to add a table row to a table with a certain ID, but when appending, it also appends to tables inside my table which have different ID. I´ve searched for an answer, but no luck. I dont know what im doing wrong here is a jfiddle.
http://jsfiddle.net/n7cyE/1445/
//table
<table id="tbl_1">
<thead>
<td>column 1</td>
<td>column 2</td>
</thead>
<tbody>
<td>
<table id="tbl_2">
<thead>
<td>inside column 1</td>
<td>inside column 2</td>
</thead>
<tbody>
</tbody>
</table>
</td>
<td></td>
</tbody>
</table>
//jquery
var recent = "<tr><td>added column 1</td><td>added column 2</td></tr>";
$("#tbl_1 tbody").append(recent);
Use #tbl_1 > tbody selector instead of #tbl_1 tbody like following.
$("#tbl_1 > tbody").append(recent);
#tbl_1 tbody selects all tbody inside #tbl_1 where #tbl_1 > tbody selects only the child tbody of #tbl_1.
Related
I have a table with ajax call to create rows within the tbody element. I have the table created on the html page.
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My javascript code to attach the event to second cell of each row in tbody
$('#mytable tbody').on( 'click', 'tr td:eq(2)', function() {
console.log($(this).html())
});
This code only works for the second cell of the first row of the tbody. Clicking the second cell of all other rows did not trigger the event. I have to work around this by check the cell index
if (this.cellIndex == 2) console.log($(this).html())
I still want to know how to make the correct selection.
To select the specific td of each row use nth-child() instead of eq():
$('#mytable tbody').on( 'click', 'tr td:nth-child(3)', function() {
console.log($(this).html())
});
You can just have an event listener for the entire table and then test what was clicked. Adding the event listener to the table you don't need to assign it again if the content of the table changes.
Adding a class name can both be useful for the usability (styling the cursor) and easier to find elements using JS.
document.getElementById('mytable').addEventListener('click', e => {
let td = e.target.closest('td[class="clickable"]');
if (td) {
console.log(e.target.innerText, 'was clicked');
}
});
td.clickable {
cursor: pointer;
}
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td class="clickable">Second 1</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 2</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 3</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 4</td>
</tr>
</tbody>
</table>
Very similair to this question: Sort table rows based on their Class Names
Consider the following table:
<table>
<thead>
<th>A column</th>
</thead>
<tbody>
<tr>
<td class="x">A</td>
</tr>
<tr>
<td class="c">B</td>
</tr>
<tr>
<td class="">C</td>
</tr>
</tbody>
</table>
I would like to sort rows based on the first (in this case only) column class name. Some td don't have a class specified. So the desired effect would be: A-B-C -> C-B-A or B-A-C (I don't care where the classless tds are placed). I know I can get class with jquery, for example:
$(table tr).eq(1).find('td').eq(0).attr('class')
Any ideas?
Use sort() to sorting array of tr elements. You can get class of element in function of sort and set arrangement of every element.
$("table tbody tr").sort(function (a, b){
return $("td", b).attr("class") < $("td", a).attr("class") ? 1 : -1;
}).appendTo('table tbody');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>A column</th>
</thead>
<tbody>
<tr>
<td class="x">A</td>
</tr>
<tr>
<td class="c">B</td>
</tr>
<tr>
<td class="">C</td>
</tr>
</tbody>
</table>
I have a table with 4 columns . 4th column is a button (not shown in below code). When I click on the button in a row, I want to get row elements.
I have done it using closest selector. Is there any way to find table row element "Without using closest". This is the requirement for some reason.
Please assume there is a button at end of each row
<table id="food">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr class='details'>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>2</td>
<td>Mango</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>3</td>
<td>Grape</td>
<td>Fruit</td>
</tr>
</tbody>
</table>
Here is the existing code, I need to replace closest. It will be awesome if I can use class names like $(this).somethin('.details');
$('#button1').click(function(){
var row = $(this).closest('tr');
//Do some stuff
})
Thanks
Use parents() and pass a class selector like
$('#button1').click(function(){
var row = $(this).parents('.details');
//Do some stuff
})
Note, you could also use closest in this case and pass the class selector
var row = $(this).closest('.details');
How can I remove a td cell in a table with MVC4?
Could I use JQuery or JavaScript? And if so, how?
<table class="table table-striped table-bordered table-hover" id="tblParticipantList">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Redeem Code</th>
</tr>
</thead>
<tbody>
<tr data-id="columnId" id="customerPartial_94">
<td data-field="NAME">Attn Donna</td>
<td data-field="ADDRESS">3046 Lavon Drive Newyork America 7504</td>
<td data-field="SECURITY_REDEMPTION_CD"></td>
</tr>
<tr data-id="columnId" id="customerPartial_95">
<td data-field="NAME">F 1 La 1</td>
<td data-field="ADDRESS">Asd 1 s 1 Ci 1 s</td>
<td data-field="SECURITY_REDEMPTION_CD"></td>
</tr>
</tbody>
</table>
To remove TD item, you should know exactly td what you want to remove.
Remove All TD item
$('#tblParticipantList > tr > td').remove();
Remove TD at specified Row
$('#tblParticipantList > tr').eq(rowNum).children('td').remove();
Remove TD at specified Row and Column
$('#tblParticipantList > tr').eq(rowNum).children('td').eq(colNum).remove();
Remove child td of the position you want using eq(). Use proper id and class in the selector for expected result.
$('.table-striped tr').each(function(){
$(this).children('td').eq(3).remove();
});
I have two tables that will be placed side-by-side:
<table id="Table1" class="table table-hover">
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2 </td>
</tr>
</tbody>
</table>
<table id="Table2" class="table table-hover">
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2 </td>
</tr>
</tbody>
</table>
I want to make the row highlighting effect on mouse hover to work across the rows so that it appears as if they are the same table. I.e. When the user's curser is over Col 2 in table 1, then Col-2 in table one will also appear to be highlighted.
There are no classes added to the markup when highlighted so I don't think that I can use an on-hover event to then apply the class across the rest of the rows using jQuery.
Please not that I am using Bootstrap 3.0.3.
Try this
$('#Table1 tbody tr td').mouseover(function(){
var ro=$(this).closest('tr').index()
var col=$(this).index()
$(this).addClass('hov').siblings().removeClass('hov')
$('#Table2 tr:eq('+ro+')').find('td:eq('+col+')').addClass('hov').siblings().removeClass('hov')
});
$('#Table1 tbody tr td').mouseleave(function(){
var ro=$(this).closest('tr').index()
var col=$(this).index()
$(this).removeClass('hov')
$('#Table2 tr:eq('+ro+')').find('td:eq('+col+')').removeClass('hov')
});
DEMO