<table id="tab">
<tr><td>dsf</td><td>dsf</td></tr>
<tr><td>dsf</td><td>dsf</td></tr>
<tr><td>dsf</td><td>
<table id="tab2">
<tr><td>dsf</td><td>dsf</td></tr>
<tr><td>dsf</td><td>dsf</td></tr>
</table>
</td></tr>
</table>
#tab td {
border: solid 1px red;
}
#tab2 {
background-color: green
}
$("#tab").find("tr").css("background-color", "red");
This function find all TR in #tab. i would like find only first TR, not nested TR.
Is possible without add class for TR? i would like make this only with jQuery.
find finds all descendant elements.
It sounds like you want .children('tr').
You can also do $('#tab > tr')
$("#tab>tr").css("background-color", "red");
that would do what I think you are trying to do XD
Otherwise you could try
$("#tab").find("tr:first-child").css("background-color", "red");
question was unclear :P
Related
<td colspan="4" valign="top">
<label for="state_1" id="state_1">
Text:
</label>
another text
</td>
Can i add css to "another text" without a html tag o id/class on td class?
Short answer: not easily.
Longer answer: yes, but if you don't want the style to also apply to the <label>, you'll need to also negate those style changes.
While it would definitely be easier to just wrap the text in a <span> and target it with td span as the CSS selector, you could apply CSS to td, and then "undo" those changes to td label:
td {
color: red;
}
td label {
color: black;
}
You have to first target the td you want. Since you don't want to add an id or class to it, you'll have to use general selectors, i.e td or table tr td. In order to only affect the text and not the label, you'll have to "undo" the styles you add to the td text:
td {
color: red;
}
td label {
color: black;
}
If you have other tags inside the td in addition to the label, you'll have to exclude those as well.
Well, yes you can target "td" in your css, but it will affect as well since css works in cascade, so you'll have to write extra css to overwrite it. Like so :
td{
color: red;
}
td label{
color: black;
}
I have a series of tabs (divs) that are being automatically numbered on page load and a series of tables also being automatically numbered. What is a short jquery script to show/hide the tables based on the div clicked. Ex. "tab1" shows/hides "table1", "tab2" shows/hides "table2", etc.
I was hoping for a way to have this work for an infinite amount of these pairs, rather than writing
$('.tab1').click(function(){
$('.table1').toggle();
});
$('.tab2').click(function(){
$('.table2').toggle();
});
for each one
EDIT:
Link to example: https://jsfiddle.net/captainmorganms/o1ndn2b2/3/
for(var c=1;c<=your_no;c++){
$('.tab'+c).click(function(){
$('.table'+$(this).attr("class").replace("tab","")).toggle();
});
}
Just use a simple for loop for it to work!
You can do it like this:
$('.tab1,.tab2,.tab3').on('click',function(){
$('.table'+$(this).attr('class').substr($(this).attr('class').indexOf("tab") + 3)).toggle();
});
For unknow number of tables, in your case, select tabs like this:
$('.section div')
Full example here https://jsfiddle.net/_jakob/o1ndn2b2/4/
I set tables hidden by default but you can remove it in CSS if you want them to be shown at start.
Given the markup provided in the example Fiddle, you can achieve this for any number of tables with a single event listener and a few extra attributes, like so:
document.querySelector(".section").addEventListener("click",function(event){
var target=event.target,table;
if(table=target.dataset.table)
if(table=document.getElementById(table))
table.classList.toggle("hide");
},0);
.section>div{
display:inline-block;
cursor:pointer;
margin:0 5px;
border:1px solid;
padding:3px;
}
table{
border:1px solid;
border-collapse:collapse;
margin-top:15px;
}
table.hide{
display:none;
}
td{
border:1px solid;
padding:5px;
min-width:50px;
height:30px;
}
<div class="section">
<div data-table="table1">Tab1</div>
<div data-table="table2">Tab2</div>
<div data-table="table3">Tab3</div>
</div>
<table class="hide" id="table1">
<tr><td>Table 1</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="hide" id="table2">
<tr><td>Table 2</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="hide" id="table3">
<tr><td>Table 3</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
html file
<div id='tweetPost'>
<table id="example">
<thead>
<tr>
<th>No</th>
<th>FistName</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
JavaScript
$("#tweetPost").append(<tr>);
$("#tweetPost").append("<td>"+tweets.statuses[i].text + "<td/>");
$("#tweetPost").append("<td>"+tweets.statuses[i].created_at +"</td>");
$("#tweetPost").append(</tr>);
Above code when i try to run it , the table wont come out.
Question : How can i append the td row inside tbody??
You should try targeting your table id example and the tbody like so:
$("#example tbody").append("<tr><td>text</td><td>created</td></tr>");
See this link for a working example: append to example table
$('#tweetPost').append('<table></table>');
var table = $('#tweetPost').children();
table.append("<tr><td>a</td><td>b</td></tr>");
table.append("<tr><td>c</td><td>d</td></tr>");
table {
background: #CCC;
border: 1px solid #000;
}
table td {
padding: 15px;
border: 1px solid #DDD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tweetPost'></div>
Note:- You can tackle your table id & the tbody
You are appending the tr in div instead of tbody and the is also some syntax error. Try like following.
$("#example tbody").append("<tr><td>" + tweets.statuses[i].text + "<td/><td>" + tweets.statuses[i].created_at + "</td><tr>");
You've missed inverted comma " " in first and last lines. Try this:
$("#tweetPost").append("<tr>");
$("#tweetPost").append("<td>"+tweets.statuses[i].text + "<td/>");
$("#tweetPost").append("<td>"+tweets.statuses[i].created_at +"</td>");
$("#tweetPost").append("</tr>");
I have a table where a row gets added every time I press a "Add" button. I have an "Edit" button which is placed in the first cell of the newly created row.
I want to highlight the row that is being edited. I know that I can get the current <tr> element like
var par = $(this).parent().parent();
But when I use,
par.css('border-color', 'red');
It does not change the color.
What mistake am I making and how should I highlight that particular row?
This is really about the styling of the <tr>. CSS doesn't like to style <tr>'s because they really only exist for semantics. In order to add a border to one, you need to make it display: block;.
Here is a jsFiddle and example code.
HTML
<table>
<tbody>
<tr><td>Some Content</td></tr>
<tr><td>Some Content</td></tr>
<tr>
<td>
Edit
</td>
</tr>
<tr><td>Some Content</td></tr>
<tr><td>Some Content</td></tr>
</tbody>
</table>
Javascript
$(".edit").click(function(e) {
$(this).closest('tr').toggleClass('editting');
e.preventDefault();
});
CSS
table tr {
display: block;
border: 1px solid rgba(0, 0, 0, 0);
}
.editting {
background: #FAA;
border: 1px solid red;
}
Please note how I used an rgba color to make the border opaque. There are other ways to do this, but if you leave the border off it causes the table to "jitter."
Assuming this refers to an element within the tr, then it will be better to use .closest() here
var par = $(this).closest('tr')
I have a table with 3 columns. I would like to convert to single row.
both append.('</tr><tr>') and after.('</tr><tr>') do not work.
Want it like this for mobile friendly page -
Thank you for your help!
http://jsfiddle.net/tZt3Q/
One way you can achieve this is by using JQuery wrap method. See Wrap and UnWrap
Demo
Demo W/O class
$(document).ready(function () {
var tbl = $("table");
$('td','table').unwrap().each(
function () {
tbl.append($(this).wrap('<tr>').parent());
});
});
Much simpler one:
$(document).ready(function () {
$('table').find('td').unwrap().wrap($('<tr/>'));
});
Fiddle
Try this:
Single Row:
var $tds = $("table td").clone();
$("table").empty().append($("<tr>").append($tds));
http://jsfiddle.net/hescano/tZt3Q/10/
Single Column:
var $tds = $("table td").clone();
$("table").empty();
$tds.each(function(){
$("table").append($("<tr>").append($(this)));
});
http://jsfiddle.net/hescano/tZt3Q/11/
Just as a suggestion .. you could use divs as cells instead of a table and it will happen without any JS using float css:
like this :
http://jsfiddle.net/tZt3Q/9/
HTML:
<div class="tableDivColumns">
<div>One</div><div>Tow</div><div>Three</div><div>Four</div><div>Five</div><div>six</div>
<div>Seven</div><div>Eight</div><div>Nine</div>
</div>
<div class="tableDivRows">
<div>One</div><div>Tow</div><div>Three</div><div>Four</div><div>Five</div><div>six</div>
<div>Seven</div><div>Eight</div><div>Nine</div>
</div>
CSS:
.tableDivColumns {border:1px solid green; padding 5px; width:160px;height:160px;}
.tableDivColumns div {border:1px solid blue; width:50px; height:50px;float:left;}
.tableDivRows {border:1px solid green; padding 5px; width:60px;height:470px;}
.tableDivRows div {border:1px solid blue; width:50px; height:50px;float:left;}