Add different custom tables to DOM by click event with Jquery - javascript

I have the following table with buttons on a simple HTML.
I need the buttons to be able to remove the current table and draw a new table (with a different content) to the DOM without reloading the page.
I have a JQuery method for removing the current table element, however I struggle with adding another table.
How can a table be added efficiently?
<!DOCTYPE HTML>
<html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
.header-class{
font-size:25px;
font-family:cursive;
background-color:lightgray;
cursor:pointer;
}
.members {
font-family:helvetica;
}
.blips {
color:red;
}
.crudz {
color:blue;
}
.satin-flings {
color:rgb(213, 194, 0);
}
td {
padding-right:10px;
padding-left:10px;
border: 10px;
}
</style>
<body>
<button class="tableRevmoveButton"> Remove table </button>
<button class="tableAddButton"> Add table </button>
<button class="tableAddNewButton"> Add different table </button>
<div class="tabel">
<table class="itdev_people">
<tr class="header-class">
<td colspan="4">The Blips</td>
</tr>
<tr class="members blips">
<td>Rotton </td>
<td>Rob</td>
<td>ttt</td>
</tr>
<tr class="members blips">
<td>Effram</td>
<td>The Dumb Rabbot</td>
</tr>
<tr class="members blips">
<td>Effram</td>
<td>The Dumb Rabbot</td>
</tr>
<tr class="header-class">
<td colspan="2">The Crudz</td>
</tr>
<tr class="members crudz">
<td>Jason</td>
<td>"Sky" Halker</td>
</tr>
<tr class="members crudz">
<td>Sparky</td>
<td>That stupid Eagle</td>
</tr>
<tr class="header-class">
<td colspan="2">The Satin Flings</td>
</tr>
<tr class="members satin-flings">
<td>Josh-man</td>
<td>McDanielson-man III</td>
</tr>
<tr class="members satin-flings">
<td>Dominque</td>
<td>The Christmas Donkey</td>
</tr>
<tr class="header-class">
<td colspan="2">The Satin Flings</td>
</tr>
<tr class="members satin-flings">
<td>Josh-man</td>
<td>McDanielson-man III</td>
</tr>
<tr class="members satin-flings">
<td>Dominque</td>
<td>The Christmas Donkey</td>
</tr>
</table>
</div>
<script>
//Table action
$('.header-class').click(function() {
console.log('clicked');
if ($(this).hasClass('collapsed')) {
$(this)
.nextUntil('tr.header-class')
.find('td')
.parent()
.find('td > div')
.slideDown('fast', function() {
var $set = $(this);
$set.replaceWith($set.contents());
});
$(this).removeClass('collapsed');
} else {
$(this)
.nextUntil('tr.header-class')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp('fast');
$(this).addClass('collapsed');
}
});
//Table Remove Button action
$('.tableRevmoveButton').click(function() {
$('.tabel').remove();
console.log('Remove table');
});
//Table add Button action für add
$('.tableAddButton').click(function() {
$('body').append('.tabel');
console.log('Add table');
});
</script>
</body>
</html>

if you have class for table which i guess you are having .tabel then use this
$('.tableAddButton').click(function() {
$('body').addClass('.tabel');
console.log('Add table');
});
but if dont have a class and want to create table with html code in script then
$('.tableAddButton').click(function() {
$('body').append('<table><thead>...</thead>...</table>');
console.log('Add table');
});
or if you want only table in the body
$('.tableAddButton').click(function() {
$('body').html('<table><thead>...</thead>...</table>');
console.log('Add table');
});

It shouldn't be too difficult using the .append() JQuery function. When the button is clicked, select the tableDiv that you want to add the new table to, and then append table html.
$("#btn").click(function(){
$("#tableDiv").append("<table><tr><th>Appended table</th></tr></table>");
});

Related

Target closest Table Row when button inside of TD is clicked jQuery

