I have multiple tables wher each row is defined by an ID and a class. The words in each row are actually href links. I have one button with id testbuttonba. If testbuttonba is clicked, I want the following to occur:
1) href for ID table1 to be disable.
2) href for ID table2 and table3 to still be enabled.
My code below does not work (all links are still enabled after clicking):
HTML
<body>
<button class="btnba" id="testbtnba" onclick="function2()">BA</button>
/* 1st Table */
<table>
<tr>
<th><font size="1">Capability Group</font></th>
</tr>
<tbody id="table1">
<tr>
<td><font size="1"><strong>A. Organisational Content</strong></font></td>
</tr>
</table>
/* 2nd Table */
<table>
<tr>
<th><font size="1">Capability Group</font></th>
</tr>
<tbody id="table2">
<tr>
<td><font size="1"><strong>B. Basic Requirements</strong></font></td>
</tr>
</table>
/* 3rd Table */
<table>
<tr>
<th><font size="1">Capability Group</font></th>
</tr>
<tbody id="table3">
<tr>
<td><font size="1"><strong>C. Rules and Regulations</strong></font></td>
</tr>
</table>
JavaScript
<script>
/*diasble the first link - not working*/
function function2() {
document.getElementById("table1").href = "#";
}
return false;
</script>
Your script is grabbing the wrong element. document.getElementById("table1") returns a tbody element, which does not have an hrefattribute on it.
You need to add an id to the a element, like: <a id="some-id">
Then, use it to grab the link and change the href: document.getElementById("some-id").href = "#";
please change the function
function function2() {
document.getElementById("table1").getElementsByTagName('a')[0].href = "#";
}
result of this code document.getElementById("table1") is tbody tag and then you should find the tag a in this tag then disable the href .
i hope my answer give you an idea .
You have to find the anchor tag in element with id table1, and disable it like below.
function function2() {
var a = document.querySelector('#table1 a');
a.setAttribute('href','#');
}
You shouldn't remove the href on the <a/> (at least without storing in some way). You can create a toggle that will determine whether or not Event.preventDefault() will be called when the button is clicked.
This will do the trick:
let linkActive = false;
disableToggle = () => {
linkActive = !linkActive;
}
document.querySelector('#table1 tr td a').onclick = ev => {
if (linkActive) {
ev.preventDefault('sd');
}
};
.smallFont {
font-size: 10px;
}
<button class="btnba" id="testbtnba" onclick="disableToggle()">BA</button>
<br/> /* 1st Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table1">
<tr>
<td>
<a href="showdoc.html">
<span class="smallFont"><strong>A. Organisational Content</strong></span>
</a>
</td>
</tr>
</table>
/* 2nd Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table2">
<tr>
<td>
<a href="showpdf.html">
<span class="smallFont"><strong>B. Basic Requirements</strong></span>
</a>
</td>
</tr>
</table>
/* 3rd Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table3">
<tr>
<td>
<a href="showexcel.html">
<span class="smallFont"><strong>C. Rules and Regulations</strong></span>
</a>
</td>
</tr>
</table>
The reason it does not work in your snippet above is only because your selector doesn't select the <a/> element, doing this will rectify that:
function function2() {
document.querySelector("#table1 tr td a").setAttribute('href', '#');
}
.smallFont {
font-size: 10px;
}
<button class="btnba" id="testbtnba" onclick="disableToggle()">BA</button>
<br/> /* 1st Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table1">
<tr>
<td>
<a href="showdoc.html">
<span class="smallFont"><strong>A. Organisational Content</strong></span>
</a>
</td>
</tr>
</table>
/* 2nd Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table2">
<tr>
<td>
<a href="showpdf.html">
<span class="smallFont"><strong>B. Basic Requirements</strong></span>
</a>
</td>
</tr>
</table>
/* 3rd Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table3">
<tr>
<td>
<a href="showexcel.html">
<span class="smallFont"><strong>C. Rules and Regulations</strong></span>
</a>
</td>
</tr>
</table>
Keep in mind, that there is no way to re-enable the link using the code in this way :o
Update: Replaced the <font/> tags with some CSS. The <font/> element is obsolete.
Hope that helps,
Related
I am trying to get just one ID when I click the Delete button, but I am receiving the whole list of it. Here is how I tried with jQuery. (solutions in both js and jquery is welcome)
the DOM :-
<tbody>
<tr class="tablerow">
<td class="delete"> </td>
<td class="id"></td>
</tr>
</tbody>
appending the data to the DOM (100 data is being fetched):-
let apiGetter = JSON.parse(localStorage.getItem('data'));
apiGetter.map((item,index) => {
del.append('<li> DELETE </li>');
id.append(`<li> ${item.id}</li>`);
}
My Solution that is listing all the ids that are in the DOM. (i want the id of the button that's clicked on)
$('.delete').click(function() {
let id = $(this).next('.id').text();
console.log(id); // 0 1 2 3 4 5 6 ... 98 99 100
})
Follow this code
HTML
<table>
<thead>
<tr>
<th>ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="delete" data-id="1">Delete</td>
</tr>
<tr>
<td>2</td>
<td class="delete" data-id="2">Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3</td>
<td class="delete" data-id="3">Delete</td>
</tr>
</tfoot>
</table>
Jquery
$(document).on('click','.delete',function(){
alert($(this).data('id'));
})
CSS
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
It very easy and it will work.
update: almost done! problem is that the productrow im trying to grouop gets divided into two groups: https://jsfiddle.net/g3zrh5y5/1/
I have a HTML table that I would like to convert and group to divs. I have dont his succesfully with tableanarchy.js (http://codepen.io/KurtWM/pen/AJpEw) on another table on my site, but on this table the setup is a bit different and I cant make it to work.
I need to remove the divider table row, and group the rest in divs as the example shows. Any idea how I do this?
<tbody>
<tr>
<td class="unfoldedlabel" colspan="6"><a href="javascript://" name=
"_ec_pd6_cc/cL" id="_ec_pd6_cc/cL" onclick=
"if( UI.pb_boolean(this, 'click') ) {} return false;">Backup/datalagring/Raid
Controllers</a></td>
</tr>
//group this ---->
<tr>
<td rowspan="2"><a href=
"">
<img src="/imgs" alt="" /></a></td>
<td colspan="3"><a href=
"">
HP Flash Backed Write Cache - RAID controller cache memory (1GB)</a></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>534562-B21</td>
<td>HP</td>
<td>0</td>
<td>4 127,97SEK</td>
<td><input type="button" id="rpb13804" class="actionbutton" value="KÖP NU"
onclick="buy(this, 13804, null, null,null, '/ajax/buy')" /></td>
</tr>
//end group ---->
//remove this ---->
<tr>
<td class="divider" colspan="6"></td>
</tr>
//end remove ---->
//group this ---->
<tr>
<td rowspan="2"><a href=
"">
<img src="/imgs/9248a5f8-1a45-40c1-b254-52ab24881150/40/40" alt="" /></a></td>
<td colspan="3"><a href=
"">
HP Flash Backed Write Cache - RAID controller cache memory (512MB) - for ProLiant
BL460c G7, BL620C G7, BL680c G7, DL165 G7, DL360 G7, DL370 G6, DL980 G7, ML110
G7</a></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>534916-B21</td>
<td>HP</td>
<td>0</td>
<td>3 260,99SEK</td>
<td><input type="button" id="rpb28314" class="actionbutton" value="KÖP NU"
onclick="buy(this, 28314, null, null,null, '/ajax/buy')" /></td>
</tr>
//end group ---->
</tbody>
Just iterate the table rows and exclude the rows you don't need. Here is a working fiddle
$(document).ready(function(){
$('.group-btn').click(function(){
// Lets create the main div
var div = $('<div />', {id: '#myDiv', class: 'new-div'});
// Let's start iterating the body rows
$('.myTable tbody tr').each(function(index, row) {
// Exclude divider rows
if(!$(row).hasClass('divider')) {
// Let's iterate the columns of the row
$(row).find('td').each(function(index, column){
// This is a simple example that extract the column text that's why i create a simple <p> tag
// Let's exclude tds that have "exclude" class
if(!$(column).hasClass('exclude')) {
var paragraph = $(column).html();
$(div).append(paragraph).append('<br/>');
}
});
}
});
// And finally we append the div to the "append-here" div
$('.append-here').append(div)
});
});
table {
border: 1px solid black
}
table tr td{
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="group-btn">Click me!</button>
<table class="myTable">
<thead>
<tr>
<th>col 1-1</th>
<th>col 2-1</th>
<th>col 3-1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1-2</td>
<td class="exclude">Val 2-2</td>
<td>Val 3-2</td>
</tr>
<tr>
<td>Val 1-3</td>
<td>Val 2-3</td>
<td class="exclude">Val 3-3</td>
</tr>
<tr class="divider">
<td colspan="3">DIVIDER</td>
</tr>
<tr>
<td>Val 1-5</td>
<td>Val 2-5</td>
<td>Val 3-5</td>
</tr>
</tbody>
</table>
<div class="append-here">
<p>Here is where you append the divs</p>
</div>
I've made a little change: the "divider" class is in the tr and not in the td
* UPDATE *
I've added this line of code
if(!$(column).hasClass('exclude')) {
var paragraph = $(column).html();
$(div).append(paragraph).append('<br/>');
}
That permits you to check whatever class you need to check in order to include/exclude tds elements
here is my html code wordpress that makes a table in my plugin dash page:
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
this text is to be selected
<span style="color:red"></span>
<div class="row-actions">
<span class="subjects"></span>
<span class="settings"></span>
<span class="clone"></span>
<span class="users"></span>
<span class="uploads"></span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>
with my jquery code i want to select this text is to be selected only inside td:
$(".exam_cb").click(function() {
$(this).parent("th").next("td").next("td").hide(); // hides td class exam_name
$(this).parent("th").next("td").next("td").text().hide(); // not working
$(this).parent("th").next("td").next("td").html().hide(); // not working
$(this).parent("th").next("td").next("td").val().hide(); // not working
});
what is wrong with me?
You need to select text node by filtering them by nodeType. and then wrap the content in dom element with css display none:
$(this).parent().siblings('.exam_name').contents().filter(function() {
return this.nodeType == 3;
}).wrap('<span style="display:none"></style>');//wrap in span and hide the,
Working Demo
You cannot apply hide on text() - you apply it on an HTML Element
$(this).parent("th").next("td").next("td").hide();
Thats causing a JS Error and hence none of your other statements after that is working
and the same is true for val().hide() - A JS Error will be thrown
$(".exam_cb").click(function() {
var columnmTo=$(this).parent("th").next("td").next("td");
columnmTo.find('.selectedTest').addClass('highlight');
columnmTo.find('.error').hide();
columnmTo.find('.row-actions').hide();
});
span.highlight
{
font-weight:bold;
}
span.error
{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
<span class="selectedTest">this text is to be selected</span>
<span class="error">Hello</span>
<div class="row-actions">
<span class="subjects">a</span>
<span class="settings">b</span>
<span class="clone">c</span>
<span class="users">c</span>
<span class="uploads">d</span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>
<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td><a onclick="service.removeRow(field_baf1034a_d9d1_a85f_3294_0de635d39c82);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td><a onclick="service.removeRow(field_85a21c73_da7c_3814_609e_0b743c8f014f);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
</tr>
</tbody>
</table>
Javascript code:
var service = {
removeRow:function(id){
/* alert(id) == [object HTMLTableRowElement]*/
$("#"+id).remove();
}
}
Console Error:
Error: Syntax error, unrecognized expression: #[object
HTMLTableRowElement]
I want to delete table row, please help.
You are passing identifiers not strings.
Consequently, the horrible IE4ism that has somehow made it into HTML which causes every element with an id to create a global JS variable with the same ID is giving you the <tr> elements themselves.
When you "#"+id you convert the HTML Element object into a string, which is [object HTMLTableRowElement]
Put quotes around the IDs you are passing.
service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82')
You need to quote the IDs when you have them in your html like that:
<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td><a onclick="service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td><a onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
</tr>
</tbody>
</table>
or better yet, don't inline your event handlers and do it all in JS:
$('#fieldList a').on('click', function (e) {
$(this).closest('tr').remove();
});
which has the side effect of neater html:
<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td> <i class="fa fa-delete"></i>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td> <i class="fa fa-delete"></i></td>
</tr>
</tbody>
</table>
You can simplify your code by referencing the parent tr, not directly, but starting from the child td using jQuery closest.
HTML:
<td><a onclick="service.removeRow(this);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
Code:
var service = {
removeRow:function(el){
$(el).closest('tr').remove();
}
}
In this way you can avoid to hard code its id.
Demo: http://jsfiddle.net/IrvinDominin/keLnN/
If you want to delete the row, where is the button, the better way is to use "this", not hardcoded the Row's IDs, because if ID is different - you need to change the function.
Set all a-tags to be:
<a onclick="service.removeRow(this);" href="javascript:void(0);">
then, the function will be:
var service = {
removeRow:function(td){
$(td).closest("tr").remove();
}
}
change the mark up like this...
onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');
hope it solves!
Try this:
$('"#'+id+'"').remove();
Create <a> tags like below
<a class="removeRow" href="javascript:void(0);">
then in Jquery
$(document).ready(function(){
$('.removeRow').click(function(){
$(this).closest('tr').remove();
});
});
You need to remove a child from its parent node so here is a small example
<!DOCTYPE html>
<html>
<body>
<table id="table1" border="2">
<tr id="tr1" >
<td id="td1"><p id="p1">This is a paragraph.</p></td>
<td id="td1"><p id="p2">This is another paragraph.</p></td>
</tr>
</table>
<script>
var parent=document.getElementById("table1");
var child = document.getElementById("tr1");
child.parentNode.removeChild(child);
</script>
</body>
</html>
Actually here i have a table with a id of table1 as you can see...
in script i defined a variable with the name of child ...
now in last line child.parentNode.removeChild(child); child is the name of variable that we define earlier... after then parentNode will search for its parent node of child that is table and after then the removeCHILD will remove the child...
hope you understood! thanks
I have a table that has a column with Yes/No as possible values
<table id="mytable">
<thead>
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
ActiveYN
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apple
</td>
<td>
12345
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Orange
</td>
<td>
67890
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Mango
</td>
<td>
456745
</td>
<td>
Yes
</td>
</tr>
I need to show the row if ActiveYN is 'Yes' and Hide id ActiveYN is 'No'
How can i access the ActiveYN inside JQuery and show/hide accordingly?
DEMO
$('button').on('click', function () {
var $rowsNo = $('#mytable tbody tr').filter(function () {
return $.trim($(this).find('td').eq(2).text()) === "No"
}).toggle();
});
How about something like this: $('td:contains("No")').parent().hide();
Live Demo
JS
$('input').click(function(){
$('td:contains("No")').parent().toggle();
});
HTML
<input type='button' value='hide/show' />
<table id="mytable">
<thead>
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
ActiveYN
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apple
</td>
<td>
12345
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Orange
</td>
<td>
67890
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Mango
</td>
<td>
456745
</td>
<td>
No
</td>
</tr>
usually I would add this as an attribute on the row:
<tr data-active="No">
....
</tr>
Then to hide them all you can do:
$(function(){
$("[data-active=No]").hide();
});
Or you can add different classes/styles based on the value when it creates the table.
You can do it from server side itself.
#if (item.ActiveYN) {
<tr style="display: none;">
} else {
<tr>
}
I don't know the razor syntax, but you get the idea.
To be able to do it from client-side, add a class.
#if (item.ActiveYN) {
<tr class="hideMe">
} else {
<tr>
}
And then in jQuery:
$('.hideMe').hide();
Edited again after your question was edited, now if we forget the server-side altogether:
$("mytable").find("tr:contains('No')").hide();
Use this statement in your button click handler function. But, remember it will also find any text which contains "No" anywhere in a row. To make it more precise, use regular expressions to search exactly a "No".