This must be a very easy and simple but i"m finding it hard to get it done.
I have a list of rows with 6 Column which shows data from mysql. I would like to make each row clickable instead of cell which opens a new url in new tab.
Here is the structure.
<tr> <a target="_" href="https://www.google.com">
<td style="text-decoration: underline; font-size: 15px;"> </td>
<td><?php echo $row['district']; ?></td>
<td><?php echo $row['program']; ?></td>
<td><?php echo $row['gender']; ?></td>
<td><?php echo $row['yoa']; ?></td>
<td><?php echo $row['email']; ?></td>
</a></tr>
Above Method Don't work.
Any Help is appreciated
Try this (without JS):
<tr>
<td style="text-decoration: underline; font-size: 15px;"></td>
<td>
<a href="http://google.com">
<div style="height:100%;width:100%">
1<?php echo $row['district']; ?>
</div>
</a>
</td>
<td>
<a href="http://google.com">
<div style="height:100%;width:100%">
2<?php echo $row['program']; ?></td>
</div>
</a>
<td>
<a href="http://google.com">
<div style="height:100%;width:100%">
3<?php echo $row['gender']; ?>
</div>
</a>
</td>
<td>
<a href="http://google.com">
<div style="height:100%;width:100%">
4<?php echo $row['yoa']; ?>
</div>
</a>
</td>
<td>
<a href="http://google.com">
<div style="height:100%;width:100%">
5<?php echo $row['email']; ?>
</div>
</a>
</td>
Try this:
tr {
position: relative;
}
tr a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This will make anchor tag occupies the whole tr width and height, if needed, add z-index to <a>
Remove tag "A"
and bind onClick event at "TR"
<tr onclick="_linkWhatYouWant" style="cursor: pointer;"> <td> ... blabla </td> </tr>
I would like to say that this is not correct by the semantic point of view; However, you can set the role=button rule in your html.
function navigateTo(url) {
window.location.href(url);
}
document.querySelector('#row-1').addEventListener('click', function() { navigateTo('http://www.google.com/') });
table {
border-collapse: collapse;
}
tr {
border: 1px solid black;
cursor: pointer;
}
tr:hover {
background: rgba(255,0,0,0.3);
}
<table>
<tr id='row-1' role='button'>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
<td>Item 6</td>
</tr>
<tr id='row-2' role='button'>
<td>Item 7</td>
<td>Item 8</td>
<td>Item 9</td>
<td>Item 10</td>
<td>Item 11</td>
<td>Item 12</td>
</tr>
</table>
Consider the following example:
https://jsfiddle.net/Twisty/3hnt6mws/
HTML
<table>
<tr data-link="https://www.google.com" data-target="_BLANK">
<td>
District
</td>
<td>
Program
</td>
<td>
Gender
</td>
<td>
YOA
</td>
<td>
Email
</td>
</tr>
</table>
JavaScript
$(function() {
$("table tr").click(function(e) {
var u = $(this).data("link");
var t = $(this).data("target");
console.log(u, t);
if (t.length) {
window.open(u, t);
} else {
window.location.href = u;
}
});
});
Using the data attribute, you can store more info with the row and use that in the click event. You can then programmatically direct the browser to open a new window or direct to a new location.
Hope that helps.
You can use jQuery and click function. This approach is simple and it gives you freedom to decide which rows are used as links. All you need to do is add a class and data attribute. You can also add cursor:pointer property in CSS.
$('.click').click(function(){
window.location = $(this).data('href');
//use window.open if you want a link to open in a new window
});
.click{cursor:pointer}
<tbody>
<tr class="click" data-href="some-url-here">
<th>1</th>
<td>John Smith</td>
<td>1-234-567-8900</td>
</tr>
</tbody>
The <tr> tag defines a row in an HTML table.
A <tr> element contains one or more <th> or <td> elements.
<table>
<a href="www.google.com"><tr>
<th>Month</th>
<th>Savings</th>
</tr></a>
<tr>
</table>
try this will help you u can use <button> tag also to display like a button
Related
I have the following function. I am trying to remove all <img> tags and only the second row from table that is inside this data. The code and selectors work fine in console but I don't get the result in data variable after replacing all things.
function fetchDetails(URLToRead, email) {
$.get(URLToRead, function (data) {
console.log(data);
var imgTags = $(data).find('img');
$.each(imgTags, function (i,v) {
$(v).remove();
});
$(data).find('table tr:nth-child(2)').remove();
console.log(data);
});
}
URLToRead content:
<TABLE>
<TR>
<TD>
<span></span>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD ><span ></TD>
</TR>
<TR>
<TD height="12" colSpan="4"><IMG src="../images/spacer.gif" width="20" height="7"></TD>
</TR>
</TABLE>
The problem is that .remove() works on elements that are in the DOM. Your data is never added to the DOM.
You can create a div with display: none and then perform the needed operations to it:
let data = `
<TABLE>
<TR>
<TD>
<span></span>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD ><span ></TD>
</TR>
<TR>
<TD height="12" colSpan="4"><IMG src="../images/spacer.gif" width="20" height="7"></TD>
</TR>
</TABLE>
`
let tempDiv = $("<div style='display: none;'></div>")
$("body").append(tempDiv)
$(tempDiv).append(data)
$(tempDiv).find('img').remove();
$(tempDiv).find('table tr:nth-child(2)').remove();
console.log($(tempDiv).html())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a table which is hidden by default and can only be seen after clicking "expand" button. The problem is when I click the button, the whole tr where this button is located messes up. Here's what I mean
$(document).ready(function() {
$('.partTableContent').hide();
$('.expandButton').click(function() {
// .parent() selects the A tag, .next() selects the P tag
$(this).closest('tr').next(' tr').find('div.partTableContent').slideToggle(750);
});
});
<style>.partsTable {
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="partTableDiv">
<table class="partsTable" style="width: 100%; height: 30vh">
<tr>
<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>
</tr>
<tr>
<td colspan="4">
<div class="partTableContent">
<table style="width: 100%">
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
</table>
</div>
</body>
See? When I click expand button, the whole tr's (where this button is located) height shrinks. Especially noticeable when click "Full page". How can I avoid it and make it the height static?
plz give a height for the first tr say height: 50px;
<table class="partsTable" style="width: 100%;">
<tr style="height: 30vh">
<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>
</tr>
Im trying to give child elements a class per group. So each groups children will have the same class for each group, and each element should have a different class.
This is what i got so far:
var $span = $("tr.keep td");
$span.attr('id', function (index) {
return 'td' + index;
});
The problem is that I have multiple groups of the same parent - this script runs trough all of them instead repeating the class for each group. How do I ad something like .each on this script, or is it a better way?
HTML:
<tr class="keep">
<tr class="test">
<td rowspan="2"><img src="/" alt=""></td>
<td colspan="3">text</td>
</tr>
<tr class="test">
<td>MF216N/A</td>
<td>Apple</td>
<td class="outofstock">0</td>
<td>1 054,24SEK</td>
<td><input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')"></td>
</tr>
</tr>
<tr class="keep">
<tr class="test">
<td rowspan="2"><img src="/" alt=""></td>
<td colspan="3">text</td>
</tr>
<tr class="test">
<td>MF216N/A</td>
<td>Apple</td>
<td class="outofstock">0</td>
<td>1 054,24SEK</td>
<td><input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')"></td>
</tr>
</tr>
Use tr.test selector to select all the tr elements having class as .test. Iterate this selected elements using .each and find td elements which are children of selected-tr elements. Loop through td elements and and add class using .addClass considering the index.
Note: tr elements can not have tr as its children. That will be invalid-markup
var $span = $("tr.test");
$span.each(function(i, elem) {
$(elem).find('td').each(function(index) {
$(this).addClass(function() {
return 'td_' + (index + 1);
});
});
});
.td_1 {
background: yellow;
}
.td_2 {
background: green;
}
.td_3 {
background: pink;
}
.td_4 {
background: orange;
}
.td_5 {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr class="keep">
<td rowspan="2">
<a href="/">
<img src="/" alt="">
</a>
</td>
<td colspan="3">text
</td>
</tr>
<tr class="test">
<td>MF216N/A</td>
<td>Apple</td>
<td class="outofstock">0</td>
<td>1 054,24SEK</td>
<td>
<input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')">
</td>
</tr>
<tr class="keep">
<td rowspan="2">
<a href="/">
<img src="/" alt="">
</a>
</td>
<td colspan="3">text
</td>
</tr>
<tr class="test">
<td>MF216N/A</td>
<td>Apple</td>
<td class="outofstock">0</td>
<td>1 054,24SEK</td>
<td>
<input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')">
</td>
</tr>
</table>
Fiddle Demo
user can use parent element index for add unique id for each child
$("tr.keep").each(function (parentIndex) {
$(this).find('td').each(function (childIndex) {
$(this).attr('id', parentIndex + '' + childIndex)
})
});
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
From within a row in a child of a row in datatables, how do I find access the parent row in datatables. Basically, I would like to highlight the parent row when its child row after expansion is clicked.
I gave all parentRows a class name, and when a button in the child row is clicked, I did this:
var tr = $(this).prev('.parentRow');
tr.addClass('rowIsDirty');
<tr class="vcenter parentRow">
<td class="hidden">#element.ElementName</td>
<td class="details-control meter"></td>
<td>#element.ElementTemplateName</td>
<td>#element.ElementName</td>
<td>#element.MeterTemplateName</td>
<td>#element.MeterName</td>
</tr>
<td class="details-control">#element.CaseDataPairs</td>
<td class="text-left"><b>#item.ProductName</b></td>
<td class="text-left">#item.ProductGroupName</td>
<td class="text-center">#item.VersionsCount</td>
<td class="text-center">
<i class="fa fa-pencil-square-o"></i>
</td>
<td class="text-center">
<input checked="#item.IsActive" data-toggle="toggle" class="toggleCheckBox ActivateProductButton" data-style="ios" data-on="Active" data-off="InActive" type="checkbox" id="EditAccountIsActive" data-product-id="#item.ProductId">
</td>
$(document).on('change', '.ActivateProductButton, function() {
UpdateStatus($(this));
});
function UpdateStatus(thisObj) {
var tr = thisObj.closest('.parentRow');
tr.removeClass('highlightExpanded');
tr.addClass('rowIsDirty');
}
It's not giving me the parentRow to highlight. Any ideas?
I tried to create a simplified version of a table and added an event to when a button is clicked...
Hopefully you will be able to modify this code to suit your needs.
The code selects the closest node with class .parentRow and, since the nested row is added as a sibling row, we select the previous row (.prev()) to mark as dirty (or highlight or whatever)
Let me know if you have any questions about the code.
function UpdateStatus(thisObj) {
var tr = thisObj.closest('.parentRow').prev();
$(tr).removeClass('highlightExpanded');
$(tr).addClass('rowIsDirty');
}
$(document).ready(function() {
$('.UnitStatusButton').on('click', function() {
UpdateStatus($(this));
});
});
.highlightExpanded {
background-color: lightblue;
}
.rowIsDirty {
background-color: royalblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr role="row" class="even shown">
<td class=" details-control">iconhere</td>
<td class="sorting_1">Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>$372,000</td>
</tr>
<tr class="parentRow highlightExpanded">
<td colspan="5">
<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
<tbody>
<tr>
<td>Full name:</td>
<td>Brielle Williamson</td>
</tr>
<tr>
<td>Extension number:</td>
<td>4804</td>
</tr>
<tr>
<td>Extra info:</td>
<td>And any further details here (images etc)...</td>
</tr>
<tr>
<td>Edit</td>
<td>
<button class="UnitStatusButton">Click Me</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr role="row" class="even shown">
<td class=" details-control">iconhere2</td>
<td class="sorting_1">Jane Williamson</td>
<td>No Specialist</td>
<td>New York</td>
<td>$2,000</td>
</tr>
</table>