So. I have this table:
<table>
<tr>
<td>Element1</td>
<td>Element1</td>
<td>Element1</td>
<td><a id="btn" href=#">Accept</a></td>
</tr>
<tr>
<td>Element2</td>
<td>Element2</td>
<td>Element2</td>
<td><a id="btn" href=#">Accept</a></td>
</tr>
</table>
What I want to do is: Button gets clicked, it gets hidden and the respective <tr> gets border: 1px solid black;.
I'm kinda new to jQuery and can't figure out how to select the 2nd parent of an element. Any help would be appreciated
your buttons are using the same id value. you have to use class
Also you don't need to use jQuery. please follow this code
const btns = document.querySelectorAll('.id');
btns.forEach((btn) => {
btn.addEventListener('click', (e) => {
e.preventDefault();
e.target.closest('tr').style.cssText = "border:1px solid black";
e.target.remove();
})
});
table {
border-collapse: collapse
}
<table>
<tr>
<td>Element1</td>
<td>Element1</td>
<td>Element1</td>
<td><a class="id" href=#">Accept</a></td>
</tr>
<tr>
<td>Element2</td>
<td>Element2</td>
<td>Element2</td>
<td><a class="id" href=#">Accept</a></td>
</tr>
</table>

How to get the first td value using jquery

