I have a table within which I want a user to be able to click on any table row, and when they do, it will change the background color of that table row to show that it is highlighted, that's the one that has been selected. I also want them to be able to be able to then select a different table row within that same table, which then should remove the background color from the previous row, and change the newly selected table row to the highlight background color.
So I have
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
I would imagine I would have a CSS class like isSelected or something similar, which would be added to the clicked row, and removed from the previous row that has that class. I'm just not sure how to do it. Anyone able to help?
You idea is correct. You can implement it like following.
$('.clientRow').click(function(){
$('.clientRow.isSelected').removeClass('isSelected');
$(this).addClass('isSelected');
});
.isSelected {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="clientRow">
<td>
Referral Type Description
</td>
<td>
Referral Date
</td>
</tr>
<tr class="clientRow">
<td>
Referral Type Description
</td>
<td>
Referral Date
</td>
</tr>
</table>
On row click, remove selected class from all rows, then add this class to the clicked row:
$(document).on('click', 'tr', function() {
var that = $(this);
that.closest('table').find('tr').removeClass('selected');
that.addClass('selected');
});
table td {
padding:5px 50px;
border:1px solid #d8d8d8;
}
table tr.selected td { background-color: #f1f1f1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tbody>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</tbody>
</table>
Here is a solution using jQuery.
$(function() {
$('.table1 tr').click(function() {
$this = $(this);
$('.table1 tr').removeClass("selected");
$this.addClass("selected");
});
});
table {
border-collapse: collapse
}
td {
cursor: pointer;
padding: 5px 15px;
border: 1px solid grey;
}
tr.selected td {
background-color: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table1">
<tr>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>4</td>
<td>Title 4</td>
</tr>
</table>
You might need to do something like this:
$(function() {
// function that adds/removes a css class
var changeBg = function() {
// remove active class from all elements
$('tr, td').removeClass('active');
// add active class to element clicked only
$(this).addClass('active');
};
// bind clicking event to function
$('tr, td').on('click', changeBg);
});
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
</table>
Related
I am new to javascript and trying to write a javascript code so when a button is clicked its colour will change. I tried different ways but when clicked on the first element works. Not really sure what is going on here. I would appreciate any help.
var count = 1;
function setColor(button, color) {
var property = document.getElementsByClassName("button");
if (count == 0) {
property.style.backgroundColor = "#A94E3B"
count = 1;
}
else {
property.style.backgroundColor = "#EAE8E8"
count = 0;
}
}
this way, with event delegation and classList toggle
const myTable = document.getElementById('my-table')
myTable.onclick = e =>
{
if (!e.target.matches('#my-table button')) return
e.target.classList.toggle('orange')
}
#my-table button {
background-color : yellow;
}
#my-table button.orange {
background-color : orange;
}
table {
border-collapse : collapse;
}
table th,
table td {
padding : .2em .8em;
border : 1px solid darkblue;
text-align : center;
}
table thead {
background-color : #c3e3ee;
}
table td:first-of-type {
width : 8em;
}
<p> Click a button to change its color and click again to reset! </p>
<table id="my-table">
<thead>
<tr> <th colspan="2" >My items:</th> </tr>
</thead>
<tbody>
<tr> <td contenteditable="true">Item 1</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 2</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 3</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 4</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 5</td> <td> <button>STATUS</button></td> </tr>
</tbody>
</table>
To get the reference to the current button, use the this keyword as a parameter value in the function call added inside your onclick attribute. Then use that reference to change the color.
Example:
var count = 1;
function setColor(e, color) {
e.style.backgroundColor = color;
}
<html>
<head>
<script>
</script>
</head>
<body>
<p> Click a button to change its color and click again to reset! </p>
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">My items:</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">Item 1</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 2</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 3</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr class="hide">
<td contenteditable="true">Item 4</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 5</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
</tbody>
</table>
</body>
</html>
I want to know how I can disable my last anchor column. If the values in the first row are NOT 1 or 7
I can do this with input tags, but I can't figure out how to emulate this with anchor tags in my last row.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
}
#t01 {
width: 100%;
background-color: #fff;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
<th>column7</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Doctor/">Doctor</a>
</td>
</tr>
<tr>
<td>7</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Park/">Park</a>
</td>
</tr>
<tr>
<td>1</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Office/">Office</a>
</td>
</tr>
<tr>
<td>1</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Home/">Home</a>
</td>
</tr>
<tr>
<td>6</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
</td>
</tr>
</tbody>
</table>
<script>
// creating an Array of the values that should cause the <input>
// to be disabled:
const disableValues = [1, 7];
// here we find all the <input> elements in the td:last-child element
// within the <tbody>:
$('tbody td:last-child input')
// and use the prop() method to update the value of the
// 'disabled' property:
.prop('disabled', function() {
// here we navigate from the current <input> to the closest
// ancestor <tr> element and from there find the td:first-child
// element and retrieve its text:
let firstColValue = $(this).closest('tr').find('td:first-child').text();
// here we return whether Boolean true (if the numeric value of the
// text in the first <td> is included in the array of values) or
// false (if that value is not in the array of values):
return !disableValues.includes(+firstColValue);
});
</script>
</body>
</html>
I'm not exactly sure what you mean by "disable" the anchor tags, but if you want to prevent them from navigating the user when clicked on, perhaps you could try this:
$("tr").each(function () {
const $children = $(this).children();
const firstColVal = parseInt($children[0].innerText, 10);
if ([1, 7].includes(firstColVal)) {
$($children[$children.length - 1]).find('a').removeAttr('href').addClass('disabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>test</td>
<td>Google</td>
</tr>
<tr>
<td>2</td>
<td>test</td>
<td>Google</td>
</tr>
<tr>
<td>7</td>
<td>test</td>
<td>Google</td>
</tr>
</table>
You can instead use toggleClass to toggle a class called disabled. Then create an event listener for disabled anchors, and simply do a preventdefault on the event to stop anything from happening when you click on it. After that, play with the CSS class of disabled to get your desired look.
$('tbody td:last-child a')
.toggleClass('disabled', function() {
let firstColValue = $(this).closest('tr').find('td:first-child').text();
return !disableValues.includes(+firstColValue);
});
$(document).on("click","a.disabled",function(e){e.preventDefault();});
.disabled{color:silver;opacity:0.5;pointer-events:none}
document.querySelectorAll('table > tbody > tr').forEach(tr => {
//for each tr
var num = tr.querySelector('td:first-of-type').innerText;
//get first column text (number)
if ((num !== "7") === false || (num !== "1") === false) {
// if not 1 or 7
tr.querySelector('td:last-of-type ').innerHTML = num;
}
// on last td replace inner HTML with a link text
});
or just set .style.pointerEvents = "none"; that will disable a href link, but button stays, not a good UX, but do as you wish.
// creating an Array of the values that should cause the <input>
// to be disabled:
const disableValues = [1, 7];
// here we find all the <input> elements in the td:last-child element
// within the <tbody>:
$('tbody td:last-child input')
// and use the prop() method to update the value of the
// 'disabled' property:
.prop('disabled', function() {
// here we navigate from the current <input> to the closest
// ancestor <tr> element and from there find the td:first-child
// element and retrieve its text:
let firstColValue = $(this).closest('tr').find('td:first-child').text();
// here we return whether Boolean true (if the numeric value of the
// text in the first <td> is included in the array of values) or
// false (if that value is not in the array of values):
return !disableValues.includes(+firstColValue);
});
document.querySelectorAll('table > tbody > tr').forEach(tr => {
var num = tr.querySelector('td:first-of-type').innerText;
if ((num !== "7") === false || (num !== "1") === false) {
tr.querySelector('td:last-of-type ').innerHTML = num;
}
});
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
}
#t01 {
width: 100%;
background-color: #fff;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
<th>column7</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Doctor/">Doctor</a>
</td>
</tr>
<tr>
<td>7</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Park/">Park</a>
</td>
</tr>
<tr>
<td>1</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Office/">Office</a>
</td>
</tr>
<tr>
<td>1</td>
<td>
test-1
</td>
<td>
test-2
</td>
<td>
test-3
</td>
<td>
test-4
</td>
<td>
test-5
</td>
<td>
<a class="btn btn-primary btn-xs" href="/Home/">Home</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can use mousedown to preempt the normal click behavior and call event.preventDefault() from the mousedown handler.
I have a table that needs to have an undefined number of rows that should display a set number of elements when clicked (in this case div, because I read that it's the best way to use toggle on tr). Best I could do is make it for an already set number of elements...
jsfiddle.net - This is with the set number of elements.Working code..
And this is all I got so far trying to figure it out.
Working js code:
$('.warning').on('click', function(e) {
var $ele = $(this).nextUntil('.warning').find('td > div');
$ele.slideToggle();
});
});
In this case, I need each clicked table row to display three corresponding divs.
Obviously, answer with jQuery but I would appreciate a solution in vanilla js as well.
EDIT: I am sorry, I neglected to mention I want to add a sliding animation. And slideToggle doesn't seem to work...
EDIT2: Marked best answer by Terry.
Changed fiddle to working code.
We can actually greatly simplify your markup for your table rows:
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
...and use the following logic:
.nextUntil('.warning') to select the trailing <tr> after each .warning element. See the documentation for .nextUntil().
Use .slideToggle() to show/hide elements, without the need to use overly verbose CSS detection
Here is the logic above, written in jQuery:
$('.warning').on('click', function() {
// Selects all siblings until the next `.warning` <tr>
var $ele = $(this).nextUntil('.warning').find('td > div');
$ele.slideToggle();
});
If you only want to target downstream <tr> that has the class hidden (useful in the scenario where there might be other irrelevant <tr>s in the way that you do not want to toggle), you might want to add an optional filter instead:
$('.warning').on('click', function() {
// Selects all siblings until:
// 1. the next `.warning` <tr>, and
// 2. has the class "hidden"
var $ele = $(this).nextUntil('.warning').filter(function() {
return $(this).hasClass('hidden');
}).find('td > div');
$ele.slideToggle();
});
Of course this means that you get strange stacked borders when hiding elements, because you are technically hiding the table row content, but not collapsing the table rows/cells themselves.
Here is a proof-of-concept example:
$(function() {
$('.warning').on('click', function() {
var $ele = $(this).nextUntil('.warning').filter(function() {
return $(this).hasClass('hidden');
}).find('td > div');
$ele.slideToggle();
});
});
table {
width: 75%;
border-collapse: collapse;
}
tr,
td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden td div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
</tbody>
</table>
Please see below snippet , note that I've set all the hidden class , class='hidden' , it's usless to name each of them differntly :
$(".warning").on("click",function(){
$(this).nextUntil(".warning").find(".hidden").slideToggle();
})
table {
width: 75%;
border-collapse: collapse;
}
tr, td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden, .hidden1, .hidden2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
</tbody>
</table>
$(".warning").on("click", function() { use jQuery .on will add the event to dynamic element (future generated element).
then find the next hidden and toggle will do the trick.
check the example:
$(".warning").on("click", function() {
var nextHidden = $(this).next('.hidden');
nextHidden.find('div').slideToggle();
});
table {
width: 75%;
border-collapse: collapse;
}
tr,
td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
</tbody>
</table>
I have a table that will have several rows. In one column, there is a link (column a). In the second column, there is the string "Yes" or "No" (column b).
If a cell in column b says "No", I want the link on the cell directly to the left of it in column a to become disabled.
I'm using .each() to go through each td in column b to see if the value is "Yes" or "No". It seems as though even if the cell in column b is "Yes", it will still disable (rename) the link on the matching cell. What am I missing?
$(document).ready(function () {
$("td.regFull").each(function () {
console.log($(this).text());
if($(this).text() !== 'No') {
$('td.regLink a').replaceWith('Closed');
}
});
});
td {
border: 1px solid black;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Link</th>
<th>Registration Open</th>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
No
</td>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
Yes
</td>
</tr>
</table>
My proposal is:
in order to disable a link you may remove the href attribute.
To select all links you may reduce all to one line:
$("td.regFull:contains('No')").siblings('td.regLink').children('a').removeAttr('href')
The snippet:
$(function () {
$("td.regFull:contains('No')").siblings('td.regLink').children('a').removeAttr('href').text('Closed');
});
td {
border: 1px solid black;
padding: 5px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table>
<tr>
<th>Link</th>
<th>Registration Open</th>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
No
</td>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
Yes
</td>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
No
</td>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
Yes
</td>
</tr>
</table>
Instead of this line
$('td.regLink a').replaceWith('Closed');
Make it as closest element
$(this).closest('td.regLink a').replaceWith('Closed');
You have to trim the content of .regFull in the condition to remove the spaces.
Go up to the parent tr then select the link inside .regLink :
$(this).parents('tr').find('.regLink a').replaceWith('Closed');
If a cell in column b says "No", I want the link on the cell directly to the left of it in column a to become disabled.
So you have to reverse the operator in your condition from !== to ===.
Hope this helps.
$(document).ready(function () {
$("td.regFull").each(function () {
console.log($(this).text().trim());
if($(this).text().trim() === 'No') {
$(this).parents('tr').find('.regLink a').replaceWith('Closed');
}
});
});
td {
border: 1px solid black;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Link</th>
<th>Registration Open</th>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
No
</td>
</tr>
<tr>
<td class="regLink">
Register
</td>
<td class="regFull">
Yes
</td>
</tr>
</table>
I am using this jsfiddle: http://jsfiddle.net/vaDkF/828/
(without the top and bottom option) to create a reordering table.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
I would like to know if it is possible to have the up button disappear (display none) if it is the first row in the table, and the down button disappear if it is the last row in the table.
Thanks!
You can use CSS for this, with first-child and last-child selectors:
tr:first-child .up, tr:last-child .down {
display:none;
}
$(document).ready(function() {
$(".up,.down").click(function() {
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
tr:first-child .up,
tr:last-child .down {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
Updated Demo