I found a script to change the color of every seccond row to make it look nice, but when i add another table on the same page it colours the first table but the seccond table gets no colour why is this??
code of table.js
jQuery(document).ready(function() {
//for tables style
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
});
php webpage code:
<?php
//first table
echo'
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Seller</th>
<th>price(per 1k doge)</th>
<th>payment allowed</th>
<th>View Trade</th>
</tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>';
echo'</table> <br />';
//seccond table
echo '<h3>trades on going </h3>';
echo ' <table class="gridtable">
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Trade User</th>
<th>Cost($)</th>
</tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>';
echo'</table> ';
?>
A better way to do this is via CSS.
tr:nth-child(odd) { background-color: black, color: white }
tr:nth-child(even) { background color: white, color: black }
This will apply to all tables on your page, without having to mess about with the HTML as output by your PHP or Javascript.
You are referencing the first table by its id alternatecolor when you call document.getElementById(id). Perhaps add an id to your second table, then call altRows again for it?
Editing the second table in the PHP File:
echo ' <table class="gridtable" id="secondTable">
Editing the JavaScript:
window.onload=function(){
altRows('alternatecolor');
altRows('secondTable');
}
Related
On the homepage of my Flask application, I have an HTML table whose last column values can be text which can be schematized as follows:
I am now trying to use Javascript to convert all the "Edit Issue" values in the HTML table by an href link that would allow me once I click on this link to access another HTML page. For doing this, I loop every row in the HTML table and put HTML link inside cell. Unfortunately, when I run the code below, I get a source map error:
Please find below my JS code:
function convert_cellTable(){
let table=document.getElementsByTagName("table").value;
let row, rows = table.rows;
let cell, cells;
// For each row in the table
for (var i=0, iLen=rows.length; i<iLen; i++) {
row = rows[i];
cells = row.cells;
// Identify in each cell if the text content equal to "Edit Issue"
for (var j=0, jLen=cells.length; j<jLen; j++) {
cell = cells[j];
let TextToConvert = "Edit Issue"
if (cells[j].textContent == TextToConvert) {
// cell text is replaced by an HTML link
cell[j].innerHTML = "<a href='updateform.html'>Edit Issue</a>";
}
}
}
}
Could you please provide me guidelines to correct the code above. Thanks
If the number of columns is known or is fixed, you could select all of the last column td elements, then loop through those to update the innerHTML accordingly.
const lastColumnCells = document.querySelectorAll('table td:nth-child(5)'); // Assuming column 5 of table
lastColumnCells.forEach(cell => {
if (cell.innerText === 'Edit Issue') {
cell.innerHTML = 'Edit Issue';
}
})
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 4px;
}
<table>
<thead>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Edit</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Edit Issue</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Edit Issue</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Edit Issue</td>
</tr>
</tbody>
</table>
I have a table of items. How do I make a cell turn color, lets say to red if the item is equal to 0
The ID of the table is myTable. I don't know how I should do this in javascript. I have added an id:
<td id="quantity"><?php echo e(($row['Quantity'])); ?></td>
function ChangeColor(){
.... //what goes here
}
You'd want to do this in PHP at run time, not in JavaScript like you hint at:
For example,
<?php
$backgroundColor = $row['Quantity'] == 0 ? 'red' : 'none';
echo '<td id="quantity" style="background-color: ' . $backgroundColor .'">' . e(($row['Quantity'])) . '</td>';
?>
Use class instead of id
<td class="quantity"><?php echo e(($row['Quantity'])); ?></td>
then select the <td> that has the "quantity" class, and evaluate their content
document.querySelectorAll('td.quantity').forEach(e => {
if( Number(e.textContent) < 0)
e.classList.add('negativeQtty')
})
then declare a css class negativeQtty
.negativeQtty {
background-color: red;
}
You can use Bootstrap background class
<td id="quantity"class="p-3 mb-2 bg-primary text-white"><?php echo e(($row['Quantity'])); ?></td>
This is a code javascript if you want use a javascript.
Need a call with cell of th then give a cell.innerHTML.
This example
var th = document.querySelectorAll('th')
for (let cell of th) {
if(cell.innerHTML === '6'){
cell.style.backgroundColor = 'green'
}
if(cell.innerHTML === '0'){
cell.style.backgroundColor = 'red'
}
}
table {
margin-bottom: 1em;
border-collapse: collapse;
}
td,
th {
padding: .25em .5em;
border: 1px solid #333;
font: .75em "Verdana";
}
<table id="Table">
<tbody>
<tr>
<th>Data</th>
<th>Number</th>
<th>Total</th>
</tr>
<tr>
<th>Product</th>
<th>0</th>
<th>6</th>
</tr>
<tr>
<th>Product2</th>
<th>5</th>
<th>0</th>
</tr>
</tbody>
</table>
I have a situation where I need to add a new column in the table and in the header of the new column should have a checkbox.
so I am creating a <th> dynamically and trying to append a <input> element (checkbox) in that <th> then appending that <th> to the first row of the table.
but in output, I can see the table with an added column header without a checkbox.
my code looks like
var $th = '<th class="width-110">' + devCentre + '</th>';
var $cbkSelectAll = $('<input />', { type: 'checkbox' });
$cbkSelectAll.appendTo($th);
$('#tblTable1 thead tr:first-child').append($th);
let me know where I am going wrong and give me some suggestions so I can add a checkbox inside the table header.
If I understood what you are trying to do,
You want to append a new column to a pre-existing table, so that the column has its own <th> and consecutive <td> elements..
If that is the case, here is one way to do that:
$('#btn-new-column').click(function() {
$('#my-table tr').each(function(i, tr) {
// create the header cell
let th = $('<th>Select</th>');
// create the check box
let chk = $('<input>').attr("type", "checkbox");
// create the normal row cell and append the checkbox inside it
let td = $('<td></td>').append(chk);
// check if we are currently at the top of the table
if (i == 0) {
// we are. So lets append the header cell
$(tr).append(th);
} else {
// append the normal row cell
$(tr).append(td);
}
});
// hide the button to prevent multiple columns addition
$(this).hide();
});
table {
border-collapse: collapse;
}
table td,
table th {
border: 1px solid grey;
padding: 5px;
}
button {
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table id="my-table">
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr>
<td>1</td>
<td>mike</td>
</tr>
<tr>
<td>2</td>
<td>ahmad</td>
</tr>
<tr>
<td>3</td>
<td>sara</td>
</tr>
</table>
<br>
<button id="btn-new-column">Add a new column</button>
The issue is that $th is a string - it is not a jquery object and does not (yet) appear in the DOM so .appendTo($th) "appends" to a jquery object generated by the string in $th not the jquery object (and you do nothing with the result).
You can fix by add $() around your th string:
var $th = $('<th class="width-110">All</th>');
var $cbkSelectAll = $('<input />', { type: 'checkbox' });
$cbkSelectAll.appendTo($th);
$('table thead tr:first-child').append($th);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
</table>
Alternatively:
$th = $($th).append($cbkSelectAll);
which will create a new jquery object from the string and append the tickbox
I have a table made in PHP with the echo command because it's to make a calendar.
I want each row in the calendar to become a link (to select each week).
I know I can use JavaScript but it wont work when it's in an echo command for some reason.
Is there another way to do this?
BTW: I don't want the text to become links just all the cells in the row to become links.
PLEASE let me know if this is possible or what the alternatives are.
here is my code I have so far.
<style style="text/css">
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
/* Define the default color for all the table rows */
.hoverTable tr{
background: #b8d1f3;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
background-color: #ffff99;
}
h3 {
color: #FFF;
}
</style>
.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8" align="center" bgcolor="#666666"><h3>January</h3></td>
</tr>
<tr>
<td width="30" align="center" bgcolor="#0099FF">W</td>
<td width="30" align="center" bgcolor="#0099FF">S</td>
<td width="30" align="center" bgcolor="#0099FF">M</td>
<td width="30" align="center" bgcolor="#0099FF">T</td>
<td width="30" align="center" bgcolor="#0099FF">W</td>
<td width="30" align="center" bgcolor="#0099FF">T</td>
<td width="30" align="center" bgcolor="#0099FF">F</td>
<td width="30" align="center" bgcolor="#0099FF">S</td>
</tr>
<?php
$timestamp = mktime(0,0,0,1,1,$year);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];
$week = date("W", $timestamp);
echo "<table class='hoverTable'>";
for ($i=0; $i<($maxday+$startday); $i++) {
$date = mktime(0, 0, 0, 1, $i - $startday + 1, $year);
//want to make this row below a link
if(($i % 7) == 0 ) echo "<tr><td width='30'>" . date('W', $date) . "</a></td>";
if($i < $startday) echo "<td></td>";
else echo "<td align='center' valign='middle' height='20px' width='30px'>". ($i - $startday + 1) . "</td>";
if(($i % 7) == 6 ) echo "</tr>";
}
echo "</table>";
?>
So I don't think it's possible to make the cell a link but not the text, but you can make it look like that is happening. How?
Add an tag as the main element of the td in which all other content is contained
Make the take up the entire height and width of the td
Add text-decoration: none to the so the text within won't seem like links
Code:
<td>
Checkout Joshua Kissoon.
</td>
JSFiddle: http://jsfiddle.net/KrRzP/5/
I would take the approach of styling the a tag to fill the entire td.
a {
display: block;
height: 100%;
width: 100%;
}
td {
padding: 0;
}
Example: http://jsfiddle.net/a2w5w/
You can use jquery
$(document).ready(function(){
$(".calander tr").click(function() {
$(".calander tr").removeClass("redColor");
$(this).addClass("redColor");
});
});
JSFiddle : http://jsfiddle.net/M94HE/
Update:
If I understood your question following is your answer
http://jsfiddle.net/Z3sjL/
You can just wrap your cell in an anchor if you make the anchor a block level element. Or you can use event attributes, jquery, or javascript
html event attributes
<table>
<tr>
<td onclick="window.location = 'index.html';">Click me!</td>
</tr>
</table>
a little more..
<table>
<tr>
<td style="cursor:pointer"
onMouseover="window.status='http://www.stackoverflow.com/'"
onMouseout="window.status=''"
onMouseup="window.location='http://www.stackoverflow.com/'">
Click me!
</td>
</tr>
</table>
jquery
$("tr").click(function(){
});
javascript
$('tr').bind('click', function(){
window.location = 'http://stackoverflow.com';
});
I have two div's, one above the other and both have a table inside them with the same amount of columns. I want the columns to be the same width size in both and aligned. If a columns in on div expands, i want the column parallel in the other div to expand to the same with.
NB: The Columns have no width.
Link to the HTML code below:
HTML:
<div id="A">
<table>
<tbody>
<tr>
<th></th>
<th>Blah! Blah</th>
<th>adsdsdadasdasdasdasd</th>
</tr>
</tbody>
</table>
</div>
<br/>
<div id="B">
<table>
<tr>
<th>left head</th>
<td class="col1"></td>
<td class="col2">Hello World!</td>
</tr>
<tr>
<th>left head</th>
<td class="col1">Hello World!</td>
<td class="col2">dsfsdfgdsgdsgdsfgdsgdsgfdfgdf</td>
</tr>
</table>
</div>
JQuery:
$(document).ready(function() {
$('#updatetopdiv').click(function(){
//Properly align parallel div's top to bottom
var tbl1 = $("#A table tr td");
var tbl2 = $("#B table tr td");
tbl1.each(function(i) {
if (tbl2.eq(i).width() < $(this).width()) {
tbl2.eq(i).width($(this).width());
} else {
$(this).width(tbl2.eq(i).width());
}
});
});
});
$(document).ready(function(){
var tbl1 = $("#A table tr td");
var tbl2 = $("#B table tr td");
tbl1.each(function(i){
if (tbl2.eq(i).width() < $(this).width()){
tbl2.eq(i).width($(this).width());
} else {
$(this).width(tbl2.eq(i).width());
}
});
});
This works, though it doesn't run until load.
Also placed here: http://jsfiddle.net/gwUFb/3/
EDIT:
I know you said you already got it working, but here's my original code, edited for your use case:
$(document).ready(function(){
var tbl1 = $("#A table tr th");
var tbl2 = $("#B table tr td,#B table tr th");
tbl1.each(function(i){
if (tbl2.eq(i).width() < $(this).width()){
tbl2.eq(i).width($(this).width());
} else {
$(this).width(tbl2.eq(i).width());
}
});
});
html will be:
<div id="A">
<table class="fixed-table">
<tr>
<td class="column-a">Hello World!</td>
<td class="column-b"></td>
</tr>
</table>
</div>
<br/>
<div id="B">
<table class="fixed-table">
<tr>
<td class="column-a"></td>
<td class="column-b">Hello World!</td>
</tr>
</table>
</div>
css will be
.fixed-table {
table-layout: fixed;
}
.column-a {
width: 50%;
}
.column-b {
width: 50%;
}
this is a fixed solution, not dynaimic, if any div scroll appears, alignment break. for this you have to use javascript.