Here i'm trying to change the color based on value and rest of should be in white background, if input value is 1 then it should highlighted to red , if i changed the value to 4 then it should be highlighted in to red and rest of values 1 should be in white
I am still learning,Thanks in advance
<table>
<tr>
<td id="data1">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>
</body>
<script>
function myFunction(){
if(document.getElementById('valuesData').value >= '9'){
document.getElementById('data1').style.background='red'
}
else{
alert("value should not be greater than 9");
}
}
</script>
You could use data attributes to see which td has a value of the entered text. It will change the background of entered value td.
Also before applying the background red to the entered value we can check all the tds and clear them with white background.
All the value entered in an input are string format so we need to use parseInt function to make sure they are converted to integar.
Live Demo:
function myFunction() {
//Get input value and convert to int using parseInt
let value = parseInt(document.getElementById('valuesData').value)
//Clear all the td with white background
let allTds = document.getElementsByTagName('td');
for (let i = 0; i < allTds.length; i++) {
allTds.item(i).style.background = 'white'
}
//Apply red background to the entered td with matching data-id
let getTd = document.querySelector('[data-id="' + value + '"]');
if (value <= '9') {
getTd.style.background = 'red'
} else {
alert("value should not be greater than 9");
}
}
<table>
<tr>
<td data-id="1">1</td>
<td data-id="2">2</td>
<td data-id="3">3</td>
</tr>
<tr>
<td data-id="4">4</td>
<td data-id="5">5</td>
<td data-id="6">6</td>
</tr>
<tr>
<td data-id="7">7</td>
<td data-id="8">8</td>
<td data-id="9">9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()">Click me</button>
<body>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>
</body>
<script>
function myFunction(){
if(document.getElementById('valuesData').value >= 9){
document.getElementById('data1').style.background='red'
}
else{
alert("value should not be greater than 9");
}
}
</script>
You can get all tds and check if the user input matches with your td and based on you can change the color i.e. red and for rest of the tds make it white
function myFunction(){
var input = parseInt(document.getElementById('valuesData').value);
if(!isNaN(input) && input>=1 && input<=9)
document.getElementsByTagName('td')[input-1].style.background='red';
else
alert('invalid input')
let allTds = document.getElementsByTagName('td');
for(let i=0;i<allTds.length;i++){
if(i!==input-1){
allTds.item(i).style.background='white'
}
}
}
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me">Click</button>
</body>
function myFunction(){
const value= parseInt(document.getElementById('valuesData').value);
if( value<= 9){
const set=document.getElementsByClassName('data1')
for (item of set){
if(item.innerHTML==value){item.style.background='red'
}else item.style.background='white';
}
}
else{
alert("value should not be greater than 9");
}
}
<table>
<tr>
<td class="data1">1</td>
<td class="data1">2</td>
<td class="data1">3</td>
</tr>
<tr>
<td class="data1">4</td>
<td class="data1">5</td>
<td class="data1">6</td>
</tr>
<tr>
<td class="data1">7</td>
<td class="data1">8</td>
<td class="data1">9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>
This should fix it. There were a few errors originally:
You were comparing the string value of the input to the string value '9' - the input should either be changed from text to number, or you should use parseInt as I have. Note, that entering a non-numeric value will cause an error unless it is checked for, so it's better to change the input field's type to number - also, you should compare to the numeric value 9, rather than the string value '9'
Your conditional was actually the wrong way around - i.e. >= should be <= in this case
Updated:
function myFunction() {
var val = document.getElementById('valuesData').value;
document.querySelectorAll("table td").forEach(function(td) {
td.style.background = "";
})
if (document.getElementById('valuesData').value != "" && parseInt(document.getElementById('valuesData').value) <= 9) {
val = parseInt(val);
document.querySelectorAll("table td")[val - 1].style.background = 'red';
} else {
alert("value should be between 1 and 9");
}
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a table and a input where a person is supposed to enter a month 1-12, and when submitting, the rows from that month should turn red. How do I get the month out of these dates to determine which month they are from? I am unsure how to continue.
<input type="text" placeholder="Kuukausi" id="searchMonth"/>
<button type="submit" id="searchbutton">
<span>Etsi</span></button>
</div>
<table style="width: 100%" id="table">
<tr>
<th>Lintu</th>
<th>Päivä</th>
</tr>
<tr>
<td>Varis</td>
<td>20.4.2018</td>
</tr>
<tr>
<td>Huuhkaja</td>
<td>14.9.2018</td>
</tr>
<tr>
<td>Pääskynen</td>
<td>24.4.2018</td>
</tr>
<tr>
<td>Peippo</td>
<td>30.3.2018</td>
</tr>
Use a type="number" input element
No need to "Submit" buttons.
Add an ID to tbody
Use JS TableElement rows and TableRowElement cells objects
Use the "input" event to trigger a searchMonth() function
Loop your TBODY TR elements, find the 1th index cell and split its content by . dots to retrieve the month string.
Check if the splitted date month equals to the inputed one
Use JS Element.classList.toggle('className', boolean) to toggle the CSS .highlight class
const tbody = document.querySelector("#tableTbody");
const searchMonth = evt => {
const monthValue = evt.target.value.trim();
[...tbody.rows].forEach(row => {
const month = row.cells[1].textContent.split('.')[1];
row.classList.toggle('highlight', monthValue == month);
})
};
document.querySelector("#searchMonth").addEventListener('input', searchMonth);
.highlight td {
background: yellow;
}
<label>Month: <input type="number" id="searchMonth" min=1 max=12></label>
<table>
<thead>
<tr>
<th>Foo</th>
<th>Date</th>
</tr>
</thead>
<tbody id="tableTbody">
<tr>
<td>a</td>
<td>20.4.2018</td>
</tr>
<tr>
<td>b</td>
<td>14.9.2018</td>
</tr>
<tr>
<td>c</td>
<td>24.4.2018</td>
</tr>
<tr>
<td>d</td>
<td>30.3.2018</td>
</tr>
</tbody>
</table>
Something like this would work:
// handle click and add class
$('#searchbutton').on("click", function() {
$('.highlight').removeClass('highlight');
var rows = $('#table').find('tr');
var value = $('#searchMonth').val().trim();
$.each(rows, function() {
var dateCol = $(this).find('td').eq(1);
if (dateCol.length > 0) {
var date = dateCol.text();
var month = (date.match(/\d{2}.(\d{1,2}).\d{4}/) || [])[1];
if (month == value) {
$(this).addClass('highlight');
}
}
});
})
.highlight {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Kuukausi" id="searchMonth"/>
<button type="submit" id="searchbutton">
<span>Etsi</span></button>
<table style="width: 100%" id="table">
<tr>
<th>Lintu</th>
<th>Päivä</th>
</tr>
<tr>
<td>Varis</td>
<td>20.4.2018</td>
</tr>
<tr>
<td>Huuhkaja</td>
<td>14.9.2018</td>
</tr>
<tr>
<td>Pääskynen</td>
<td>24.4.2018</td>
</tr>
<tr>
<td>Peippo</td>
<td>30.3.2018</td>
</tr>
</table>
Firstly, You can get month value by using split like currentText.split(".")[1]
Secondly, The input type of searchMonth should be number to allow number value only.
$("#searchbutton").on("click", function(){
var searchMonth = $("#searchMonth").val();
$("table tr").each(function(){
var currentText = $(this).find(":eq(1)").text();
var currentMonth = currentText.split(".")[1];
var background_color = searchMonth == parseInt(currentMonth) ? "#00ff78" : "";
$(this).css("background-color", background_color);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" placeholder="Kuukausi" id="searchMonth" value = "4"/>
<button type="submit" id="searchbutton">
<span>Etsi</span></button>
</div>
<table style="width: 100%" id="table">
<tr>
<th>Lintu</th>
<th>Päivä</th>
</tr>
<tr>
<td>Varis</td>
<td>20.4.2018</td>
</tr>
<tr>
<td>Huuhkaja</td>
<td>14.9.2018</td>
</tr>
<tr>
<td>Pääskynen</td>
<td>24.4.2018</td>
</tr>
<tr>
<td>Peippo</td>
<td>30.3.2018</td>
</tr>
<tr>
<td>Peippo</td>
<td>20.02.2018</td>
</tr>
I'm creating a table value that changes by id application with jquery and i don't know about jquery that much how can i change table row by id from input with jquery
note:i tested following code from another page but the code is like this
`<script>
$('#dicerik').html(icerik).find("#tablo2");
</script>`
i have tried something like this but i cant scope the real way this changes some other row
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<table>
<tr>
<th>İçerik</th>
<th>Tür</th>
<th>Dil</th>
</tr>
<tr>
<td>1</td>
<td>DENEXAMPLE</td>
<td>YineEXAMPLE</td>
</tr>
<tr>
<td>2</td>
<td>DENEXAMPLE2</td>
<td>YineEXAMPLE2</td>
</tr>
<tr>
<td>3</td>
<td>DENEXAMPLE3</td>
<td>YineEXAMPLE3</td>
</tr>
<tr>
<td>4</td>
<td>DENEXAMPLE4</td>
<td>YineEXAMPLE4</td>
</tr>
</table>
<input type="text" id="text1" name="text1" placeholder="id">
<input type="text" id="text2" name="text2" placeholder="text">
<button type="button" name="butonbu">Change it</button>
first input id of a row example 1 and its second text YineEXAMPLE
expected result is id 1 row and second text should be "dene"
Try this::
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<table>
<tr>
<th>İçerik</th>
<th>Tür</th>
<th>Dil</th>
</tr>
<tr>
<td>1</td>
<td>DENEXAMPLE</td>
<td>YineEXAMPLE</td>
</tr>
<tr>
<td>2</td>
<td>DENEXAMPLE2</td>
<td>YineEXAMPLE2</td>
</tr>
<tr>
<td>3</td>
<td>DENEXAMPLE3</td>
<td>YineEXAMPLE3</td>
</tr>
<tr>
<td>4</td>
<td>DENEXAMPLE4</td>
<td>YineEXAMPLE4</td>
</tr>
</table>
<input type="text" id="text1" name="text1" placeholder="id">
<input type="text" id="text2" name="text2" placeholder="text">
<button type="button" name="butonbu" onClick="changeIt()">Change it</button>
<script>
function changeIt()
{
$("table tr").each(function(index)
{
if (index != 0) {
$row = $(this);
var id = $row.find("td:first").text();
var searchID=$("#text1").val();
if(id==searchID)
{
$row.find("td:nth-child(2)").html($("#text2").val())
}
}
})
}
</script>
I suggest that you want to find a row in table by particular id and change 2nd or 3rd column, isn't it?
You need go through each row, get text from the first cell, if this text is equal to required value, you have to change the value in other cell.
You can do it with using this code:
$('button[name=butonbu]').click(function () {
var id = $('#text1').val();
var newText = $('#text2').val();
$('table tr').each(function (index, el) {
var $el = $(el);
if ($el.find('td:first').text() === id) {
$el.find('td:nth-child(2)').text(newText);
}
});
});
https://jsfiddle.net/js7yg631/7/
i do it with plain javascript
try this
<table>
<tr id="tr-0">
<th>İçerik</th>
<th>Tür</th>
<th>Dil</th>
</tr>
<tr id="tr-1">
<td>1</td>
<td>DENEXAMPLE</td>
<td>YineEXAMPLE</td>
</tr>
<tr id="tr-2">
<td>2</td>
<td>DENEXAMPLE2</td>
<td>YineEXAMPLE2</td>
</tr>
<tr id="tr-3">
<td>3</td>
<td>DENEXAMPLE3</td>
<td>YineEXAMPLE3</td>
</tr>
<tr id="tr-4">
<td>4</td>
<td>DENEXAMPLE4</td>
<td>YineEXAMPLE4</td>
</tr>
</table>
<input type="text" id="text1" name="text1" placeholder="id">
<input type="text" id="text2" name="text2" placeholder="text">
<input type="text" id="text3" name="text2" placeholder="text">
<button type="button" id="submit" name="butonbu">Change it</button>
<script>
const input1 = document.getElementById('text1')
const input2 = document.getElementById('text2')
const input3 = document.getElementById('text3')
document.getElementById('submit').addEventListener('click', changetarget)
function changetarget() {
if (input1.value != '' || input2.value != '' || input3.value != '') {
let parentTr = document.getElementById('tr-' + input1.value);
parentTr.children[1].innerHTML = input2.value;
parentTr.children[2].innerHTML = input3.value;
}
}
</script>
$(function(){
$('button[name=butonbu]').on("click", function(){
var id = $("#text1").val();
var replace_with = $("#text2").val();
$( "tr" ).each( function( index ) {
if(index !== 0){
var col_val = $(this).children("td").html();
if( col_val == id ){
$(this).children("td:nth-child(2)").html(replace_with);
}
}
});
});
});
Edit
So many good answers and all of them work! Thanks a lot guys :) I wish I could mark all of them as solved!
----
Good day
Let's say I have these 2 text inputs:
<input type="text" id="plt_quantity_sum"/> <!-- this should calculate the "#quantity" where each "#uom_value" is "PLT" -->
<input type="text" id="crt_quantity_sum"/><!-- this should calculate the "#quantity" where each "#uom_value" is "CRT" -->
Let's assume the following scenario:
<table>
<tbody>
<tr>
<th>Item Name</th>
<th id="uom_value">UOM</th>
<th id="qty">Quantity</th>
</tr>
<tr>
<td>Item 1</td>
<td id="uom_value">PLT</td>
<td id="qty">5</td>
</tr>
<tr>
<td>Item 2</td>
<td class="uom_value">PLT</td>
<td id="qty">3</td>
</tr>
<tr>
<td>Item 3</td>
<td id="uom_value">CRT</td>
<td id="qty">2</td>
</tr>
<tr>
<td>Item 4</td>
<td id="uom_value">CRT</td>
<td id="qty">3</td>
</tr>
</tbody>
</table>
<input type="text" id="plt_quantity_sum" />
<input type="text" id="crt_quantity_sum" />
What needs to happen:
When the document loads, or via a button click; the quantity of "#plt_quantity_sum" and "#crt_quantity_sum" should be calculated based on their respective quantities and "UOM" values.
Some Javascript I had in mind which should clarify what exactly needs to happen:
$(document).ready(function(){
if (document.getElementById("#uom_value").value == "PLT"){
document.getElementById("#plt_quantity_sum").value == (sum of #qty);
}
else if (document.getElementById("#uom_value").value == "CRT"){
document.getElementById("#crt_quantity_sum").value == (sum of #qty);
}
});
Thanks for reading and I would greatly appreciate any help.
You just need declare two variables crtQtySum and pltQtySum for the two sums and initialize them to 0, then loop over the tds and check if it's crt or plt and updtae your variables accordingly:
$(document).ready(function() {
var crtQtySum = 0;
var pltQtySum = 0;
$(".uom_value").each(function() {
if ($(this).text() === "CRT") {
crtQtySum += parseInt($(this).next("td.qty").text());
} else if ($(this).text() === "PLT") {
pltQtySum += parseInt($(this).next("td.qty").text());
}
});
$("#plt_quantity_sum").val(pltQtySum);
$("#crt_quantity_sum").val(crtQtySum);
});
$(document).ready(function() {
var crtQtySum = 0;
var pltQtySum = 0;
$(".uom_value").each(function() {
if ($(this).text() === "CRT") {
crtQtySum += parseInt($(this).next("td.qty").text());
} else if ($(this).text() === "PLT") {
pltQtySum += parseInt($(this).next("td.qty").text());
}
});
$("#plt_quantity_sum").val(pltQtySum);
$("#crt_quantity_sum").val(crtQtySum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Item Name</th>
<th class="uom_value">UOM</th>
<th class="qty">Quantity</th>
</tr>
<tr>
<td>Item 1</td>
<td class="uom_value">PLT</td>
<td class="qty">5</td>
</tr>
<tr>
<td>Item 2</td>
<td class="uom_value">PLT</td>
<td class="qty">3</td>
</tr>
<tr>
<td>Item 3</td>
<td class="uom_value">CRT</td>
<td class="qty">2</td>
</tr>
<tr>
<td>Item 4</td>
<td class="uom_value">CRT</td>
<td class="qty">3</td>
</tr>
</tbody>
</table>
PLT:<input type="text" id="plt_quantity_sum" readonly/></br>
CRT:<input type="text" id="crt_quantity_sum" readonly/>
Note:
I used readonly attribute with the inputs, as they're just used to display the sums so they can't be modified, but we could just used a block element for that like div or span.
You can try this code. I ve didnt test it.
var plt_count = 0;
var crt_count = 0;
$(".uom_value").each(function() {
if($(this).html === 'PLT'){
plt_count += parseInt($(this).closest('.qty').html());
}
if($(this).html === 'CRT'){
crt_count += parseInt($(this).closest('.qty').html());
}
});
$("#plt_quantity_sum").val(plt_count);
$("#crt_quantity_sum").val(crt_count);
Apart from correcting the spelling mistakes that Hamza pointed out, I'd say you should basically iterate through the elements given its class name document.getElementsByClassName('.someclass') and then store and sum the value of each one of its siblings with class '.qty'.
Then you take that value and use it to populate the input you want.
Hope that helps ;)
This can be done using so many method, this is one of them :
$(document).ready(function(){
var sum_PLT = 0, sum_CRT = 0;
$('table > tbody > tr').each(function() {
tr = $(this)[0];
cells = tr.cells;
if(cells[0].textContent != "Item Name"){//To exclude the <th>
if(cells[1].textContent == "PLT")
sum_PLT += parseInt(cells[2].textContent);
else
sum_CRT += parseInt(cells[2].textContent);
}
});
$("#plt_quantity_sum").val(sum_PLT);
$("#crt_quantity_sum").val(sum_CRT);
});
This is a working jsFiddle.
You might want to try this code.
<script>
$(document).ready(function(){
var plt_qty = 0;
var crt_qty = 0;
$('.uom_value').each(function(){
if ($(this).text() === 'PLT' ) {
plt_qty = plt_qty + parseInt($(this).parent().find('.qty').text());
}else if ($(this).text() === 'CRT' ) {
crt_qty = crt_qty + parseInt($(this).parent().find('.qty').text());
}
});
$("#plt_quantity_sum").val(plt_qty);
$("#crt_quantity_sum").val(crt_qty);
});
</script>
Note : remove class uom_value in <th class="uom_value">UOM</th>.
I've got this problem:
I have a table in HTML, that I want to edit via Javascript.
The table info is of rooms with either value 0 or 1.
I have two buttons that can change a cell, that can set the value to 1 or 0, but I want a function connected to one button, that changes the value, as 1 gets to 0, and 0 gets to 1.
One solution I find is to give each cell an ID and change it, and the other one is to use row/cell from the table.
<table id="table1">
<table border="1" cellpadding="1" cellspacing="3">
<tr>
<td> Room </td>
<td> Status </td>
</tr>
<tr>
<td> r1 </td>
<td id="room1"> 0 </td>
</tr>
<tr>
<td> r2 </td>
<td> 0 </td>
</tr>
<tr>
<td> r3 </td>
<td> 1 </td>
</tr>
Currently I've tried:
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
<button type="button" onclick="metode2()">Room 1 => 0</button>
<script>
function metode1(){
if(document.getElementById("room1").innerHTML > 0) {
document.getElementById("room1").innerHTML = 0;
}
else {
document.getElementById("room1").innerHTML = 1;
}
}
function metode2(){
document.getElementById("table1").rows[1].cells[1].innerHTML = 0;
}
</script>
But neither of them work..
What can I do?
metode1 would work, but your initial text in the element has spaces on either side of the 0, so > can't implicitly convert it to a number. If you remove the spaces (in the markup, or by doing .innerHTML.trim() on a modern browser), the implicit conversion from string to number will work. You might consider converting explicitly, but you'll still have to trim.
Live Example with the spaces removed in the markup:
function metode1() {
if (document.getElementById("room1").innerHTML > 0) {
document.getElementById("room1").innerHTML = 0;
} else {
document.getElementById("room1").innerHTML = 1;
}
}
<table border="1" cellpadding="1" cellspacing="3">
<tr>
<td>Room</td>
<td>Status</td>
</tr>
<tr>
<td>r1</td>
<td id="room1">0</td>
</tr>
<tr>
<td>r2</td>
<td>0</td>
</tr>
<tr>
<td>r3</td>
<td>1</td>
</tr>
</table>
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
Live Example using trim:
function metode1() {
if (document.getElementById("room1").innerHTML.trim() > 0) {
document.getElementById("room1").innerHTML = 0;
} else {
document.getElementById("room1").innerHTML = 1;
}
}
<table border="1" cellpadding="1" cellspacing="3">
<tr>
<td>Room</td>
<td>Status</td>
</tr>
<tr>
<td>r1</td>
<td id="room1"> 0 </td>
</tr>
<tr>
<td>r2</td>
<td>0</td>
</tr>
<tr>
<td>r3</td>
<td>1</td>
</tr>
</table>
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
Note that trim was added in ECMAScript5 (2009) and so may not be on some older JavaScript engines. It's easily shimmed, though.
Try this-
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
function metode1(){
if(document.getElementById("room1").innerHTML.trim() =="1") {
document.getElementById("room1").innerHTML = 0;
}
else {
document.getElementById("room1").innerHTML = 1;
}
}
I have got a table.
I have assigned a different value to each of the lines
<table id="number1">
<tr>
<td id="value1">My Table</td>
</tr>
</table>
<script>
window.onload = function() {
document.getElementById("value1").value = "100"
</script>
I need to be able to get a value for the table "number 1" by adding the different rows of the table through Javascript.
var x=document.getElementById("number1");
var y= x.rows[0].cells[0].innerHTML=100;
<table id="number1">
<tr>
<td id="value1">My Table</td>
</tr>
</table>
You can use jquery
for(i=1;i<100000;i++){
$("#value"+i).html(i);
}
Try this
var total=0;
var last =1000000;
for(var i=1;i<parseInt(last);i++){
var id ="value" + i;
var element= document.getElementById(id);
if(element!= null){
document.getElementById(id).innerHTML=i + "00";
total=parseInt(total)+parseInt(element.innerHTML);
}
else
i=last;
}
document.getElementById("result").innerHTML="sum is =" + total;
<table id="number1">
<tr>
<td id="value1">My Table value 1 </td>
<td id="value2">My Table value 2 </td>
</tr>
</table>
<div id="result"></div>