How can I add text to a cell using d3?
I have a function with the code that needs to be added and I'm calling this in the body of the html page. I have the following code as an example but it doesn't seem to be working.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href ="styles.css">
<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
function t1(){
d3.select("td#target").text("14");
}
</script>
</head>
<body onload="t1()">
<table>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr>
<td>Tom</td>
<td>Smith</td>
<td is="target"> </td>
</tr>
</table>
</body>
</html>
Any ideas on how to make this work.
It is a small mistake..
change <td is="target">into <td id="target">
I found the solution. I figured out I had just a typo
<td is="target"> </td>
Should be
<td id="target"> </td>
Related
I need to display something like the following picture in the empty cells of an html table (I'm using Bootstrap 4.3.1)
Source code:
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
Expected result:
Thank you in advance.
Use a gradient background combined with :empty
td:empty {
background:repeating-linear-gradient(-45deg, transparent 0 3px,#000 0 6px);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
An SVG if you want better rendering.
td:empty {
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 2 3"><line x1="0" y1="5" x2="4" y2="-1" stroke="black"></line><line x1="2" y1="5" x2="6" y2="-1" stroke="black"></line></svg>') 0 0/8px 12px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
you can use :empty
td:empty{
background:red;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Lois</td>
</tr>
</table>
</body>
</html>
Why is the following html code not working for usig colspan in the table?
<html>
<head>
<title>table</title>
</head>
<body>
<table height="200" width="200" border="1">
<tr>
<td colspan="9">EXAM SCHEDULE</td>
</tr>
<tr>
<td colspan="3">D</td>
<td colspan="4">T</td>
<td colspan="2">V</td>
</tr>
</table>
</body>
</html>
This is what i get from the code :
What is the expected output? The code has no syntax errors.
Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up.
So, EXAM SCHEDULE as specified with colspan=9 will use 9 columns. There will be total 9 columns as per the code.
There is no major error in your html except some unwanted html, body tags are there which I have removed, but you could be able to see the difference only after adding more columns into it like the below html code:
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<title>table</title>
</head>
<body>
<table height="200" width="200" border="1">
<tr>
<td colspan="9">EXAM SCHEDULE</td>
</tr>
<tr>
<td colspan="3">D</td>
<td colspan="4">T</td>
<td colspan="2">V</td>
</tr>
<tr>
<td>t1</td>
<td>u1</td>
<td>g1</td>
<td>t2</td>
<td>u2</td>
<td>g2</td>
<td>u2</td>
<td>t4</td>
<td>u4</td>
</tr>
</table>
<script>
$(function(){
$(document).on("click",".seat",function(){
alert($(this).parent().find('.green').length);
});
});
</script>
</body>
</html>
I've been trying to get the actual rows to be hyperlinked (clickable) but it seems they don't want to be active links, I've searched around on Google and websites say to use the "a href" which I've done but for some reason it isn't working for me, this is a bootstrap layout, if anyone could help me please that would be fantastic, thank you very much
Edit: I've tried adding the "class='clickable-row' data-href='url://link-for-first-row/'" to the tr element but it still doesn't appear to be working, I did try to update the jsfiddle link but when I try to save it to post the link here the jsfiddle data wipes from my screen.
https://jsfiddle.net/r6wctrwk/
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<a href="#">
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</a>
<a href="#">
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
</a>
<a href="#">
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</a>
</tbody>
</table>
</div>
As per my comment, here is how the link provided by akash will work.
Sample Code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
</head>
<body>
<table>
<tbody>
<tr class='clickable-row' data-href='http://google.com'>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
<script>
jQuery(document).ready(function($) {
$(".clickable-row").click(function() {
alert("click");
window.document.location = $(this).data("href");
});
});
</script>
</body>
</html>
You can include style something like this
<style>
.clickable-row:hover{
text-decoration: underline;
cursor: pointer;
}
</style>
Code :
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr>
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
Is there any technique I can use to highlight the items that have changed ( in this case , 2nd row's 1st column) using CSS ? or do I have to resort to other things like JavaScript ?
Use classes like:
<html>
<head>
<style type="text/css">
.highlight{
background: fuchsia;
}
</style>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr class="highlight">
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
And if something changes you can add the class to the specific element:
$(element).addClass('highlight');
or with plain JavaScript:
element.class = 'highlight';
If you're asking how to highlight the second column of the second row specifically this will work:
table > tr:nth-child(2) > td:nth-child(2) {
background-color:#FFEEEE;
}
If you're asking how to highlight changed rows ANYWHERE, use a class.
Add this to the of your document or the stylesheet.
<style> .highlight { background-color:#FFEEEE; }
Add this to your TD's
class="highlight"
this code works:
<html>
<head>
</head>
<body background ="images.png">
<table>
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>
I can see the repeated image. but following doesn't.I see no image.
<html>
<head >
</head>
<body>
<table background ="images.png">
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>
Because background is not a valid attribute for a table tag. Try using CSS.