I have my Calendar constructed with html table, where few of the dates can only be selectable. So i need to disable all the other data.
Function that highlights the td :
/* Get all rows from your 'table' but not the first one
* that includes headers. */
var rows = $('td').not(':first');
/* Create 'click' event handler for rows */
rows.on('click', function (e) {
/* Get current row */
var row = $(this);
/* Check if 'Ctrl', 'cmd' or 'Shift' keyboard key was pressed
* 'Ctrl' => is represented by 'e.ctrlKey' or 'e.metaKey'
* 'Shift' => is represented by 'e.shiftKey' */
if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
/* If pressed highlight the other row that was clicked */
row.addClass('highlight');
} else {
/* Otherwise just highlight one row and clean others */
rows.removeClass('highlight');
row.addClass('highlight');
}
});
Now suppose my table looks like below :
<table>
<th class='weekday'>Mon</th><th class='weekday'>Tue</th><th class='weekday'>Wed</th>
<tr class='selectable'> 1</tr>
<tr class='selectable'> 2</tr>
<tr class='unselectable'> 3</tr>
</table>
So now how to disable the tr, with unselectable calss using js/css?
First you have to validate your HTML code by adding <td> tags inside the <tr> instead of adding the text directly to the row and adding the <th> tags inside the <tr> :
<table>
<tr>
<th class='weekday'>Mon</th>
<th class='weekday'>Tue</th>
<th class='weekday'>Wed</th>
</tr>
<tr class='selectable'>
<td>1</td>
</tr>
<tr class='selectable'>
<td>2</td>
</tr>
<tr class='unselectable'>
<td>3</td>
</tr>
</table>
I'm not sure what you mean by disable tr since the disable attribute work just for <input> tag.
You could add class called unselectable for example and add the css you want to use for "disabled tr", check example bellow :
.unselectable{
background-color: #ddd;
cursor: not-allowed;
}
Hope this helps.
.unselectable{
background-color: #ddd;
cursor: not-allowed;
}
<table border='1'>
<tr>
<th class='weekday'>Mon</th>
<th class='weekday'>Tue</th>
<th class='weekday'>Wed</th>
</tr>
<tr class='selectable'>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class='selectable'>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class='unselectable'>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
$('.unselectable').prop("disabled",true)
This will disable the <tr> elements with class unselectable.
Just change your selection on your event
var rows = $('td .selectable');
var rows = $('tr .selectable').not(':first');
use the above line to get rows with class name 'selectable'. Also add <td> tags inside your <tr> </tr> row tags to add contents.
you can use it and write your condition instead of below condition text =>
<td [style.cursor]="condition ? 'not-allowed':'pointer' ">
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 have a page with multiple dynamic tables , one of the table looks like the below structure
Col1 Col2 Col3
1 One Two
2 b 15/12/2017
3 a X
2 W 10/12/2014
HTML
<table id="table1">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr> <td>1</td>
<td>b</td>
<td>15/12/2017</td>
</tr>
<tr> <td>2</td>
<td>b</td>
<td>15/10/2017</td>
</tr>
<tr> <td>3</td>
<td>b</td>
<td>15/09/2017</td>
</tr>
</tbody>
</table>
I would like to know How can I get the cell in col3 with header name based on the value at col1?
EX:
I want to find the table by ID and check its first cell for each row, if it equal 2 then get the cell value of col 3 in the same row !
Any help would be fully appreciated
You can try something with jquery like below snippet.
Update: you can get particular column by table header as well using $('th:contains("col3")').index()
$(document).ready(function() {
$('#myTable').find('tbody td:first-child').each(function() {
if ($(this).text() == '2') {
console.log($(this).closest('tr').find('td').eq($('th:contains("col3")').index()).text());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>one</td>
<td>ONE</td>
</tr>
<tr>
<td>2</td>
<td>two</td>
<td>TWO</td>
</tr>
<tr>
<td>3</td>
<td>three</td>
<td>THREE</td>
</tr>
</tbody>
</table>
With jQuery it's quite easy; if you've found the cell, get the row, and the third cell in that row;
$('td') // Select all cells
.filter(function() { // Filter the cells
return $(this).text() == '2';
})
.closest('tr') // get the table row
.find('td') // select all cells in that row
.eq(2) // select the third cell (0-based index)
.text(); // this will output '15/12/2017'
edit I'm in a good mood today, check this little demo; https://jsfiddle.net/a32knb81/. Just input your search key in the input field an you'll get the value of the third column in that same row.
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 table structure like this. Fairly simple one.
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
At runtime I am binding a new row to this table for a particular rowclick. This new row contains a new table.
Now on clicking the row again, I want to be able to remove the newly added row(the new table).
I am using bootstrap table.
Here is what I have tried so far.
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
//if ($element.has('#newlyAddedTable').length) { ....// did not work
if ($('#myTable').has('#newlyAddedTable').length) { // this removes the table on any row click. Not what I intend to do
{
$("#newlyAddedTable").remove();
} else {
// some operation...
}
}
I want to be able to remove the newly added table on the row it was created.
Just more explanation based on the Answers below:
<tr> ----------> if i click this
<td>
<table id="newlyAddedTable"> ---------> this is added
</table>
</td>
</tr>
<tr> ----------> if i again click this or maybe any other row in the table
<td>
<table id="newlyAddedTable"> ---------> this is removed
</table>
</td>
</tr>
Update: from OP's comment below it sounds like the best way to implement the new table is to use a class selector and not an id selector. The code below has been updated accordingly. ***Where previously there was an id for newTable there is a class ---> #newTable ===> .newTable:
Just change:
$('#myTable').has('#newlyAddedTable').length
To:
$('.newlyAddedTable', $element).length //element === clicked row -- see demo
vvvvv DEMO vvvvv
$('#myTable').bootstrapTable().on('click-row.bs.table', function(e, row, $element) {
if( $('.newTable', $element).length ) {
$('.newTable', $element).remove();
} else {
$('td:first', $element)
.append( '<table class="newTable"><tr><td>NEW TABLE</td></tr></table>' );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css" rel="stylesheet"/>
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Try replacing your remove code with this:
$(document).on("click", "#newlyAddedTable", function(){
$(this).remove();
});
The code above registers a click listener on the document. The second parameter filters those events for those with the target #newlyAddedTable. This way you don't have to register a new click handler every time you insert a row (as in #VimalanJayaGanesh's solution).
P.S. If you are adding HTML that looks like this:
<tr>
<td>
<table id="newlyAddedTable">
</table>
</td>
</tr>
Then you are probably actually wanting to remove the parent tr (not the table with the id). There are two ways to fix this.
You can change the selector that filters click events and so have the tr handle the click rather than the table element in my example code:
$(document).on("click", "tr:has(#newlyAddedTable)", function(){
You can leave the selector as is but grab the parent tr from the table and remove that changing the remove line above to:
$(this).parents("tr").first().remove()
or
$(this).parent().parent().remove()
As I don't have your complete code / fiddler, here is a possible solution.
Are you looking for something like this?
$('#add').on('click', function()
{
var newRow = '<tr CLASS="newrow"><td colspan="3"><table><tr><td>Test</td><td>User</td><td>test#example.com</td></table></td></tr>'
$('#myTableBody').append(newRow);
Remove()
});
function Remove()
{
$('.newrow').off('click').on('click', function()
{
$(this).remove();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTableBody">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<button type='button' id='add'>Add</button>
Note:
The following line indicates that,
$('.newrow').off('click').on('click', function()
the click event will be binded to the new row only once.
The reason for adding 'off('click') is, when you are dynamically adding rows (with common class 'newrow') to the table, the events will be binded several times. To avoid that, remove the previously binded click event and add a new one.
I'm wondering if the following can be done.
I have a list of 'expenses' that I'm displaying in a table. 4 columns - amount, date, where, and what.
I was thinking I'd like to make each clickable via jQuery which would expand that particular expense, inline, to show a more detailed description.
What I'm trying to do is, on click, replace the contents of the 'tr' with a single 'td' that would contain the extended info. Problem is that 'td' only expands to about a quarter of the table. Is there any way of making it extend to the whole row, while maintaining the widths of the other 'td's in the other rows?
Here's what I would do. Working Demo.
<table id="expenses">
<thead>
<tr>
<td>Amount</td>
<td>Date</td>
<td>Where</td>
<td>What</td>
</tr>
</thead>
<tbody>
<tr class='expense' id='expense-1'>
<td>$5.99</td>
<td>4/2/2009</td>
<td>Taco Bell</td>
<td>Chalupa</td>
</tr>
<tr class='details' id='details-1'>
<td colspan='4'>
It was yummy and delicious
</td>
</tr>
<tr class='expense' id='expense-2'>
<td>$4.99</td>
<td>4/3/2009</td>
<td>Burger King</td>
<td>Whopper</td>
</tr>
<tr class='details' id='details-2'>
<td colspan='4'>
The king of burgers, indeed!
</td>
</tr>
<tr class='expense' id='expense-3'>
<td>$25.99</td>
<td>4/6/2009</td>
<td>Olive Garden</td>
<td>Chicken Alfredo</td>
</tr>
<tr class='details' id='details-3'>
<td colspan='4'>
I love me some italian food!
</td>
</tr>
</tbody>
</table>
With styles like these:
#expenses tr.expense {
cursor: pointer;
}
#expenses tr.details {
display: none;
}
And then have Javascript that looks like this:
$(function() {
$('tr.expense', '#expenses').click(function() {
var id = $(this).attr('id').split('-').pop();
var details = $('#details-'+id);
if(details.is(':visible')) {
details.hide();
} else {
details.show();
}
});
});
That should do it.
<td colspan="4"> ?