I have done a calendar, a bit of the calendar is below. But now Im wondering if there is a way for the calendar to automatically update. Or do I need to write the code below for every month and every year or is there a method in eg PHP that helps you with that? I do not want to use bootstrap or a plugin.
<table>
<lable>Januari 2018 </lable>
<thead>
<tr>
<th scope="col">Su</th>
<th scope="col">Mo</th>
<th scope="col">Tu</th>
<th scope="col">We</th>
<th scope="col">Th</th>
<th scope="col">Fr</th>
<th scope="col">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td><td>1<td>2</td><td>3</td><td>4</td><td>5</td><td>6</td> /*and so on for the reset of the month*/
Of course you can build a dynamic calendar component.
Don't start a static approach like you have posted in your question.You have to learn the calendar/date api of your favourite language you want to use. It should be feasible in almost any language.
But it will be some effort and you have to get really into it. Maybe you rethink about using an already existing and tested component.
Related
I have the following table in html using AngularJS:
<table id="searchTable">
<thead>
<tr>
<th>Index</th>
<th>Observation</th>
<th>Reported By</th>
<th>Verified By</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="observation in observations| filter:searchText">
<th> {{$index + 1}} </th>
<th>{{observation.clinicalType}}</th>
<th>{{observation.reportedBy}}</th>
<th>{{observation.verifiedBy}}</th>
<th>{{observation.reportedDate}}</th>
</tr>
</tbody>
</table>
In the columns "Observations", "Reported By", "Verified By", and "Date", it is possible to have the string "NULL". I was wondering if there is a quick and easy way in CSS to color each instance of "NULL" in red in all of the four columns? I've been stuck there for quite some time.
Personally I'd suggest doing this in Jquery. You could look for all <th> elements that contain "NULL" and change them to red by doing the following...
$(document).ready(function() {
$("th:contains('NULL')").css("color", "red");
});
JSFiddle: https://jsfiddle.net/97oqnuyx/
EDIT: Because you've graciously accepted my answer, however it actually doesn't seem to solve the issue in your specific case, I feel I should make sure that I'm not spreading misinformation in the event people find this.
While my answer above will work in many cases, this is probably not the way to go if you're using Angular. In that event, you're looking for a solution more like this one, which OP linked to in a comment above.
Sorry but I really have no experience in web-developing. I am trying to make a web site for my boys soccer team and have been working with the godaddy website builder system. The issue I have is I build a table using a web based table building site, tablesgenerator.com, and built the table with my player roster. Now what I am trying to do is make each players name a hyperlink to there own page so I can customize it for each. Please help because I have tried so many things. I will add some of the code from the table to show you what I am working with.
<th class="tg-n19i">NUMBER</th>
<th class="tg-3wsf">NAME</th>
<th class="tg-3wsf">POSITION</th>
<th class="tg-3wsf">GRADE</th>
</tr>
<tr>
<td class="tg-43qd">5</td>
<td class="tg-43qd">Osvaldo Araujo</td>
<td class="tg-43qd">Mid/Def</td>
<td class="tg-43qd">12</td>
As you can see the name is the second line and I just need to find a way to link it. Any help would be much appreciated. Thank you.
Assuming you already have a page for each of the players you could make their name a link like this:
<th class="tg-n19i">NUMBER</th>
<th class="tg-3wsf">NAME</th>
<th class="tg-3wsf">POSITION</th>
<th class="tg-3wsf">GRADE</th>
</tr>
<tr>
<td class="tg-43qd">5</td>
<td class="tg-43qd">Osvaldo Araujo</td>
<td class="tg-43qd">Mid/Def</td>
<td class="tg-43qd">12</td>
You would just need to change the "page url" bit for each team member's respective page.
I like bootstrap and I am trying to add a bootstrap sortable & searchable table(s) to my django site. like on http://wenzhixin.net.cn/
the example code looks fairly strait forward. except that i cannot figure out the very first part data-url="data1.json"
<table data-url="data1.json" data-height="299" data-sort-name="name" data-sort-order="desc">
<thead>
<tr>
<th data-field="id" data-align="right" data-sortable="true">Item ID</th>
<th data-field="name" data-align="center" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
I am able to create Json data bassed on this Stackoverflow Creating a JSON response using Django and Python but I cannot figure out how to format it as a url that django/table can access.
I am working on a web application where I get some string data using Java Servlets and then subsequently display that data on a JSP view using JSTL. Below is the code snippet:
<table border="1" width=100%>
<th style="width: 10%">S. NUMBER</th>
<th style="width:35%"> First Name </th>
<th style="width: 35%"> Second Name </th>
<th style="width: 10%">Student ID</th>
<th style="width: 10%">Student Class</th>
<c:forEach items="${sortedResults}" var="result">
<tr>
<td>${result.counter}</td>
<td>${result.sequenceIntEx}</td>
<td>${result.lName}</td>
<td>${result.sID}</td>
<td>${result.sClass}</td>
</tr>
</c:forEach>
For example, the lName field, i want to display the 3rd and 4th characters in a bigger font size with different color. Any thoughts?
Perhaps assign systematic element names ex. id="td1" id="td2" etc. and then use jsp to generate a css file that matches the automatic element names and filling in any parameters needed depending on your criteria.
So, i got this working using substring functions in JSTL. First, the following needs to be imported:
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
Then, i used the substrings to do the needed formatting.
<td>${fn:substring(result.sequenceIntEx, 0, 3)}<font size="5" color="red">${fn:substring(result.sequenceIntEx, 3, 5)}</font>${fn:substring(result.sequenceIntEx, 5, 13)}</td>
Thanks
I was just wondering if that by default a HTML <table> element implicitly applies the attribute scope="col" to the first group of <th> elements contained within the <thead> element?
When I render the first set of HTML below in a browser it seems to automatically detect that the <th> cells for Jan, Feb, March, April etc are headers for a column. So is it the case the scope="col" does not need adding to the markup as it will be automatically rendered this way?
<table>
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<th></th>
<th>Jan</th>
<th>Feb</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>June</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Firefox</th>
<td>37.1</td>
<td>36.6</td>
<td>36.3</td>
<td>35.8</td>
<td>35.2</td>
<td>34.4</td>
</tr>
</tr>
</tbody>
</table>
This second set of markup includes scope="col" added to the tags for Jan, feb, March April etc. Is it necessary? As the example above seems to render these <th> as columns anyway without scope"col".
I am aware that the scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers. So should it be added for the purpose of better semantic markup and accessibility?
<table>
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Jan</th>
<th scope="col">Feb</th>
<th scope="col">March</th>
<th scope="col">April</th>
<th scope="col">May</th>
<th scope="col">June</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Firefox</th>
<td>37.1</td>
<td>36.6</td>
<td>36.3</td>
<td>35.8</td>
<td>35.2</td>
<td>34.4</td>
</tr>
</tr>
</tbody>
</table>
According to the HTML5 spec, the scope attribute defaults to auto:
The scope attribute's missing value default is the auto state.
This value is characterized by
The auto state makes the header cell apply to a set of cells selected based on context.
So I assume, that screenreaders will be able to detect the context properly, which in turn means, that you do not have to explicitly define the attribute, unless you have some special instances or usecases for rowgroup and colgroup values.
You can just specify the meaning of the table more with the scope attrribute. In normal tables, i wouldn't even use it, but if your table has a meaning on your page, and people want to take it over, it would be handy to use it, especially on a reader. However, if you just add tables to do minor stuff in it, leave it out. Personally this is something you should only look into if the table becomes really expanded.
The definition is as followed:
Definition and Usage
The scope attribute specifies whether a header cell is a header for a
column, row, or group of columns or rows.
this comes from the W3 website, btw.