I have create a table with following style. Now I want to get first td value as 1,2,3 using jQuery.
<html>
<head>
<style type='text/css'>
table {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
</style>
</head>
<body>
<table border="1" id="MyTable">
<tr>
<td></td> <td>blue</td>
</tr>
<tr>
<td></td><td>red</td>
</tr>
<tr>
<td></td><td>black</td>
</tr>
</table>
</body>
</html>
I tried with following script but it showing row counter as text. How to get the value of first td?
<script>
$("#MyTable").find('tr').each(function (i, el) {
$(this).find('td:eq(0)').each(function () {
console.log(window.getComputedStyle(this, ':before').content);
});
});
</script>
Based on this:
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor.
So if you see the html that generated, you will see all td is empty while you see counter (1,2,3) in page. this is html generated:
But this is result:
So generated content does not alter the document tree and you can't access to value of it.
There are lots of alternative you can do it:
$("#MyTable").find('tr').each(function (i, el) {
debugger
$(this).find('td:eq(0)').each(function (index, el) {
$(this).html(i+1)
console.log($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
<tbody>
<tr>
<td></td>
<td>blue</td>
</tr>
<tr>
<td></td>
<td>red</td>
</tr>
<tr>
<td></td>
<td>black</td>
</tr>
</tbody>
</table>
Update
You can rest number after each modification on your table:
function setnumber() {
$('#MyTable tbody tr').each(function (i) {
$($(this).find('td')[0]).html(i + 1);
});
}
$(".delete").click(function () {
$(this).closest('tr').remove();
setnumber();
});
setnumber();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
<tbody>
<tr>
<td></td>
<td>blue</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
<tr>
<td></td>
<td>red</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
<tr>
<td></td>
<td>black</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
</tbody>
</table>
Probably, you want to put 1,2,3 in TDS on DOM.
You can do like this:
$("#MyTable").find('tr').each(function (i, el) { $(el).find("td").eq(0).text(i); });
https://codesandbox.io/s/jquery-playground-forked-pmtgc?file=/src/index.js
You can use child selector to select the child of tr
jQuery("body > table > tr:nth-child(1) > td:nth-child(1)").text();

Get dataset item from html <a> element using jquery

I have an element within a table in html:
<td><a id="href0" href="#" data-productid="0">Product 1</a></td>
and i need to get the value of the "data-productid" attribute
at the moment i have this code:
$(document).ready(function(){
$('#href0').click(function(event) {
event.preventDefault()
console.log(this.dataset.productid)
return false;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><a id="href0" href="#" data-productid="0">Product 1</a></td>
and nothing is being printed in the console.
I am using handlebars
We managed to establish you are using Handlebars templating
What MIGHT then be the case is your links are inserted dynamically when you compile the handlebars.
If that is the case you need to delegate and then this question is a duplicate of Event binding on dynamically created elements?
$(document).ready(function(){
// document or the nearest STATIC container
$(document).on('click','[data-productid]',function(event) {
event.preventDefault()
console.log(this.dataset.productid)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><a id="href0" href="#" data-productid="0">Product 1</a></td>
<td><a id="href0" href="#" data-productid="1">Product 2</a></td>
You dont need to the a in the td at all (or even the id on the a or the td) - simply apply the click handler to the td and have the data attribute on that so that when it is clicked - the console will log the data attribute.
$(document).ready(function(){
$('td').click(function() {
let id = $(this).attr('data-productid');
console.log('The product id is ' +id)
})
});
table {
border-collapse: collapse
}
td {
border:solid 1px #d4d4d4;
padding: 10px 20px;
border-collapse: collapse
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td data-productid="1">Product 1</td>
<td data-productid="2">Product 2</td>
</tr>
<tr>
<td data-productid="3">Product 3</td>
<td data-productid="4">Product 4</td>
</tr>
</table>
If you absolutely must have the a - then its the same as above - just applied to the different element
$(document).ready(function(){
$('a').click(function(event) {
event.preventDefault();
let id = $(this).attr('data-productid');
console.log('The product id is ' +id)
})
});
table {
border-collapse: collapse
}
td {
border:solid 1px #d4d4d4;
padding: 10px 20px;
border-collapse: collapse
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Product 1</td>
<td>Product 2</td>
</tr>
<tr>
<td>Product 3</td>
<td>Product 4</td>
</tr>
</table>

Use 'view more' button to enhance information on each table row

I have a pretty simple html table, there are lots of information i want to add for each row but i cant display everything when the page is loaded because it is going to make everything very clumsy. So i want to add a view more button in another column for each of the row.
I have already tried writing a JavaScript code but its not working as i want. What i want is:
The row should be completely invisible until i click the view more (i tried putting the tags inside the div but it messed everything up by putting the row outside the table entirely).
I want the code to work for all the rows so i don't have to write separate codes for each row.
I want the extended information for a row to be invisible whenever i try to view more for another row.
If possible, i would like a simple animation for showing the extended animation.
Below is my HTML code:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>Jane Doe is a woman</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
</table>
Below is my CSS:
<style type="text/css">
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
</style>
Below is my Javascript:
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
Since you tagged jQuery, I'm assuming you're willing to use it, so here's an example of a fix with jQuery:
EDIT: The html has changed, the second row failed to work due to the ID selector
HTML
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>View More</td><!-- Note the change in the showHide() function -->
</tr>
<tr>
<td colspan="3">
<div id="exampleFemale" class="more"><!-- Note the change in the ID -->
<p>Jane Doe is a woman</p>
<p style="text-align:right;">Hide this content.</p><!-- Note the change in the showHide() function -->
</div>
</td>
</tr>
</table>
Javascript
function showHide(shID) {
if ($('#' + shID)) {
if ($('#' + shID+'-show').css('display') != 'none') {
$('#' + shID+'-show').css({'display':'none'});
$('#' + shID).css({'display':'block'});
}
}
else {
$('#' + shID+'-show').css({'display':'inline'});
$('#' + shID).css({'display':'none'});
}
}
Note the changes inthe Javascript -> jQuery where there used to be document.getElementById(shID+'-show') is now $('#' + shID+'-show') and where there used to be .style.display = 'none'; is now .css({'display':'none'});
Don't forget to include jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Hope this helps!

How to highlight current rendered line at mouse pointer, in HTML? (Not table/rows)

I want to highlight the current line when mouse moves, is it possible?
It's not table rows, just plain text in paragraphs.
I'm writing a reading helper plugin for Google Chrome, to help browsing within a big chunk of text.
Depends on your definition of "line". If it's a table row or something you can refer to, you can simply do something like this
<table>
<tbody>
<tr>
<td> Item 1</td><td> Item 2</td>
</tr>
<tr>
<td> Item 1</td><td> Item 2</td>
</tr>
</tbody>
</table>
And use this in your stylesheet
table tr:hover td {
background-color: #dddddd;
}
If you want to highlight Table row then apply this
<STYLE>
<!--
tr { background-color: #DDDDDD}
.initial { background-color: #DDDDDD; color:#000000 }
.normal { background-color: #CCCCCC }
.highlight { background-color: #8888FF }
//-->
</style>
<table border="0" cellspacing="0" bgcolor="#CCCCCC" cellpadding="0">
<tr>
<td bgcolor="#FFCC00" WIDTH="100"><b>Brand</b></td>
<td bgcolor="#FFCC00" WIDTH="100"><b>Dimensions</b></td>
<td bgcolor="#FFCC00" WIDTH="100"><b>Price</b></td>
</tr>
<tr style="background-color:#CCCCCC;"
onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
<td>Row A</td>
<td>200x300</td>
<td>$200,000.00</td>
</tr>
</table>
If each line is enclosed with in HTML element of there own the and event handler can be attached.
<html>
<script type="text/javascript" src="./jquery-1.4.2.min.js"> </script>
<script type="text/javascript" >
$(document).ready(function() {
$(".lineclass").hover(function() {
$(this).css("backgroundColor","red");
},
function() {
$(this).css("backgroundColor","");
});
});
</script>
<body>
<p class="lineclass">This is line 1</p><br />
<p class="lineclass">This is line 2</p><br />
<p class="lineclass">This is line 3</p><br />
</body>
</html>

Categories