I'm echoing a table from mySql. The TD border is not showing up no matter how I input the code. The thead border is showing up just fine.
This is what I have.
// Loop to show results
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td style=text-align:center>".$row['ETF'].
"</td>";
echo "<td style=text-align:center>".$row['ETF NAME'].
"</td>";
echo "<td style=text-align:center>".$row['1 YR Direction %'].
"</td>";
echo "<td style=text-align:center>".$row['Holding Name'].
"</td>";
echo "<td style=text-align:center>".$row['Industry'].
"</td>";
echo "<td style=text-align:center>".$row['Percent Holdings'].
"</td>";
"</tr>";
}
echo "</table>";
<style type="text/css">thead,
th {
font-weight: bold;
background-color: #992c29;
color: #f7f4f4;
border: 2px solid black;
tr,
td {
border: 2px solid black;
}
</style>
You have not closed your th selector, so the styles directly below it are considering invalid syntax, and will never execute.
Closing your th selector by adding in the missing curly brace (}) will resolve your issue:
th {
font-weight: bold;
background-color: #992c29;
color: #f7f4f4;
border: 2px solid black;
}
tr,
td {
border: 2px solid black;
}
In addition to this, ensure that no other selectors are overriding your styles with higher specificity.
Hope this helps! :)
Close off missing
thead,
th {
font-weight: bold;
background-color: #992c29;
color: #f7f4f4;
border: 2px solid black;
}
tr,
td {
border: 2px solid black;
}
Related
I have successfully created dynamic table using JavaScript. Now I want to add a column which will be blank and editable to the user after header 6 column in the table with default header name.
I have to no clue how to do.
var passedArray = [
["header_1", "header_2", "header_3", "header_4", "header_5", "header_6"],
["dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg"],
["fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg"],
["sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs"],
["dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd"]
];
var html = "<table id = both_table>";
passedArray[0].forEach(function(key) {
let newVal = key.replace(/_/g, ' ').toUpperCase();
html += "<th>" + newVal + "</th>";
});
passedArray = passedArray.slice(1, );
passedArray.forEach(function(row) {
html += "<tr>";
Object.keys(row).forEach(function(key) {
html += "<td>" + row[key] + "</td>";
});
html += "</tr>";
});
html += "</table>";
normalizedDataTable.innerHTML = html;
#both_table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 3rem;
text-align-last: center;
}
#both_table td,
#both_tableth {
border: 1px solid #ddd;
padding: 8px;
}
#both_table tr:hover {
background-color: #ddd;
}
#both_table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4caf50;
color: white;
}
<div class="normalized_data_table" id="normalizedDataTable"></div>
Thank you in advance
You should wrap your table in a <form> and then add an <input type="text"/> in each row:
var passedArray = [
["header_1", "header_2", "header_3", "header_4", "header_5", "header_6"],
["dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg"],
["fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg"],
["sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs"],
["dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd"]
];
// wrap the table in a form
var html = "<form action='test.html'>"
html += "<table id = both_table>";
passedArray[0].forEach(function(key) {
let newVal = key.replace(/_/g, ' ').toUpperCase();
html += "<th>" + newVal + "</th>";
});
// add an header for your last column
html += "<th>Edit</th>"
passedArray = passedArray.slice(1, );
passedArray.forEach(function(row) {
html += "<tr>";
Object.keys(row).forEach(function(key) {
html += "<td>" + row[key] + "</td>";
});
// create an input field in each row
html += "<td><input type='text'/></td>"
html += "</tr>";
});
html += "</table>";
// create the submit button
html += "<button type='submit'>Submit form</button>";
// close the form
html += "</form>";
normalizedDataTable.innerHTML = html;
#both_table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 3rem;
text-align-last: center;
}
#both_table td,
#both_tableth {
border: 1px solid #ddd;
padding: 8px;
}
#both_table tr:hover {
background-color: #ddd;
}
#both_table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4caf50;
color: white;
}
<div class="normalized_data_table" id="normalizedDataTable"></div>
See also on JSFiddle.
document.querySelector( "style" ).innerHTML +=
"html {" +
" background-color: #0dd;" +
"}";
html {
background-color: #fff;
font-family: Arial;
}
body {
display: flex;
justify-content: center;
}
td {
background-color: #fafafa;
}
th:first-child, td:first-child {
border-left-style: none;
}
th:last-child, td:last-child {
border-right-style: none;
}
th:first-child {
border-top-left-radius: 1rem;
}
th:last-child {
border-top-right-radius: 1rem;
}
tr:last-child td {
border-bottom-style: none;
background-color: #efefef;
}
tr:last-child td:first-child {
border-bottom-left-radius: 1rem;
}
tr:last-child td:last-child {
border-bottom-right-radius: 1rem;
}
<html>
<head>
<style>
::selection {
background-color: #0df; color: #0df;
}
table, th, td {
padding: 1rem;
border-style: solid;
border-color: #eee;
border-collapse: collapse;
}
table {
margin-top: 1rem;
border-style: none;
}
th {
border-top-style: none;
border-color: #111;
background-color: #222;
color: #fff;
border-bottom-color: #fff;
}
</style>
</head>
<body>
<table>
<tr> <th>One</th><th>Two</th><th>Three</th> </tr>
<tr> <td>four</td> <td>five</td><td>six</td> </tr>
<tr> <td>seven</td> <td>eight</td><td>nine</td> </tr>
</table>
</body>
</html>
document.querySelector( "style" ).innerHTML +=
"html {" +
" background-color: #0dd;" +
"}";
I have large contents of HTML/CSS files that I want to "inject" into parts of a webpage like what I'm doing with the style tag in this example.
I would prefer to keep these files unchanged like this:
document.querySelector( "style" ).innerHTML += "
html {
background-color: #0dd;
}
";
Without having to wrap every JavaScript line in quotation marks and adding a + operator at the end of each line.
Do I have to convert all of my code into this format? Or is there a way within JavaScript to add this HTML/CSS code into an element as is; without having to change the format of the original code on a line by line basis?
And The specific CSS and HTML code here is irrelevant. I'm using it just as an example.
You can use Template literals
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
Using normal strings, you would have to use the following syntax in order to get multi-line strings:
console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"
Using template literals, you can do the same like this:
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
In you case:
document.querySelector( "style" ).innerHTML +=
`html {
background-color: #0dd;
}`;
I am tryin to build some HTML dynamically.The HTML as a div , within which there is a table and within one of the columns of the table , there is another table.
At present ,I am using .append method of jquery,which does not seem to be working. I am getting "unable to get property of childnodes of undefined".The application only makes use of IE. Could I be pointed in the right direction. What am I doing wrong here?
$("<div style='background-color: #757575 border: 1px solid gray; ").append("MainDiv");
$("<table style='width: 100%; height: 100%'>").append("MainDiv");
$("<tr>" + "<td>" +
"<table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr></table></div>").append("MainDiv");
You could use append() like :
var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});
var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr>");
container_div.append(table);
$("#MainDiv").append(container_div);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>
Hope this helps.
NOTE : I suggest to create a class for the shared style between all tds so the code will be more readable :
var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});
var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td style='width:70px;' class='col' nowrap>ID</td>" +
"<td style='width:100px' class='col'>Name</td>" +
"<td style='width: 90px;text-align:left;' class='col'>Status</td>" +
"</tr>" +
"</table></td></tr>");
container_div.append(table);
$("#MainDiv").append(container_div);
.col{
background-color: #999999;
font-weight: bold;
color: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>
You are close but not quite there.
$('MainDiv').append('some html here')
The .append method works in such a way that you have a selector:
$('MainDiv')
This selects some DOM element that you have available to work with, you then call the .append method on it:
$('Some Selector').append('Some HTML');
this inserts the html denoted by append() as the last child element of the selector $('Some Selector'), more on this can be found here.
You might also want to consider putting all the HTML you want to add into an array of strings that you can then loop through and append each of them to some element. This isn't the best way to achieve your goal but is a good way to understand jQuery and some of it's DOM manipulation methods.
I am using this code to show events. Every event is clickable, but I really need a background-color hover-effect for this. Maybe it's also possible without JavaScript?
<table class="tableLine">
<tr>
<th>Wann?</th>
<th>Was?</th>
<th>Wer?</th>
<th>Wo?</th>
</tr>
<?php
$all_events = array();
$ten_events = array();
for($i = 0; $events = mysql_fetch_object($events_resource); $i++){
if($i < 9){
$ten_events[] = $events;
}
$all_events[] = $events;
}
$i = 0;
foreach($ten_events as $event){
$row = $i % 2;
echo "<tr onclick=\"window.location.href = '?page=single_event&id=$event->id'\" style=\"cursor: pointer;\">
<td class='row_{$row}'>{$event->de_date}</td></a>
<td class='row_{$row}'>{$event->category}</td>
<td class='row_{$row}'>{$event->who}</td>
<td class='row_{$row}'>{$event->location}</td>
</tr>";
$i++;
}
?>
CSS
Here is my CSS-code for the rows.
.tableLine {
font-family: Verdana,Arial,sans-serif;
font-weight: normal;
font-size: 10px;
width: 614px;
border: 0;
padding: 0;
border-spacing: 0;
text-align: left;
}
.tableLine th {
background-color: #990000;
color: #f3f2ea;
font-weight: bold;
}
.row_0 {
background-color: #424140;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}
.row_1 {
background-color: #555352;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}
.tableLine tr:hover {
background: #990000;
}
Use CSS:
tr:hover { background: #CCC; }
Try this:
Remove the class='row_{$row}' from td and put it to tr tag
Then replace this part of your css:
/**/
.row_0 {
background-color: #424140;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}
.row_1 {
background-color: #555352;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}
with this:
.row_0 {
background-color: #424140;
}
.row_1 {
background-color: #555352;
}
.row_0:hover, .row_1:hover {
background-color: #EEE; /* highlight row */
}
.tableLine tr td {
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}
Try using CSS
table tr:hover{background:#eee;}
If you also want to highlight each column as well you can give each column td a unique class and use something as below. (jQuery)
$("td").hover(
// Mouse Over Function
function () {
$('.'+$(this).attr('class')).each(function() {
$(this).css("background","#FAFAFA");
});
$(this).parent().children("td").each(function() {$(this).css("background","#FAFAFA")});
$(this).css("background","#FAEEFA");
},
// Mouse Out Function
function () {
$('.'+$(this).attr('class')).each(function() {
$('.'+$(this).attr('class')).css("background","#FFFFFF");
});
$(this).parent().children("td").each(function() {$(this).css("background","#FFFFFF")});
});
So I have a prayer times script that I want to embed into a wordpress page.
Here is the link to it: http://praytimes.org/manual/
There is basically a PrayTimes.js file that I have attempted to include into the header.php/page.php file without success.
the code that I would post in a regular HTML page would look like this:
<!DOCTYPE html>
<html>
<head>
<title> Daily Prayer Timetable </title>
<style>
body, td, th {font-family: verdana; font-size: 12px; color: #404040;}
#timetable {border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray; width: 9em;}
#timetable td, #timetable th {border-width: 1px; border-spacing: 1px; padding: 2px 4px; border-style: inset; border-color: #CCCCCC;}
#timetable th {color:black; text-align: center; font-weight: bold; background-color: #F8F7F4;}
</style>
</head>
<body>
<script type="text/javascript" src="../PrayTimes.js"></script>
<br>
<p align="center">Waterloo, ON, Canada<p>
<div align="center" id="table"></div>
<script type="text/javascript">
var date = new Date(); // today
var times = prayTimes.getTimes(date, [43, -80], -5);
var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha', 'Midnight'];
var html = '<table id="timetable">';
html += '<tr><th colspan="2">'+ date.toLocaleDateString()+ '</th></tr>';
for(var i in list) {
html += '<tr><td>'+ list[i]+ '</td>';
html += '<td>'+ times[list[i].toLowerCase()]+ '</td></tr>';
}
html += '</table>';
document.getElementById('table').innerHTML = html;
</script>
</body>
</html>
I'm just not sure how to embed this into a Wordpress page. I only need to use it once.
You should put scripts between head tags.
<!DOCTYPE html>
<html>
<head>
<title> Daily Prayer Timetable </title>
<style>
body, td, th {font-family: verdana; font-size: 12px; color: #404040;}
#timetable {border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray; width: 9em;}
#timetable td, #timetable th {border-width: 1px; border-spacing: 1px; padding: 2px 4px; border-style: inset; border-color: #CCCCCC;}
#timetable th {color:black; text-align: center; font-weight: bold; background-color: #F8F7F4;}
</style>
<script type="text/javascript" src="../PrayTimes.js"></script>
</head>
<body>
<br>
<p align="center">Waterloo, ON, Canada<p>
<div align="center" id="table"></div>
<script type="text/javascript">
var date = new Date(); // today
var times = prayTimes.getTimes(date, [43, -80], -5);
var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha', 'Midnight'];
var html = '<table id="timetable">';
html += '<tr><th colspan="2">'+ date.toLocaleDateString()+ '</th></tr>';
for(var i in list) {
html += '<tr><td>'+ list[i]+ '</td>';
html += '<td>'+ times[list[i].toLowerCase()]+ '</td></tr>';
}
html += '</table>';
document.getElementById('table').innerHTML = html;
</script>
</body>
</html>
You can modify your theme header template.
But a proper way for doing this is to put your inline script in a separate js file and use wp_enqueue_script to add the two js files in your pages.