I have a data table with a dropdown box that sorts the table by column. I am trying to highlight the column that is selected/sorted by the dropdown. I am using the following code to obtain the index of the dropdown item:
<script>
var sel = document.getElementById('asorting').selectedIndex;
alert(sel);
</script>
I am using the following CSS code to highlight the column:
<style>
table td:nth-of-type(3)
{
background-color:#E0E0E0;
}
</style>
Both of these work on their own, but I am trying to update the "table td:nth-of-type(3)" to change based on the value of my sel variable. I have tried using (" + sel + ") to feed the variable to the CSS, but that is not working.
I am not very experienced in JS and have not been able to find anything on this site that relates exactly to what I am trying.
Any help would be greatly appreciated.
You can toggle classes in javascript by arriving at a logic like this
<html>
<head>
<script>
function changeStyle(v){
elements = document.getElementsByClassName('hightlight');
if(elements.length > 0){
for (let element of elements){
element.classList.remove('hightlight');
}
}
document.getElementById('data').children[parseInt(v)-1].className = "hightlight";
}
</script>
</head>
<body>
<style>
.hightlight {
color : red
}
</style>
<select id="asorting" onchange="changeStyle(this.value)">
<option class="row" value="1">one</option>
<option class="row" value="2">two</option>
<option class="row"value="3">three</option>
</select>
<table>
<tbody id="data">
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I have one selection input with about 5 options in it. I also have one empty table that will use this format:
<table>
<tr>
<td>X(for delete)</td>
<td>Option name</td>
<td>Value that is linked to that option name</td>
</tr>
</table>
So what I want is this: when someone chooses a option from the select menu it has to make one new <tr> element in the table with 3 <td>. The first is just a "X" or image so that I can delete the <tr>, the second one is the option name and the third one a value that is linked to that option.
So how can I make a program that will add the TR for me and the TD's. The second part is: how can I make it so that when the user prewses the X it deletes the entire <tr> parent. And if possible how can I add all the values together from the 3 TD and display it on screen?
I know this is a lot but is there anyone here that can help me out?
Thanks for your time.
Try this, hope it helps you in the right way:
$('button').click(function() {
$('table').append('<tr><td class="remove">X</td><td class="optionValue">' + $('select option:selected').text() + '</td><td class="linkedValue">' + $('select').val() + '</td></tr>');
})
$(document).on('click', '.remove', function() {
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button type="button">Enter</button>
<br />
<br/>
<table>
<tr>
<td>X(for delete)</td>
<td>Option name</td>
<td>Value that is linked to that option name</td>
</tr>
</table>
I have several tables in my page and none of them has an id attribute.
I retrieve with Javascript or jQuery a row of one of these tables. Then I want to do things to all the rows of that table but not to any row of any other table. Selecting such rows through jQuery would do, and also doing that with Javascript would be ok.
So I need to identify a table and the only thing I know about it is that this row belongs to it. Is it possible ?
Runnable example:
<html>
<head>
<script src="jquery-1.11.3.js"></script>
<style>
.myYellow
{
background-color: yellow;
}
</style>
<script type="text/javascript">
function doStuff() {
var jqRow = jQuery("#r1t1"); if (jqRow.length !== 1) throw "ERROR";
var htmlRow = jqRow.get(0); // How do I restrict the jqSelectedRows below to only the table this row belongs to ?
var jqSelectedRows = jQuery("tr.myYellow"); // But I only want the yellow rows of the table containing htmlRow .
jqSelectedRows.each(function(index) {
this.setAttribute("style", "background-color: blue");
});
}
</script>
</head>
<body>
<table border="1">
<tr id="r1t1" ><td>r1 t1</td></tr>
<tr id="r2t1" class="myYellow"><td>r2 t1</td></tr>
<tr id="r3t1" class="myYellow"><td>r3 t1</td></tr>
<tr id="r4t1" ><td>r4 t1</td></tr>
</table>
<br><br>
<table border="2">
<tr id="r1t2" class="myYellow"><td>r1 t2</td></tr>
<tr id="r2t2" class="myYellow"><td>r2 t2</td></tr>
<tr id="r3t2" ><td>r3 t2</td></tr>
</table>
<br><br>
<input type="button" value="Do" onclick="doStuff()">
<br>The button selects the first row of the first table ("r1 t1") and then it
<br>must turn blue all the <strong>yellow</strong> rows of <strong>that table only</strong>;
no other table must be affected.
</body>
</html>
Use .siblings(). See comment in snippet.
Note: Changed button slightly which of course can easily be converted back to the original way by deleting the code around the doStuff() function and adding the onclick="doStuff();" back to the <input> button.
$(function() {
$('#do').on('click', doStuff);
function doStuff() {
var jqRow = $("#r1t1");
if (jqRow.length !== 1) throw "ERROR";
var jqSelectedRows = jqRow.siblings(); // How do I restrict the jqSelectedRows below to only the table this row belongs to? | Use .siblings() to collect all <tr>s within the table (excluding the referenced tr#r1t1).
jqSelectedRows.each(function(index) {
this.setAttribute("style", "background-color: blue");
});
}
});
.myYellow {
background-color: yellow;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>32721615</title>
</head>
<body>
<table border="1">
<tr id="r1t1">
<td>r1 t1</td>
</tr>
<tr id="r2t1" class="myYellow">
<td>r2 t1</td>
</tr>
<tr id="r3t1" class="myYellow">
<td>r3 t1</td>
</tr>
</table>
<br>
<br>
<table border="2">
<tr id="r1t2" class="myYellow">
<td>r1 t2</td>
</tr>
<tr id="r2t2" class="myYellow">
<td>r2 t2</td>
</tr>
<tr id="r3t2">
<td>r3 t2</td>
</tr>
</table>
<br>
<br>
<input id="do" type="button" value="Do">
<br>The button selects the first row of the first table ("r1 t1") and then it
<br>must turn blue all the <strong>yellow</strong> rows of <strong>that table only</strong>; no other table must be affected.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
I am trying to create a dynamic table that allows the user to select from around 100 variables. These variables have been split into categories and I have been displaying them in a second select that depends on the user selecting a value in the first select. I have been searching the web for answers and have come up blank. I realize that the clone() call will duplicate all data and for that reason id's are a poor choice for the rows.
Here is what I currently have for HTML:
<body>
<table name='myTable' class="dynatable">
<thead>
<tr>
<th class='idCol' >ID</th>
<th>Category</th>
<th>Metric</th>
<th>Conditional</th>
<th><button class="add">Add</button></th>
</tr>
</thead>
<tbody>
<form name='myForm'>
<tr class="first">
<td class="id idCol"><input type="text" name="id[]" value="0" /></td>
<td><select name='categories' onChange='updatemetrics(this.selectedIndex)' style="width: 260px">
<option selected>--Select Category--</option>
<option value='1'>Customer Experience</option>
<option value='2'>Key Satisfaction Identifiers</option>
<option value='3'>Personnel Costs</option>
<!-- I have cut the rest out for the sake of brevity. -->
</select></td>
<!-- This is the select that populates based on the user's choice. -->
<td><select style="width: 310px"name='metrics'></select></td>
</tr>
</form>
</tbody>
</table>
</body>
The Javascript that I am working with is as follows.
$(document).ready(function() {
var id = 0;
// Add button functionality
$("table.dynatable button.add").click(function() {
id++;
var master = $(this).parents("table.dynatable");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone(true);
prot.attr("class", "")
prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.dynatable button.remove").live("click", function() {
$(this).parents("tr").remove();
});
});
//script for dynamically populating the metrics select
var metricCategories=document.myForm.categories;
var metricList=document.myForm.metrics;
var metrics=new Array()
metrics[0]=" "
metrics[1]=['Wait time average|waitInLine','Mystery Shopper Scores|mysteryScores']
metrics[2]=['Referral Rate|ref_rate','Facebook Shares|facebook_shares','Twitter Followers|twit_followers','Customer Complaint Calls|comp_calls']
metrics[3]=['Pension Payouts|pension_pay', 'Full Time Employees|ftes', 'Part Time Employees|ptes', 'Contractor Costs|contract_costs']
function updatemetrics(selectedMetricGroup){
metricList.options.length=0
if (selectedMetricGroup>0) {
for (i=0; i<metrics[selectedMetricGroup].length; i++)
metricList.options[metricList.options.length]=new Option(metrics[selectedMetricGroup][i].split("|")[0], metrics[selectedMetricGroup][i].split("|")[i])
}
}
Any help would be appreciated. To reiterate the reason I am asking for help, I need to add/ remove rows that hold select nodes that interact with each other. Thanks in advance.
It has taken me days to come up with the following, and now I'm realizing that it still doesn't work. My "add row" button isn't working properly. What am I missing?
<table>
<tr>
<th>field</th>
<th>comparison</th>
<th>value</th>
</tr>
<tr>
<td>
<select style="width:5em;" class="field">
<option>name</option>
<option>age</option>
<option>sex</option>
</select>
</td>
<td>
<select style="width:5em;" class = "comp">
<option>equals</option>
<option>starts with</option>
<option>not equal to</option>
</select>
</td>
<td><input type="text" class = 'value'></td>
<td><button id="add">Add row</button></td>
</tr>
</table>
$('#tableSearchMainAccount1 tr').each(function() {
var td = '';
// used to skip table header (if there is)
if ($(this).find("td:first").length > 0) {
$(this).find('option:selected').each(function() {
td = td + $(this).text() + ',';
});
td = td + $(this).find('input').val();
filt[ctr] = td;
ctr += 1;
}
});
//alert(filt); //alert output like name,equals,ann,age,equals,11
$('#add').live('click', function() {
var $lastTr = $('table tr:last');
console.log($lastTr);
$lastTr.clone().insertAfter($lastTr);
// Remove the button from the previous tr, otherwise each row will have it.
$('#add', $lastTr)
.replaceWith('<button class="remove_row">Remove row</button>');
});
$('.remove_row').live('click', function() {
$(this).closest('tr').remove();
});
From the discussion in the comments, it appears you have not referenced jQuery.
Add the following to your <head></head> section:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
There are many other CDNs that host jQuery for you, or you can download it yourself. All of these details can be found on http://jquery.com/download/.
So that your markup looks something like the following:
<!DOCTYPE html>
<html>
<head>
<title>My jQuery Project</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<table>...</table>
</body>
</html>
Note that I also referenced another external file called "scripts.js". This is where you could place all of your JavaScript and jQuery logic.
$(document).ready(function(){
/* Wrapping your code with a document-ready
block will ensure that the DOM will be
ready before your code runs
*/
});
replace
<table>
with
<table id="tableSearchMainAccount1">
would be my starter for 10.
I have various hidden tables that become displayed with onChange events. In the content of one of these tables, I would like to put a hyperlink that will take me back to the previously hidden table. So, to begin with, I have:
<table>
<tbody id="option11" style="display: none;">
<tr>
<td>
<p>
<select name="type" onChange="display(this,'option11a','option11b');">
<option>Please select:</option>
<option value= "option11a">Missed Deadline</option>
<option value= "option11b">Application Down</option>
</select>
</p>
</td>
</tr>
</table>
The onChange associated with this table is:
function display(obj,id11a,id11b)
{
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id11a).style.display = 'none';
document.getElementById(id11b).style.display = 'none';
if ( txt.match(id11a) )
{
document.getElementById(id11a).style.display = 'block';
}
if ( txt.match(id11b) )
{
document.getElementById(id11b).style.display = 'block';
}
}
If the user selects option11a, they are presented with:
<table>
<tbody id="option11a" style="display: none;">
<tr>
<tr>
<td><p>1. Identify missing work.</p></td>
<td><p>2. Contact management.</p></td>
</tr>
</tr>
And, if the user selects option11b, they are presented with:
<table>
<tbody id="option11b" style="display: none;">
<tr>
<tr>
<td><p>1. Contact management.</p></td>
<td><p>2. Refer to Missed Deadline instructions.</p></td>
</tr>
</tr>
So- what I'd like to do is this: Place a hyperlink of some sort in the "Refer to Missed Deadline instructions" that, when clicked, displays the table with tbody id option11a once again.
Let me know if I should better clarify. Greatly appreciate all help! Thanks.
You can do this easily with jquery's .last selector.
http://api.jquery.com/last-selector/