Appending a cloned tr object into a tbody, using jQuery - javascript

I want to clone the children of #secret_tr into the tbody of the .table.
<table class="table">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="secret_tr" style="display:none;">
<div>
<table>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This does not work apparently:
var template = $("#secret_tr").children().clone();
var tr = template.find("table tbody tr");
$("table.table tbody").append(tr);
However, if I run this line instead the tds are getting appended, except now I am missing the tr:
$("table.table tbody").append(tr.children());


This seams to work. I create a reference to the template. And with a reference to the <tr> I create a clone of the element. This clone can be appended <tbody>.
var template = $("#secret_tr");
var tr = template.find("table tbody tr").clone();
$("table.table tbody").append(tr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="secret_tr" style="display:none;">
<div>
<table>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Related

How to add a property/ styles to child nodes inside a parent element in angular

I had a table
<table>
<thead>
<tr> </tr>
</thead>
<tbody>
<tr> </tr>
</tboday>
</table>
I want to add a property to <tr> inside <tbody> not <thead>
After I add this line
(<HTMLElement>document.querySelector('tr')).setAttribute("draggable", "true");
the table looks like
<table>
<thead>
<tr draggable=true> </tr>
</thead>
<tbody>
<tr> </tr> // note here there is no above mentioned property. I need to put here
</tboday>
</table>
How can I add draggable=true to <tr> inside <tobdy>

this will help you
document.querySelector('tbody tr').setAttribute("draggable", "true");
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr>here </tr>
</tbody>
</table>

How to add a class if the number of rows in a table is some number with Javascript/jQuery

I am trying to add class to div if the number of rows in the table is larger than 3.
This is my code.
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$this.find('.box').addClass('newclass');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
I don't see why this code not working, can somebody try to help me with this?
What I try to achieve is this:
<div class="box newclass">

Your code isn't working because this is a reference to the .box element itself. When you do a find() from there you're looking for child elements, so nothing it returned. To fix the issue just remove the find() call.
However you can make the jQuery more succinct by simply using the :has() selector to retrieve .box elements which have more than 3 tr within them:
$('.box:has(tbody > tr:eq(3))').addClass('newclass');
.newclass { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
</tbody>
</table>
</div>

you already set the $this to the selector. and by now using $this.find will try to find inside the element itself, so u can use $this directly or search the document itself $(document).find instead of $this.find >>> try the button to show classes list
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$(document).find('.box').addClass('newclass');
}
});
$('button').on('click', function() {
console.log($(document).find('.box').attr('class'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<button> show classes list </button>

Get the contents of a td without an "id" attribute

I have the following HTML. How can I fetch the contents of the TD which is under tr class="status_visible" in JavaScript?. I have highlighted the td that I am interested in the code below. There could be multiple status_visible rows. I am only interested in the first row.
There is no id, so I can't use getElementById(). (I also can't use jQuery)
<table class="colored">
<thead>
<tr>
<th colspan="9">
<h2>History</h2>
</th>
</tr>
<tr>
<th>Value</th>
<th>Change Reason</th>
<th>Changed By</th>
<th>Changing Environment</th>
<th>Change Date (UTC)</th>
</tr>
</thead>
<tbody>
<tr class="status_visible">
<td>N</td> <!-- get this value -->
<td>CSS-ID: 343423</td>
<td>login_details</td>
<td>applicationname::signedinuser</td>
<td>2018-01-02 21:09:47 +0000</td>
</tr>
<tr class="status_hidden">
<td>Y</td>
<td>CSS-ID:5554</td>
<td>ServiceName</td>
<td></td>
<td>2014-02-19 13:37:50 +0000</td>
</tr>
</tbody>
</table>

Use document.querySelector() with this selector:
'tr.status_visible td:nth-child(n)'
… where n is the column of the td you're interested in (1-based).
For example, this will grab the text content of the first td of the tr having class "status_visible":
document.querySelector('tr.status_visible td:nth-child(1)').textContent
Snippet:
console.log(document.querySelector('tr.status_visible td:nth-child(1)').textContent);
<table class="colored">
<thead>
<tr>
<th colspan="9">
<h2>History</h2>
</th>
</tr>
<tr>
<th>Value</th>
<th>Change Reason</th>
<th>Changed By</th>
<th>Changing Environment</th>
<th>Change Date (UTC)</th>
</tr>
</thead>
<tbody>
<tr class="status_visible">
<td>N</td>
<td>CSS-ID: 343423</td>
<td>login_details</td>
<td>applicationname::signedinuser</td>
<td>2018-01-02 21:09:47 +0000</td>
</tr>
<tr class="status_hidden">
<td>Y</td>
<td>CSS-ID:5554</td>
<td>ServiceName</td>
<td></td>
<td>2014-02-19 13:37:50 +0000</td>
</tr>
</tbody>
</table>

You could loop through all the td's and show the text content using .textContent like :
var tds = document.querySelectorAll('tr.status_visible td');
for (var i = 0; i < tds.length; i++) {
console.log(tds[i].textContent);
}
var tds = document.querySelectorAll('tr.status_visible td');
for (var i = 0; i < tds.length; i++) {
console.log(tds[i].textContent);
}
<table class="colored">
<thead>
<tr>
<th colspan="9">
<h2>History</h2>
</th>
</tr>
<tr>
<th>Value</th>
<th>Change Reason</th>
<th>Changed By</th>
<th>Changing Environment</th>
<th>Change Date (UTC)</th>
</tr>
</thead>
<tbody>
<tr class="status_visible">
<td>N</td>
<td>CSS-ID: 343423</td>
<td>login_details</td>
<td>applicationname::signedinuser</td>
<td>2018-01-02 21:09:47 +0000</td>
</tr>
<tr class="status_hidden">
<td>Y</td>
<td>CSS-ID:5554</td>
<td>ServiceName</td>
<td></td>
<td>2014-02-19 13:37:50 +0000</td>
</tr>
</tbody>
</table>

How to replace a text with row count with javascript

i have a dynamic table . that i'd add number for each tr. how can i replace the hello text with count of each tr with javascript?
here is my snippet of table:
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<th>Hello</th>
<th>A</th>
</tr>
<tr>
<th>Hello</th>
<th>B</th>
</tr>
<tr>
<th>Hello</th>
<th>C</th>
</tr>
</table>
</body>
</html>

you should be using <td> instead of <th> after the header row.
$('tr').each(function(index, row){
$(row).children('td').first().text(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<td>Hello</td>
<td>A</td>
</tr>
<tr>
<td>Hello</td>
<td>B</td>
</tr>
<tr>
<td>Hello</td>
<td>C</td>
</tr>
</table>
</body>
</html>

Here is the solution for your problem -
var table = document.querySelector("#myTable");
var rows = table.querySelectorAll("tr");
let index = 0;
for( let row of rows){
for( let col of row.querySelectorAll("th")){
if( col.textContent == 'Hello'){
col.textContent = index;
}
}
index++;
}
<table border="1" id="myTable">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<th>Hello</th>
<th>A</th>
</tr>
<tr>
<th>Hello</th>
<th>B</th>
</tr>
<tr>
<th>Hello</th>
<th>C</th>
</tr>
</table>

You need to get all the <tr> elements within the table. Then loop through the <tr>s and starting with the second one, replace its first child's text with the index of the current <tr>.
let tableRows = document.querySelectorAll("tr")
tableRows.forEach((tr, index) => {
if(index === 0) {
//Do nothing bc you don't want to remove the text in the first table row
} else {
let firstChild = tr.children[0]
firstChild.innerText = index
}
})

You can use find("td:first") to get the numbers that would replace "Hello". Also, since its a table, you need to use td. th are used for headers:
$('tr').each(function(index, row) {
$(row).find("td:first").text(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<td>Hello</td>
<td>A</td>
</tr>
<tr>
<td>Hello</td>
<td>B</td>
</tr>
<tr>
<td>Hello</td>
<td>C</td>
</tr>
</table>
</body>
</html>

Can't find the selectors of a fixed header table

Original Table Example
Example with Fixed Table Header
The first example shows a comparison table that displays data dynamically in a column on click. When the table is full, it'll remove .addinfo class and go back to the second column to replace old data. The problem comes in when I try to use a fixed header plugin from this page. It creates a second thead to allow th to be fixed at the top, like this:
<table id="toptable" style="padding: 0px;">
<thead class="Original">
<tr>
<th style="visibility:hidden">-</th>
<th class="image addinfo">Fdw</th>
</tr>
</thead>
<thead class="Floating" style="display: none;"> //Second Thead//
<tr>
<th style="visibility:hidden">-</th>
<th class="image addinfo">Fdw</th>
</tr>
</thead>
<tbody>
<tr>
<td class="description">Name</td>
<td class="description addinfo">Fdw</td>
</tr>
<tr>
<td class="title">Age</td>
<td class="title addinfo">Fdw</td>
</tr>
<tr>
<td class="title">Age</td>
<td class="title addinfo">Fdw</td>
</tr>
<tbody>
</table>
As you see in the second example, it can't remove the class .addinfo when the table is full. I guess I need to change the table selectors in the script to get it to work. Can someone tell me which table selectors I should change?
This code only works for the first example:
$(function () {
function filltable(buttontext) {
var i = $('th.addinfo').length !== 0 ? $('th.addinfo:last').index() : 0;
i + 2 > $('th').length || $('th,td').filter(':nth-child(' + (i + 2) + ')')
.addClass('addinfo').html(buttontext);
}
$('.area').each(function () {
var area = $(this),
button = $(this).find('button'),
buttontext = button.text();
button.on("click", function () {
var allCells = $('table').find('th').length-1;
var fullCells = $('table th.addinfo').length;
console.log(allCells, fullCells);
if (allCells === fullCells) { // If table is full
$('table .addinfo').removeClass('addinfo');
filltable(buttontext);
} else { // If table isn't full
filltable(buttontext);
}
});
});
});
First Example Markup
<div class="area">
<button>Gah</button>
</div>
<div class="area">
<button>Kaj</button>
</div>
<div class="area">
<button>Fdw</button>
</div>
<div class="area">
<button>ffdf</button>
</div>
<table>
<thead>
<tr>
<th>Placeholder</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Age</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Nationality</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Education</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Background</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Language</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Change
var allCells = $('#toptable').find('th').length - 1;
To
var allCells = $('#toptable').find('th').length - 2;
JS FIDDLE DEMO

Categories

Resources