Am trying to add a :before to a td element in my table with content same as the value as the th in the same column, i got to the point where i can change the value of the td but im stuck at adding the :before, here is my code:
function myFunction() {
var rows = document.getElementsByTagName("table")[0].rows;
var last = rows[0];
var first = rows[1];
for (i = 0; i < 2; i++) {
var cell = last.cells[i];
var value = cell.innerHTML;
alert(value);
first.cells[i].innerHTML = value;
}
}
<table>
<thead>
<tr>
<th>aa</th>
<th>bb</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<button onclick="myFunction()">Test</button>
You can't add :before to element with JavaScript. But you can do it with CSS:
td:before {
content: attr(data-content);
}
<td data-content="content for :before">
actual content
</td>
And then just change data-content attribute on td with JavaScript.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 months ago.
Improve this question
I have a table with multiple columns, one column named: ‘Type’. The values in Type column could be: 1 or 2.
I want to replace the value “1” to “Information” and the value “2” to “Problem” in every row with jQuery, how can I do that?
Here in this demo you'll find a function transformTableData() that takes the table existing in the document and will:
find where is located the field having as header the string "Type";
loop through all its rows and change the value of the corresponding field as the result coming out of the map defined on top. So according to the default map I defined, if the field value is '1' it will be transformed to 'Information' and if the value is '2' it will be transformed to 'Problem';
If there's no corresponding value in the map, the value will be untouched;
The function runs when you click the button on the bottom of the page. Of course the same function could be called on document ready.
function transformTableData(){
const map = {
'1' : 'Information',
'2' : 'Problem',
}
const typeHeaderCell = $('table thead tr th:contains(Type)');
const typeHeaderIndex = $(typeHeaderCell).index();
$('table tbody tr').each((i, row)=>{
const rowCell = $(row).find(`td:nth-child(${typeHeaderIndex+1})`);
const value = rowCell.text();
rowCell.text( map?.[value] );
});
}
table, tr, th, td{
border: solid 1px black;
padding: 1rem;
}
button{
margin-top: 1rem;
padding: 1rem;
font-size: 1.25rem;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>...</th>
<th>Type</th>
<th>...</th>
<th>ColumnN</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>INVALID</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button onclick="transformTableData();">Transform Table Data</button>
There are many ways to achieve something like this. Here is one example. It first looks for the index by comparing the text of each cell in the table header. then it gets all cells in the table body with the index in each table row and replaces the content if it is "1" or "2". There are for sure even shorter or faster methods.
// Find index of column with "Type"
let index = -1;
let th = $('#myTable thead tr th');
for (let i=0; i<th.length; i++) {
if ($(th[i]).text() == 'Type') {
index = i;
break;
}
}
// If index is greater then -1 we found the column
if (index > -1) {
// Get all the table cells in each row at the specific index (need to add +1 to the index)
let td = $('#myTable tbody tr td:nth-child(' + (index+1) + ')');
for (let i=0; i<td.length; i++) {
// Compare content and replace it
if ($(td[i]).text() == '1') {
$(td[i]).text('Information');
}
else if ($(td[i]).text() == '2') {
$(td[i]).text('Problem');
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>ID</th>
<th>Type</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>Maria</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>Walter</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>Julia</td>
</tr>
</tbody>
</table>
I use the HTML code.
I have a table and I write in first tr td "A" and "B" in second tr td
I have these two rows
but I want to print "B" in first tr and "A" in second
!! But I don't want to change my th position!!
Is it possible with any script like js or Jquery or with any type js CDN....??
<table id='table1'>
<tr>
<th>name</th>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>
Give this a try:
Your script
$(function(){
$("tbody").each(function(elem,index){
var arr = $.makeArray($("tr",this).detach());
arr.reverse();
$(this).append(arr);
});
});
The second way to do the same will be like this:
var tbody = $('table tbody');
tbody.html($('tr',tbody).get().reverse());
I hope this helps! Thanks!
You can swap the .textContent of the <td> children of the <tr> elements
const {rows:[{cells:[a]}, {cells:[b]}]} = table1;
[a.textContent, b.textContent] = [b.textContent, a.textContent];
<table id='table1'>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>
Since you can use reverse() with an array, you can use get() to convert this to an array first. If you have a dynamic number of rows you can use something like this:
$('tbody').each(function(){
var row = $(this).children('tr');
console.log(row)
$(this).html(row.get().reverse())
})
Use this below code:
$(function(){
$("tbody").each(function(elem,index){
var arr = $.makeArray($("tr",this).detach());
arr.reverse();
$(this).append(arr);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'>
<tbody>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</tbody>
</table>
You can loop through each row, starting at the bottom and add it to the bottom - this will reverse the rows.
This will mean you don't need to load all the rows into an array, but will mean additional DOM manipulation.
var tbl = $("#table1>tbody")
var l = tbl.find("tr").length;
for (var i=l; i>=0; --i)
{
tbl.find("tr").eq(i).appendTo(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'><tbody>
<tr> <td>A</td> </tr>
<tr> <td>B</td> </tr>
<tr> <td>C</td> </tr>
<tr> <td>D</td> </tr>
<tr> <td>E</td> </tr>
</tbody></table>
Problem Solved
<script type="text/javascript">
var trCount = $('#table1 tr').length;
var $rows = [];
for (var i = 0; i < trCount; i++)
$rows.push($('#table1 tr:last-child').remove());
$("#table1 tbody").append($rows);
</script>
Thanks to all
You can do that with pure vanilla JS, you don't need jquery or any other library for that.
function reverseOrder(table) {
const rows = table.querySelector('tbody').children;
const swaptemp = rows[0].children[0].innerHTML;
rows[0].children[0].innerHTML = rows[1].children[0].innerHTML;
rows[1].children[0].innerHTML = swaptemp;
}
const tableToReserveOrder = document.getElementById('table1');
reverseOrder(tableToReserveOrder);
<table id='table1'>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>
This is just a demonstration for your use case, you can play around with value of n which is 0 for this case where n+1 is 1.
I have set markup HTML ON in my pl/sql script. I'm running a select query whose output by default as a table I'm writing to a html file.
I want to highlight a few rows in that table based on the value of a column. For that I'm trying to set a CSS class for those rows.
From CSS, I can only access table's <th> and <td> in general. Kindly suggest how this can be done.
$(function() {
var val = ['X', 'Z'];
for (var i = 0; i < val.length; i++) {
$('table tr td:contains(' + val[i] + ')').each(function() {
$(this).closest('tr').addClass('highlight');
});
}
});
.highlight td {
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>X</td>
</tr>
<tr>
<td>A</td>
<td>V</td>
</tr>
<tr>
<td>X</td>
<td>B</td>
</tr>
<tr>
<td>Z</td>
<td>B</td>
</tr>
</table>
If you have a specific range of values, so as to get tr highlighted, You can use something like this. I don't know how to exactly style the 'tr' to make it highlighted.
I have a HTML-table with several tablerows. Each row contains 2 tabledata elements.
These td elements are filled with numbers.
I need code that helps me compare the numbers of each row and add CSS.
An example:
<tr>
<td>12</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
We are always going to use CSS on the second tabledata element. If the value of the second td is lesser than the value of the first td element, it has to appear in red color.
On the other hand, if the value of the second td element is greater than the value of the first td element it has to appear in green color.
This means that the tables contents should look something like this:
<tr>
<td>12</td>
<td style='color:green;'>15</td>
</tr>
<tr>
<td>3</td>
<td style='color:red;'>1</td>
</tr>
How can this be done?
You can use jQuery to get the inner values of each td element, compare the values and apply a style given the output. This assumes you always have two td elements. Any more and you would have to loop each td in the row and keep a running count.
$("table tr").each(function(){
var firstTd = $(this).children(":first");
var secondTd = $(this).children(":last");
if (secondTd.html() < firstTd.html()) {
secondTd.css("background-color", "red");
} else if (secondTd.html() > firstTd.html()) {
secondTd.css("background-color", "green");
}
});
JSFiddle
You can try with this function: link to fiddle
This solution is without using JQuery of course.
Just in case, I also post the code here:
<body onload="myFunction()">
<table>
<tr>
<td>12</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
</table>
</body>
<script>
function myFunction(){
var tds = document.getElementsByTagName("td");
for (var i=0; i<tds.length; i++){
if (i>=1 && i%2 != 0){
if (parseInt(tds[i].innerText) > parseInt(tds[i-1].innerText)) {
tds[i].style.color = "green";
} else {
tds[i].style.color = "red";
}
}
}
}
</script>
I dynamically add data to table from a Javascript object.
I have a code that ends up something like this:
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
I want table borders in each row even if the tds don't exist. So basically for the example in the code I want a 3x3 table with borders.
Is this possible without actually making empty tds in each row?
You can:
Modify the original JS so that it generates colspan attributes (<td colspan="3"> will be as wide as 3 <td>'s; Of course you will lose the grid symmetry.
If your table cells each have the same fixed width, you could use a background-image on the table.
You could wrap up a little script to complete the table, cf:
var table = document.getElementsByTagName('table')[0];
function normalizeTable() {
var trs = table.getElementsByTagName('tr'),
len = trs.length, max = 0, td;
// first we search for the longest table row in terms of # of children
for (var i = len; i--;) {
if (trs[i].children.length > max)
max = trs[i].children.length;
}
// now we can fill the other rows
for (var j = len; j--;) {
while (trs[j].children.length < max) {
td = document.createElement('td');
trs[j].appendChild(td);
}
}
}
normalizeTable();
EDITED
In my opinion, you have to add only a little CSS and insert all TD (empty):
table {
border-style: solid;
border-width: 1px;
border-collapse: separate;
empty-cells: show;
}
td {
border-style: solid;
border-width: 1px;
}
<table>
<tr>
<td>1</td>
<td></td> <!-- empty -->
<td></td> <!-- empty -->
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td></td> <!-- empty -->
</tr>
</table>