I have a table where I have multiple values in cells and columns. When the user clicks anywhere on a TD cell I want it to:
become a textarea
paste the current text into the textarea
put a cancel button under it
once the cancel button is pressed, I want everything to change back as it was before
ability to do it again and again from Point #1
Here is my attempt:
HTML:
<table style="border: 1px solid black;text-align: center;" id="tb">
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;width:200px;height:100px;">
<div class="id1">TEST1</div>
</td>
<td style="border: 1px solid black;width:200px;height:100px;">
<div class="id2">TEST2</div></td>
<td style="border: 1px solid black;width:200px;height:100px;">
<div class="id3">TEST3</div></td>
</tr>
</table>
jQuery:
var t = '';
var prevHtml = '';
var thisElement = '';
$(document).on('click', '#tb td', function()
{ prevHtml = $(this).html();
thisElement = this;
if ($(this).attr('data-status') == 'active'){return;};
$(this).attr('data-status', 'active');
t = $(this).text();
$(this).html('<div class="row custom-status-main"><div class="col-md-12"><textarea maxlength="2000" rows="3" class="form-control" style="font-size: 12px;width: 80%;resize:vertical;">'+t+'</textarea></div></div><div class="row" style="margin-top:5px;"<div class="col-md-6"><button class="btn btn-xs btn-grey cancel-btn">Cancel</button></div></div>');
});
$(document).on('click', '.cancel-btn', function()
{
$(thisElement).html(prevHtml);
$(thisElement).removeAttr('data-custom-status');
});
This is my fiddle: https://jsfiddle.net/vsauhkfk/1/
My attempt is working for Point #4 but then it seems like nothing happens when clicking on the TD. What am I missing here?
You were almost there. You had 1 typo and 1 thing missing in your Cancel function that was causing you problems.
You had:
$(thisElement).removeAttr('data-custom-status');
It should be:
$(thisElement).removeAttr('data-status');
You were adding the 'data-status' attribute to the element but never removing it.
Also you need to add the stopPropagation() call in your cancel method. Otherwise your click on the cancel button will run your cancel method but the click event will propagate up the DOM to the TD element again and re-trigger your td click.
Here's the code for your cancel function:
$(document).on('click', '.cancel-btn', function(e)
{
$(thisElement).html(prevHtml);
$(thisElement).removeAttr('data-status');
e.stopPropagation();
});
See the working fiddle here: https://jsfiddle.net/vsauhkfk/2/
Related
When you click on my td the hidden div will display over the top of it and the div will be made contenteditable but I want the mouse cursor to appear in the so after a single click I can start typing. Currently you need to click twice -- once to focus, and again to place the cursor.
Please don't worry about why I'm doing it this way, I've just stripped my code down to the essentials to isolate this problem.
$(document).ready(function() {
$("td").on("mousedown", function() {
var cellOffset = $(this).offset();
$('#cellSelect').offset({ top:cellOffset.top-1, left:cellOffset.left-1 });
$('#cellSelect').show(0);
$('#cellSelect').attr('contenteditable','true');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="cellSelect" style="display:none;position:absolute;border: 2px solid blue;width:91px;height:91px"></div>
<table border="1" cellpadding="10" width="100" height="100">
<tr>
<td id="1-1"></td>
</tr>
</table>
Call focus on the element.
You'll need to wrap the focus call in a setTimeout to ensure that the element is editable before focusing, otherwise you won't be able to type.
$(document).ready(function() {
$("td").on("mousedown", function() {
var cellOffset = $(this).offset();
$('#cellSelect').offset({ top:cellOffset.top-1, left:cellOffset.left-1 });
$('#cellSelect').show(0);
$('#cellSelect').attr('contenteditable','true');
setTimeout(() => $('#cellSelect').focus(), 0)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="cellSelect" style="display:none;position:absolute;border: 2px solid blue;width:91px;height:91px"></div>
<table border="1" cellpadding="10" width="100" height="100">
<tr>
<td id="1-1"></td>
</tr>
</table>
When the edit function is triggered the td with id "promo1" changes its html to show the options save delete rule and cancel. cancel is in an a tag with an onclick function called "cancel()". When clicked this should revert the td tag "promo1" back to the image set. However this doesnt work when the onclick is coming from the cancel a tag in the td tag "promo1" but it works when the cancel() function is triggered from the Cancel Button, any clues as to why this is occurring and fixes?
function edit(stringID){
console.log (stringID);
var id = '#promo' + stringID;
$("#promo1").html("<div style='width:200px'><a onclick='save()' style='margin-right:10px'><b>Save</b></a> <a onclick='save()' style='margin-right:10px'><b>Delete Rule</b></a> <a onclick='cancel()'><b>Cancel</b></a><div>");
}
function cancel() {
$("#promo1").html("<img src='dist/img/editButton.png'>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr style="border-bottom: 1px solid #f4f4f4;">
<td data-field="margin">15%</td>
<td data-field="promo">Promotion Role 1</td>
<td id="promo1" onclick="edit('1')" style="float:right"><img src="dist/img/editButton.png"></td>
</tr>
</table>
<button onclick="cancel()">Cancel Button</button>
I think this is what you are looking for:
function edit(stringID){
console.log (stringID);
var id = '#promo' + stringID;
$("#promo1").html("<div style='width:200px'><a onclick='save()' style='margin-right:10px'><b>Save</b></a> <a onclick='save()' style='margin-right:10px'><b>Delete Rule</b></a> <a onclick='cancel()'><b>Cancel</b></a><div>");
}
function cancel() {
$("#promo1").html("<img src='dist/img/editButton.png' onclick='edit(1)'>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr style="border-bottom: 1px solid #f4f4f4;">
<td data-field="margin">15%</td>
<td data-field="promo">Promotion Role 1</td>
<td id="promo1" style="float:right"><img src="dist/img/editButton.png" onclick="edit(1)"></td>
</tr>
</table>
<button onclick="cancel()">Cancel Button</button>
Use onclick event on <img> instead of <td> and also include onclick='edit(1)' in your cancel(). Rest of your code works fine.
I currently have a button that when I press it a table appears below it. My first question that I can't figure out is that I cannot get a border although I specified border="10". I am using firefox. Next I cannot figure out how to when I am done with my table to be able to press the button and have the table be hidden. My third question is that this table is being written as a test to see the state of my variables and parameters in my jsp are what I think they are. In my third cell of my table where I have just docs I want the the current value on the page of getDocs(). If I put it in the getDocs() then it gives me the result on page load which would be null. But in my showDiv() method when I run my debugger it shows the correct value of getDocs in the var docs = getDocs();. How do I get the docs value in docs.
window.onload = function()
{
document.getElementById("button").onclick = showDiv;
}
function showDiv()
{
document.getElementById("hidden").style.display = "block";
var docs = getDocs();
}
<input type="button" id="button" value="Click to show states" onclick="showDiv()"/>
<div id="hidden" style="display:none">
<table border="10" style="width:300px">
<tr>
<td>Type</td>
<td>Object</td>
<td>value</td>
</tr>
</br>
<tr>
<td>Element 1</td>
<td><%=docs%></td>
<td>docs</td>
</tr>
</table>
</div>
For the border issue, what happens if you put the border definition in the style declaration:
<table style="width:300px;border:1px solid black;">
For showing / hiding, a simple toggler can be put into the showDiv() call. Try:
function showDiv() {
if (document.getElementById('hidden').style.display == 'block') {
document.getElementById('hidden').style.display = 'none';
}
else {
document.getElementById('hidden').style.display = 'block';
}
}
Need more code examples and explanation to work on the Docs issue.
1) border is a css style attribute, so apply it in the css file.
#foo (yourid)
{
border: 10px;
}
2) you will have to create the button and create a onClick() function (JavaScript). This function will retrieve the table (possible by id) then change the display to none
var table = document.getElementById("foo);
table.style.display = none;
3) Not to sure about this one.
I'm not sure I will answer to each question here, but here you go anyway : http://jsfiddle.net/bbtVH/8/
You just need this javascript, since you use the HTML attribute onclick on your button, no need to add a listener in window.onload :
function showDiv() {
var table = document.getElementById("hidden");
if (table.style.display !== "block"){
table.style.display = "block";
// Just get docs from JSP, if you want to get its value :
// var docs = <%=docs%>;
}
else {
table.style.display = "none";
}
}
This CSS will give you borders of 2px around your cells :
td{
border: 2px solid black;
}
for your border :
<table border="10" style="width:300px border: 5px solid red; display:none">
to hide the table :
$("#hidden").fadeOut("slow");
or to see it :
$("#hidden").fadeIn("slow");
the get the values from docs:
docs.val()
I have a table that has 3 columns. In the first column I have a button and I want to check if the second column has a div of not. I am not trying to do this using jQuery.
This is my html
<table class="customFiltersTable" id="customFiltersTable" width="100%" style="background-color: #75A1D0; padding:10px 10px 10px 10px">
<tbody>
</tbody>
</table>
The (dropdown menu) button is generated dynamically inside the 1st column. Here is the script
//create a tr and 3 td inside it then append tr
var fType1 = $('<tr class="rowTableFilters" id="rowFilters'+filtersRow+'" name="rowFilters'+filtersRow+'"><td class="colFilters" id="colFilters'+column1+'" name="colFilters'+column1+'" width="480px" align="center" columnNum="'+column1+'"></td><td class="colFilters" id="colFilters'+column2+'" name="colFilters'+column2+'" width="480px" align="center" columnNum="'+column2+'"></td><td class="delButton" id="delButton" name="delButton" width="40px" align="center"><button type="button" class="btn btn-link" id="deleteFilter'+filtersRow+'" name="deleteFilter'+filtersRow+'" style="float: right;">Del</button></td></tr>');
$("#customFiltersTable").append(fType1);
// create the dropdown menu button in the 1st column along with the list (li)
var fType = $('<div class="btn-group" style="padding: 5px; width: 70%;"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 100%;">Select Filter <span class="caret"></span></button><ul class="dropdown-menu" role="menu" style="width:100%" data-userid="'+(intIdFilters-2)+'" id="filUl'+(intIdFilters-2)+'" currData-value="-1"></ul></div>');
$("#colFilters"+(intIdFilters-2)).append(fType);
$("#filUl"+(intIdFilters-2)).append(li); // li is list already generated.
so the if statement I am using (which not working) is this
$('#customFiltersTable').on('click', '.dropdown-menu li a', function () {
if($(this).closest('td').next('td').find('div').length){
...
}
});
Any idea please?
I believe you could use jQuery's has() method to achieve this:
if($(this).closest('td').next('td').has("div")) {
// It contains a <div> element
} else {
// It doesn't contain a <div> element
}
Edit:
Your code looks good. Try removing the 'td' in the next() function.
var $td = $(this).closest('td').next();
if ($td.find('div').length > 0) { //div exists }
I have a selectbox with three options. When a user selects one of the three options, I want a specific div to appear below it. I am trying to write the code that dictates which specific box is to appear when each of the three options is selected. So far, I have only worked on the code that pertains to the first option. However, whenever the user selects any of the three options from the selectbox, the function for the first option is triggered and the div is displayed.
My question is two part:
1) How do I write a conditional function that specifically targets the selected option
2) What is the best way to accomplish what I have described above; How do I efficiently go about defining three different functions for three different options in a select box?
Here is the function I was working on for the first option:
$(document).ready(function(){
var subTableDiv = $("div.subTableDiv");
var subTableDiv1 = $("div.subTableDiv1");
var subTableDiv2 = $("div.subTableDiv2");
subTableDiv.hide();
subTableDiv1.hide();
subTableDiv2.hide();
var selectmenu=document.getElementById("customfields-s-18-s");
selectmenu.onchange=function(){ //run some code when "onchange" event fires
var chosenoption=this.options[this.selectedIndex].value //this refers to "selectmenu"
if (chosenoption.value ="Co-Op"){
subTableDiv1.slideDown("medium");
}
}
});
Html:
<tr>
<div>
<select name="customfields-s-18-s" class="dropdown" id="customfields-s-18-s" >
<option value="Condominium"> Condominium</option>
<option value="Co-Op"> Co-Op</option>
<option value="Condop"> Condop</option>
</select>
</div>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condominium" class="subTableDiv">Hi There! This is the first Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Co-Op" class="subTableDiv1">Hi There! This is the Second Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condop" class="subTableDiv2">Hi There! This is the Third Box.</div>
</td>
</tr>
You can use selectmenu.value (or $(selectmenu).val()) to get the value of the selected option, and you can match the functions to the values using an object. Example:
$(function() {
var call_table = {
'Condominium': function() {alert('One!');},
'Co-Op': function() {alert('Two!');},
'Condop': function() {alert('Three!');}
};
$('#customfields-s-18-s').change(function() {
call_table[this.value]();
});
});
Of course, you don't have to define the functions inline. I just did it for concision here. You could define them anywhere and reference them by name instead.
I think you can get this using the position of the item in the list and the table, as long as those relative positions are the same. Change the class on the DIVs so they are all subTableDiv.
$(function() {
$('#customfields-s-18-s').change( function() {
var selected = $(this).find('option:selected');
var position = $(this).find('option').index(selected);
// hide all then show the nth one
$('.subTableDiv').hide().eq(position).show();
});
});
It looks like the select option values are the same as the IDs for the divs. You could use that to define a function that basically shows the div that has the same id as the value of the selected option. Also change the class on each div to subtableDiv.
$("#customfields-s-18-s").change(function() {
// hide all divs
$('.subtableDiv').hide();
// show matching div
var value = $(this).val();
$('#' + value).show();
}