var tr0HTML = $('<tr id="exp_line1"></tr>').appendTo(tbody);
What could the best possible way to use .css or any other jQuery to style this element based on the condition?
All I could see is that the change has been implemented to whole page not for the particular scenario!
Update: I want to style borders to the table which has 3 different types of rows. Rows are being displayed if the data is provided.
If I have understood your question... Something as simple as this should work:
tr.type-1 td{
border: 2px solid hotpink;
}
tr.type-2 td{
border: 2px solid purple;
}
tr.type-3 td{
border: 2px solid black;
}
<table>
<tbody>
<tr class="type-1">
<td>Type 1</td>
</tr>
<tr class="type-2">
<td>Type 2</td>
</tr>
<tr class="type-3">
<td>Type 3</td>
</tr>
</tbody>
</table>
Your jQuery code would look like this: $('<tr id="exp_line1" class='type-1'></tr>').appendTo(tbody)
Related
I have calendar like html tables.like
<td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> <td id="5">5</td>
<td id="6">6</td> <td id="7">7</td> <td id="8">8</td> <td id="9">9</td>
I would like to change its classes like calendar schedule, if I clicked cell2,forward 3day's classes are changed.(I attached images)
①Are there any good way to realize it?
②Are there any other ways to realize schedule like expression(result image is illustrated below),
except for like applying border-bottom options ?
My current attempt is like below.....
.outpatient {
border-bottom: 3px solid yellow;
}
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
image is like below.
Thanks
You can try using .nextAll()
Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
and :lt() selector:
Select all elements at an index less than index within the matched set.
Demo:
$(function() {
$("td").click(function() {
$('td').removeClass('outpatient'); //If you want to reset in each click
$(this).nextAll(':lt(3)').addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
}
.outpatient {
border-bottom: 3px solid yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> <td id="5">5</td>
<td id="6">6</td> <td id="7">7</td> <td id="8">8</td> <td id="9">9</td>
</tr>
</table>
I'm trying to adjust style as the screenshot below
What I expect to be:
But what I got now is:
As you can see the border bottom of last column not apply to as expect.
I already try props which react-table provided but still can't figure out how to achieve it.
Props list which apllied:
styles
getProps
getTheadGroupTrProps
getTrProps
getTbodyProps
getTdProps
All props that I applied, I used the condition to check if it the last record it will apply border-bottom style.
If anyone has any suggestion or any solutions.Help me please.
Thank you so much for your kindness.
Assuming lastRowIndex contains the index of your last row, you can define this function
const styleRow = (state, rowInfo) => {
if (!rowInfo) return
return {
style: {
borderBottom: rowInfo.index === lastRowIndex? ˋ1px solid;ˋ : ˋˋ
}
}
}
and set it as geTrProps in your react-table.
<table class="table" id="table_Container">
<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>
#table_Container tr th:last-child{ border-right: 1px solid red; border-left:1px solid red}
#table_Container tr td:last-child{ border-right: 1px solid red; border-left:1px solid red}
#table_Container tr:last-child td:last-child{border-bottom:1px solid red}
#table_Container tr td{border-top: 2px solid #dee2e6;}
$("td:not(:has(input))").each(function ( index,element){
console.log(index);
console.log(element);
console.log($(this).text())});
td {
border: 1px solid black;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td><input type="text">test3</td>
<td><input type="text">test4</td>
</tr>
</table>
I want to select all td which contain no son node input,that is to say,what i expect is as below:
<td>test1</td>
<td>test2</td>
It's verified by jquery's select expression td:not(:has(input)) ,it works fine.
There is a famous webpage You Don't Need jQuery! and a book Beyond jQuery.
You Don't Need jQuery!
Let's try with pure javascript.
Can we fulfill the work with pure js?
There's no :has selector alternative in native JS, you could do this by looping through all the td's and check manually:
document.querySelectorAll("td").forEach(function(element) {
if (!element.querySelector('input')) {
console.log(element.innerText);
}
});
td {
border: 1px solid black;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td><input type="text">test3</td>
<td><input type="text">test4</td>
</tr>
</table>
Please am a newbie in programming, I really need your help in this. Please how can I hide an HTML table then display it with a button using.JavaScript?
Use document.querySelector to get the elements and the hidden attribute to show and hide the table. Use an event listener and listen for the click event on the button:
var table = document.querySelector("table");
table.hidden = true;
document.querySelector("button").addEventListener("click", function(event) {
table.hidden = false;
});
table {
text-align: center;
border-collapse: collapse;
}
td,
th {
padding: 0 5px;
border: 1px solid black;
}
<table>
<tr>
<th>Day</th>
<th>Rain</th>
</tr>
<tr>
<td>1</td>
<td>50 mm</td>
</tr>
<tr>
<td>2</td>
<td>21 mm</td>
</tr>
<tr>
<td>3</td>
<td>5 mm</td>
</tr>
</table>
<button>Show</button>
You can use a library called jQuery to do this extremely easily.
In your <head>, put <script src="code.jquery.com/jquery-latest.js></script>
Give your <table> an id, like this: <table id="myTable">
Add one button like this: <button onclick="$('#myTable').hide();">Hide</button>
And another like this: <button onclick="$('#myTable').show();">Show</button>
This will allow you to toggle the table's visibility.
I started writing this before #metarmask posted - his/her answer is much better, so you should probably take his/her advice.
I have already viewed this, it's not what I need here..
I need something like
table.mytable tr first-td's { border: 1px solid black; }
for
<table class="mytable">
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
</table>
If this is impossible just let me know and I'll be sad.
Javascript/jQuery is acceptable if it's needed to get the job done.
table.mytable tr td:first-child { border: 1px solid black; }
https://developer.mozilla.org/en-US/docs/CSS/:first-child
Works in jQuery too ( http://api.jquery.com/first-child-selector/ ):
$('table.mytable tr td:first-child')
Yes. It´s possible:
Use in your CSS
.mytable tr td:first-child { border: 1px solid black; }
Try Here
Not 100% cross-browser, but support is good enough. See http://caniuse.com/#search=:first-child
table.mytable tr td:first-child
You can use :first-of-type, but it's not available on older browsers: http://jsfiddle.net/R9qE3/.
You could also pick the right elements through jQuery (for cross-browser support), but you would need to update the state when you add tds or move them around.
table.mytable tr:first-child {
border: 1px solid black;
}
You could use jQuery "nth child" http://api.jquery.com/nth-child-selector/
It would be something like:
$("table.mytable tr::nth-child(1)") //do w/e you need to do here.