I apologize in advance if this question/issue was brought up or asked. I did not find one of this type.
On button click, I would like to change the data field into a dropdown list that defaults to the value that was present before the change.
$("#edit").on("click", function() {
let food = $("#food");
let foodValue = food.attr("data-food-value");
food.html(`<select>
<option value="1">Fries</option>
<option value="2">Burger</option>
<option value="3">Pizza</option>
</select>`);
$(`#food select option[value="${foodValue}"]`).attr("selected", true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Favorite Food</th>
<td id="food" data-food-value="3">Pizza</td>
</tr>
<tbody>
</table>
<button id="edit">Edit</button>
I want it to default to Pizza on button click, but it defaults to Fries. Any help is greatly appreciated. Thank you in advance.
Related
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>
I'm at beginner level at Coding and got stuck at one place where I'm not able to display the content of saved data into text area once clicked on Submit button.
Please check below code for more details
$(".submitbtn").on("click", function() {
var textarea_value = $(this).closest("tr").find("textarea").val();
var select_value = $(this).closest("tr").find("select").val();
if((textarea_value != '') && (select_value != 'completed')){
$(this).closest("tr").find("td:eq(2)").text(textarea_value);
}
else{
$(this).closest("tr").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h1>Student Assignment Report</h1>
<div>
<table class='table' id='table'>
<thead>
<th>Student Name</th>
<th>Assignment</th>
<th>Reason by teacher</th>
<th>Set Status</th>
<th>Submit</th>
</thead>
<tbody>
<tr>
<td class="StuName">Lokesh</td>
<td class="Assignment">Ajax Assignment</td>
<td>
<textarea class="teachercomment" id="teachercomment" name="Reason by teacher" rows="3" cols="15" placeholder="Please describe"></textarea>
</td>
<td>
<select name="set_status" class="statusclass">
<option disabled selected value>Select Status</option>
<option value="completed">Completed</option>
<option value="pending">Pending</option>
</select>
</td>
<td>
<button type="button" class="btn btn-primary submitbtn">Submit</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I've shared logic of jquery as well where I got stuck. Here once I enter the content in textarea field ('Reason by teacher') having 'setStatus' dropdown selected as 'Completed' and click on Submit button then entire row should be disappear though data should get saved. However row is getting disappeared but once I refresh the page, it appears once again.
Along with this, if 'setStatus' dropdown is set as 'Pending' then data should be visible till the time 'setStatus' is not selected as 'Completed' and 'Submit' button is clicked. But when I saved the data having status as 'Pending', it is getting appeared under required column i.e. 'Reason by teacher'. But once I refresh the page, it disappears. Please let me know how to move ahead with this.
Please be noted that textarea should be editable till the time setStatus is selected as Pending.
Thanks in Advance..!!
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 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.
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/