I have a table with names that correspond with their urls
I want to use the information in the table to create the urls that the page will go to if I click that row.
I'm using datatables http://www.datatables.net , if someone can point me to code or api for this that'd be great.
FULL CODE: ARTICLE DESCRIBES IT STEP BY STEP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Full Row Select Using jQuery</title>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.Highlight
{
background-color: #dcfac9;
cursor: pointer;
}
</style>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0" id="link-table">
<tr>
<td>http://www.yahoo.com/</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>http://www.microsoft.com/</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>http://imar.spaanjaars.com/</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script type="text/javascript">
$(function ()
{
// Hide the first cell for JavaScript enabled browsers.
$('#link-table td:first-child').hide();
// Apply a class on mouse over and remove it on mouse out.
$('#link-table tr').hover(function ()
{
$(this).toggleClass('Highlight');
});
// Assign a click handler that grabs the URL
// from the first cell and redirects the user.
$('#link-table tr').click(function ()
{
location.href = $(this).find('td a').attr('href');
});
});
</script>
</body>
</html>
Below are exmaples:
http://imar.spaanjaars.com/549/how-do-i-make-a-full-table-row-clickable-using-jquery
http://imar.spaanjaars.com/312/how-do-i-make-a-full-table-row-clickable
Related
I want to get from the following html "only" the number 0 or the number 1 depending on which table row I click (FYI: there will be many rows with different numbers):
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/test.js"></script>
<title>Document</title>
</head>
<body>
<table>
<tbody id="toAppend">
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">0</td>
<td class="p3">Joo: 1</td>
<td class="p3">9/22/2022, 5:02:30</td>
</tr>
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">1</td>
<td class="p3">Joo: 2</td>
<td class="p3">9/22/2022, 5:04:18</td>
</tr>
</tbody>
</table>
</body>
</html>
This is how it looks visually:
This is how the html looks in console view:
This is my javascript function:
function setUnstakeNumber() {
let selection = document.getSelection();
let finalSelection = selection.anchorNode.data
let activeTextarea = document.activeElement;
let parent = document.documentElement.parentElement; // Returns the <html> element
console.log(selection);
console.log(finalSelection);
console.log(parent);
console.log(activeTextarea);
}
But none of the above works.
The closest one is the finalSelection, but I need to really click exactly on top of the number I want rather then anywhere in its row.
How do I get the number by clicking anywhere in its element?
So If I would click anywhere in the first row I would get the number 0 and if I would click anywhere in the second row I would get the number 1 with only Vanilla Javascript (No JQuery)?
Try this!
function setUnstakeNumber() {
let selection = document.getSelection();
// get selected row
let selectedRow = selection.anchorNode.parentNode.parentNode;
let index = selectedRow.childNodes[3].innerText;
console.log(index);
}
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/test.js"></script>
<title>Document</title>
</head>
<body>
<table>
<tbody id="toAppend">
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">0</td>
<td class="p3">Joo: 1</td>
<td class="p3">9/22/2022, 5:02:30</td>
</tr>
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">1</td>
<td class="p3">Joo: 2</td>
<td class="p3">9/22/2022, 5:04:18</td>
</tr>
</tbody>
</table>
</body>
</html>
First get the selected row and then select the which includes the index.
is there something wrong with the code below
Just trying to fix decimal paces for a specific class of td.
need to use only jquery
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<td class="go"> 25.252525
</td>
<script type="text/javascript">
$('.go').each(function() {
return parseFloat($(this).toFixed(2));
}
</script>
</body>
</html>
You need to use .text() to get text from td then use .toFixed() and finally change updated value inside your td i.e : $(this).text(parseFloat($(this).text()).toFixed(2));
Demo Code :
$('.go').each(function() {
$(this).text(parseFloat($(this).text()).toFixed(2)); //change text..
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table>
<tr>
<td class="go"> 25.252525
</td>
</tr>
<tr>
<td class="go"> 25.2223525
</td>
</tr>
</table>
My goal is to attach a hidden value of either 0 or 1 to each entry in a table. If the value is a 0 the entry will be colored Red, and if the value is a 1, the entry will be colored green.
I tried implementing this using filters and creating two different classes 'success' and 'danger' if the class 'success was added to the entry then the entry would be colored green and for 'danger' it would be colored red. I was able to get this to work by using a filter that checks for the string "True" or "False" in the entry. If the String is "True" then it adds the success class if if it is false it adds the danger class. This works however I now want to expand this idea so that every entry will have an assigned boolean.
I am looking for some help on how to do this.
This is my current code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.success { background:green; }
.danger { background:red; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
$(function(){
$('tr:has(td:contains("True"))').addClass('success');
$('tr:has(td:contains("False"))').addClass('danger');
});
</script>
</head>
<body>
<table width="100%">
<tr><td>True</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>True</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
</html>
I would recommend you add an id to your table so you can access it directly.
After that we get the array of tr. Also I can recommend here you validate that this array is of the same size than your results array. Just for good measure.
Then we can just iterate over this array using jQuery's each function.
let status = [false , true , false , true , false , false , true , true ];
$('#mainTable tr').each((i,tr) => {
if(status[i])
$(tr).addClass('success');
else
$(tr).addClass('danger');
})
.success { background:green; }
.danger { background:red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id='mainTable' width="100%">
<tr><td>True</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
Hope this helps :)
Something like this seems to work...
<table width="100%">
<tr><td>True</td></tr>
<tr><td>2</td><td style="display:none">0</td></tr>
<tr><td>3</td><td style="display:none">1</td></tr>
<tr><td>4</td><td style="display:none">0</td></tr>
<tr><td>5</td><td style="display:none">0</td></tr>
<tr><td>6</td><td style="display:none">1</td></tr>
<tr><td>7</td><td style="display:none">0</td></tr>
</table>
You can add an own property (e.g. data-boolean) to your cells.
//get all elements with attribute data-boolean and convert the HTML collection into an array
var aCells = [].slice.call(document.querySelectorAll("[data-boolean]"));
//Loop the elements and add the styleclass
aCells.forEach(function(v,i){
if(v.getAttribute("data-boolean") === "true"){
v.classList.add("success");
}
if(v.getAttribute("data-boolean") === "false"){
v.classList.add("danger");
}
});
.success {
background: green;
}
.danger {
background: red;
}
<table width="100%">
<tr>
<td data-boolean="true">True</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td data-boolean="false">False</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
</table>
So I am using the example code from this link
Select Cells On A Table By Dragging
to build a grid of numbers 1-192 that part works great, but I am curious how would I return the "highlighted" cells to php?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css" media="screen">
table td {
width:50px;
height:50px;
text-align:center;
vertical-align:middle;
background-color:#ccc;
}
table td.highlighted {
background-color:#999;
}
</style>
</head>
<body>
<form action='test.php' method='post'>
<table cellpadding="0" cellspacing="1" id="our_table">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
<table>
<tbody>
<tr>
<input type='submit' name='test' value = 'test' />
</tr>
</tbody>
</table>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var isMouseDown = false;
$("#our_table td")
.mousedown(function () {
isMouseDown = true;
$(this).toggleClass("highlighted");
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).toggleClass("highlighted");
}
})
.bind("selectstart", function () {
return false; // prevent text selection in IE
});
$(document)
.mouseup(function () {
isMouseDown = false;
});
});
</script>
</body>
** added in the button
This might need some slight modification for your specific case, but it should be pretty close to what you need. I've included comments to indicate what's happening.
// bind a click handler to your button
$("input[name='test']").on("click", function() {
var selectedValues = [];
// iterate through each of the highlighted cells
$(".highlighted").each(function(){
// push the content of the current cell into the array
selectedValues.push($(this).text());
});
// invoke ajax to send the data to your server
$.ajax({
url: "http://yourdomain.com/somepage.php",
method: "GET",
data: {
selectedValues: selectedValues
},
success: function(){
alert("It Worked!");
},
error: function(){
alert("It Didn't Work :(");
}
});
});
Basically, I would like vertical lines to go all the way to the top of my table, even if there is not a td in the top top of the table.
I am open to using divs or seomthing like that is if it is not too complex.
EDIT: I guess what I want are column dividers, even if there is not tds in that particular row.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>sample</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<style type="text/css">
.sample td{border-left: 1px solid red}
</style>
</head>
<body>
<table cellspacing='0' class='sample'>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td><td>Test</td><td>Test</td>
</tr>
</table>
</body>
</html>
Rewrite like this, is this what you are trying to achieve?
<body>
<table cellspacing='0' class='sample'>
<tr>
<td>Test</td><td>Test</td><td></td><td></td><td></td>
</tr>
<tr>
<td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td><td>Test</td><td>Test</td><td></td>
</tr>
</table>
</body>