there is a table:
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>dany</td>
<td>lucy</td>
<td>bob</td>
<td>apple</td>
</tr>
</table>
</body>
</html>
now I want select <td>lucy<td> and I want to select it with text
the td with text=lucy
how can I select it with js or jquery ?
If you wanna find a td that contains lucy
Try like this
var td = $("td:contains('lucy')");
If you wanna find a td that have exact text of lucy
Try like this
var td= $("td").filter(function() {
return $(this).text() == "lucy";
})
The following will select all td elements that has 'lucy' as their text.
$("table td").filter(function(){ return $(this).text() == "lucy" });
Try utilizing Array.prototype.filter() , document.querySelectorAll() , Node.textContent , strict equality operator
var td = [].filter.call(document.querySelectorAll("td"), function(el) {
return el.textContent === "lucy"
});
td[0].style.background = "olive";
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>dany</td>
<td>lucy</td>
<td>bob</td>
<td>apple</td>
</tr>
</table>
</body>
</html>
Related
I need to create a table in JS which have 3 cells in the first row and in the rest (20 rows) 4 column.
How should I do it work properly if I want to fill the rows from an array value?
So I have myArray[0, 1, 2, 3...] and those values need to insert into the table starting with the second row. (First is like header row)
const apptid_divs11 = [...document.querySelectorAll('.apptSearchResultSelected')];
const apptid_set11 = new Set(apptid_divs11.map(div => div.textContent.trim().split('#')[0]))
The apptid_set11 values needs to go to the table, but the size of the array is always changing
Your question isn't detailed. The following is an example which you can use as a home base
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<th>H1</th>
<th>H2</th>
<th colspan="2">H3</th>
</thead>
<tbody></tbody>
</table>
<script>
let myArrayData = Array.from(Array(20), (x, i) => i);
let rows = "";
for (let rowData of myArrayData) {
rows += `
<tr>
<td>${rowData}</td>
<td>${rowData}</td>
<td>${rowData}</td>
<td>${rowData}</td>
</tr>
`;
}
document.querySelector("table tbody").innerHTML = rows;
</script>
</body>
</html>
is there something wrong with the code below
Just trying to fix decimal paces for a specific class of td.
need to use only jquery
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<td class="go"> 25.252525
</td>
<script type="text/javascript">
$('.go').each(function() {
return parseFloat($(this).toFixed(2));
}
</script>
</body>
</html>
You need to use .text() to get text from td then use .toFixed() and finally change updated value inside your td i.e : $(this).text(parseFloat($(this).text()).toFixed(2));
Demo Code :
$('.go').each(function() {
$(this).text(parseFloat($(this).text()).toFixed(2)); //change text..
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table>
<tr>
<td class="go"> 25.252525
</td>
</tr>
<tr>
<td class="go"> 25.2223525
</td>
</tr>
</table>
I have 2 tables and every row has own button for deleting itself :
<table class="table" id="Offers">
<tr id="row1">
<td><button type="button" id=1 class="removeOffer">X</button</td>
</tr>
</table>
<table class="table" id="OffersHistory">
<tr class="History1">
<td><button type="button" id=1 class="removeOfferHistory">X</button</td>
</tr>
</table>
And two simple JQuery code, for every table , serving for remove :
$(document).on('click', '.removeOffer', function(){
var button_id = $(this).attr("id");
$('#row'+button_id).remove();
});
$(document).on('click', '.removeOfferHistory', function(){
var button_id = $(this).attr("id");
$('.History'+button_id).remove();
});
When i click on "X" button in the first table, it works fine. Row from first table is removed... But when i click on "X" button from second table, it removes row from second and first at the same time. Same row with same number from both tables are removed.. Why?
Firstly, it's invalid HTML to have multiple elements with the same id.
But, you could simplify your code massively by using the power of jQuery...
$(function(){
$("button").on("click", function(e) {
e.preventDefault();
$(this).closest("tr").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>First Row</td>
<td><button>X</button></td>
</tr>
<tr>
<td>Second Row</td>
<td><button>X</button></td>
</tr>
</table>
Both buttons have an ID of 1, change the ID or call the javascript function within the button
Not sure you need to do this much coding.
You can simply do it by : -
$(document).ready(function() {
$('button').click(function() {
$(this).remove();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Remove button</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button class="first" value="button1">button1</button>
<button class="first" value="button1">button2</button>
</body>
</html>
My goal is to attach a hidden value of either 0 or 1 to each entry in a table. If the value is a 0 the entry will be colored Red, and if the value is a 1, the entry will be colored green.
I tried implementing this using filters and creating two different classes 'success' and 'danger' if the class 'success was added to the entry then the entry would be colored green and for 'danger' it would be colored red. I was able to get this to work by using a filter that checks for the string "True" or "False" in the entry. If the String is "True" then it adds the success class if if it is false it adds the danger class. This works however I now want to expand this idea so that every entry will have an assigned boolean.
I am looking for some help on how to do this.
This is my current code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.success { background:green; }
.danger { background:red; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
$(function(){
$('tr:has(td:contains("True"))').addClass('success');
$('tr:has(td:contains("False"))').addClass('danger');
});
</script>
</head>
<body>
<table width="100%">
<tr><td>True</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>True</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
</html>
I would recommend you add an id to your table so you can access it directly.
After that we get the array of tr. Also I can recommend here you validate that this array is of the same size than your results array. Just for good measure.
Then we can just iterate over this array using jQuery's each function.
let status = [false , true , false , true , false , false , true , true ];
$('#mainTable tr').each((i,tr) => {
if(status[i])
$(tr).addClass('success');
else
$(tr).addClass('danger');
})
.success { background:green; }
.danger { background:red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id='mainTable' width="100%">
<tr><td>True</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
Hope this helps :)
Something like this seems to work...
<table width="100%">
<tr><td>True</td></tr>
<tr><td>2</td><td style="display:none">0</td></tr>
<tr><td>3</td><td style="display:none">1</td></tr>
<tr><td>4</td><td style="display:none">0</td></tr>
<tr><td>5</td><td style="display:none">0</td></tr>
<tr><td>6</td><td style="display:none">1</td></tr>
<tr><td>7</td><td style="display:none">0</td></tr>
</table>
You can add an own property (e.g. data-boolean) to your cells.
//get all elements with attribute data-boolean and convert the HTML collection into an array
var aCells = [].slice.call(document.querySelectorAll("[data-boolean]"));
//Loop the elements and add the styleclass
aCells.forEach(function(v,i){
if(v.getAttribute("data-boolean") === "true"){
v.classList.add("success");
}
if(v.getAttribute("data-boolean") === "false"){
v.classList.add("danger");
}
});
.success {
background: green;
}
.danger {
background: red;
}
<table width="100%">
<tr>
<td data-boolean="true">True</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td data-boolean="false">False</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
</table>
How can I get only the id of a td element in a table with an inputClickHandler?
because if I do for example e.currentTarget or e.target it stores this in it: <td id='square0'>5</td>. I want it to store only the id. For the example above I want to store only square0.
Thank you, your answer is much appreciated.
Use e.target.id. id is a property of DOM element.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<table>
<tr><td id="1">Row 1</td></tr>
<tr><td id="2">Row 2</td></tr>
<tr><td id="3">Row 3</td></tr>
<tr><td id="4">Row 4</td></tr>
<tr><td id="5">Row 5</td></tr>
</table>
<script type="text/javascript">
$(document).on("click", "td", function(e) {
var data = $(this).attr('id');
alert (data);
});
</script>
</body>
</html>
If you use jquery it will be easier. I have made a simple page to demonstrate example of jquery code.