html:
<tr id="head-58">
<td style="width:150px;">
<input type="button" name="delete" class="delete_person" value="58" />name<button type="button" style="margin: 1px 35px 5px;" name="delete" value="58" class="delete_icon button_style">Delete</button>
</td>
<td>
<input type="checkbox" name="first_aid" id="id_first_aid" />FirstAid
</td>
<td>
<input type="checkbox" name="sick_bay" id="id_sick_bay" /Sick bay
</td>
<td>
<input type="checkbox" name="ambulance" id="id_ambulance" />Ambulance
</td>
</tr>
Here onclicking the delete_person class,i want to show the hidden button with class delete_icon.Since class delete_icon can have more than one,i need to show the hidden button form clicked element.I tried with $this.closest('tr').find(".delete_icon").toggle(); which is not working.
Use:
$this.parents('tr').find(".delete_icon").toggle();
Your delete button is not a child of tr. Move it into tr, or use:
$(this).closest('tr').next('.delete_icon')
There is no $this variable unless you create it yourself. this refers to the target of the event, so use it in the jQuery function to create a jQuery object containing it:
$(this).closest('tr').find(".delete_icon").toggle();
However, you also need to move the button inside the table row for that to work. Now it looks like it's inside the table but outside any table cell, which is invalid HTML. (Some browsers may put it inside some table cell, other may move it outside the table entirely. The result is unpredictable, so unless you move the button inside a cell, it's not possible to write code that accesses it.)
Since the button is after the <tr>...</tr>
Use:
$(this).parent().next().toggle()
Related
Consider this http://jsfiddle.net/99CL3/224/, Which adds rows on click
HTML
<br /><br />
<table id="tbl">
<tr>
<td><input type="text" name="links" /></td>
<td><input type="text" name="keywords" /></td>
<td><input type="text" name="violationtype" /></td>
<td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>
</tr>
</table>
JS
function addField(n)
{
var tr = n.parentNode.parentNode.cloneNode(true);
document.getElementById('tbl').appendChild(tr);
}
I'm trying to understand why this code which adds rows on click actually works.
First I realize that it will take what I click (the input), and go two parent nodes above it.
so the first .parentNode points to td, and the next to tr. So basically we are making a table on click with these new properties. Now my question is basically what is the role of .cloneNode(true) here? I have read mozilla documentation, but I can't really understand from their example. Why can't I just append n.parentNode.parentNode right away?
Each element is unique. if you don't clone the element then the element is moved to the target location. So using clone here is necessary for creating another row.
.cloneNode(true) duplicate the selected [tr] tag, if you remove it, your code however works but its behavior is different because the [tr] you selected already belongs to your table.
By the way, you should change name/id of cloned row's input, to make them unique.
p.s: your jsfiddle has only one parentNode, instead of two.
I have a table with tr that have this pattern
<tr>
<td width="37" align="left"></td>
<td width="200" align="left">
<input type="submit" name="s1" onclick="ChangeThis(this);" value="Update Color" id="s1" class="btn-blue">
<input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
</td>
<td width="340" align="center">
<input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
</td>
<td class="hide"></td>
</tr>
What I want to do is onclick on this button which will have the same sequence matching the input example button id=s1 input id =info1
I want to change the background color. I prefer jquery or javascript is fine. I thought about the regex with starting with .. ^ ..
function ChangeThis(x) {
$(this).closest('td').find('input[type="text"]').css('backgroundColor', 'Yellow');
}
That doesn't work, I tried tr instead of td
UPDATE/EDIT
So Essentially what I want is that When the button is clicked that there are predefined things to change in the text
Font Color
Bold or not
Background Color
UPDATE
Ok, I think I understand what you'd like.
Let me know if this fiddle solves it:
https://jsfiddle.net/14ymd0pd/
Based on your description, I'm a little confused as to what you'd like.
I've created a JSFiddle with what I think is the intended functionality.
https://jsfiddle.net/tvu08yrm/
The main differences involved separating out the JavaScript, using the jQuery on event handler:
$('.color-btn').on('click', function(){
adding a new class (color-btn) so the buttons could be targetted and changing the functions which trraverse the DOM Elements.
A couple of notes:
You should not be using inline JavaScript. I've separated out the JavaScript in my fiddle.
Since I can only see a small section of code it's hard for me to say, but if the page isn't going to be displaying tabular data then don't display it in a table...use a div or ul or another relevant element, just not a table.
I haven't done it in my fiddle, but you should also move the inline css out of the markup and into an external css file.
The JavaScript is dependant on the structure of the table, if you change its structure you'll also need to update the jQuery selectors. This can be avoided by following a naming convention in the table rows and using these to target the appropriate elements instead of their relative positions.
Let me know if the fiddle answered your question :)
There are many solutions to get your code working.
First solution: use x instead of this inside the function
pro: code works
contra: bad coding style and you should not use inline javascript.
Second solution: change onclick="changeThis(this)" to onclick="changeThis.call(this)"
pro: the code works, and you can use this in function context
contra: you use this in function context... there are only a few situation to do that. this is not such a situation. and again: inline-javascript
Third solution: don't use onclick.
<tr>
<td width="37" align="left"></td>
<td width="200" align="left">
<input type="submit" name="s1" value="Update Color" id="s1" class="btn-blue">
<input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
</td>
<td width="340" align="center">
<input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
</td>
<td class="hide"></td>
</tr>
$('input:submit[name="s1"]/* or a different selector... depends on your logic */').click(changeThis);
you should use the third one.
I've researched about this for a while now but I haven't really gotten my head wrapped around it as an amateur in design. How do make my following markup editable after after the user clicks on the 'Edit' button I had created. So here it is:
<div class='wrapper'>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table>
<tbody>
<tr><td><p class='leftspacing'>Cellphone Numbers</p></td><td><p>072 215 3372</p></td>
<tr><td><p class='leftspacing'>Phone Numbers</p></td><td><p>011 310 9967</p></td>
<tr><td><p class='leftspacing'>email address</p></td><td><p>s.nyama9#gmail.com</p></td>
</tbody>
</table>
<button>Change</button>
</div>
I wanna be able to change only the Cellphone Numbers etc. by just pressing the Edit button I had created. I'm using php, I just did that markup for design purposes. And I want the button to change from 'Change' to 'Done' while the user is still editing their details. So, the info is only readable before you click on the Edit button and it changes to 'Done' after the user had clicked it
You can put those values in inputs but it's look like regular content using readonly attribute and css, and just toggle class and the attribute.
$('#edit').click(function(){
$('#form').toggleClass('view');
$('input').each(function(){
var inp = $(this);
if (inp.attr('readonly')) {
inp.removeAttr('readonly');
}
else {
inp.attr('readonly', 'readonly');
}
});
});
.view input {
border:0;
background:0;
outline:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table id="form" class="view">
<tbody>
<tr>
<td>
<p class='leftspacing'>Cellphone Numbers</p>
</td>
<td>
<p><input type="text" value="072 215 3372" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>Phone Numbers</p>
</td>
<td>
<p><input type="text" value="011 310 9967" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>email address</p>
</td>
<td>
<p><input type="email" value="s.nyama9#gmail.com" readonly/></p>
</td>
</tr>
</tbody>
</table>
<button id="edit">Change</button>
There are a number of different ways you can do this, but the "classical" way would be to put the values in <input/> tags with IDs that are styled to be transparent. Wrap the whole table in a form, then use JavaScript when the user clicks the button to remove a disabled property from each of the input fields and change the button label. The second click of the button would then be validation and/or a form submit. The easiest way to keep track of which is the first and second click would be to compare text, but you might want to just set a variable on the element instead. Try here for a good starting point on pure-Javascript form submission or here for JQuery. This is a Stack-Overflow question about making input fields transparent.
I making a context menu and it almost done, just left this problem for me, but i have no idea to do this:
This is the JS Fiddle
Get different value from input hidden to a single link, because I want to pass it into a controller action
<table>
<tr>
<td class="element">im here
<input type="hidden" id="theid" name="theid" value="1"/>
</td>
</tr>
<tr>
<td class="element">im there
<input type="hidden" id="theid" name="theid" value="2"/>
</td>
</tr>
<tr>
<td class="element">im where
<input type="hidden" id="theid" name="theid" value="3"/>
</td>
</tr>
</table>
<div type="context" class="menu"> // link
<label class="menuitem">Cancel this app</label>
</div>
I want to pass the value to theid , for example when right click im here the link should get the hidden value = 1 and so on, any suggestion to do that ? Thanks
The mouse event object contains the target you were clicking on. So you can access that, pass it to jQuery and do whatever you want with it, eg. accessing the ID of the input.
$(e.target).find('input').attr('id');
And as the other commentators, I'm hoping that your IDs are different ;)
Edit: I re-read your question, you just want the value. So you don't need the ID theid in your markup overall (for this usecase). Getting the value from the clicked element:
$(e.target).find('input').val();
And working, see the alert(): See this jsfiddle
We have a table(A) and we want a specific row to become editable on click. Currently we have a directive that inserts a new table into the td of table(A) where it is called. We do this so we can use the <form> element around the table.
uneditable-table.html
<table>
<tbody>
<tr>
<td ng-show="editing" class="editing" colspan="2">
<div edit-form-directive
model="thing"
on-success="thingUpdated(thing); editing=false;"
on-cancel="editing=false; setUpdating(false);"
enabled="editing" />
</td>
</tr>
</tbody>
</table>
edit-template.html inserted via the editFormDirective
<form ng-submit="save(thingCopy)" name="EditForm">
<table>
<tbody>
<tr>
<td>
<input ng-model="thing.field1"/>
</td>
<td>
<input ng-model="thing.field2"/>
</td>
</tr>
</tbody>
<table>
</form>
Question:
We have tried putting the <form> element around each row to be editable, and this works, however, this is not semantically correct with the <form> around a <tr> within a table.
We also considered putting the <form> around the entire table in uneditable-table.html. This causes a form validation issue, where we may have many errors per non-unique form node, so we would have to index the nodes to get specific errors.
We settled on the code as it is here, with having the <form> element around a whole new table (in edit-template.html) and inserting that into a <td>, as this seemed the least harmful.
We do have to have the form tag so we can access validation based on the form name and nodes.
Is there a more Angular (or elegant) way to do this?
Thank you!
Angular way. Form tag isn't needed:
<table ng-form="EditForm">
...
</table>
http://docs.angularjs.org/api/ng.directive:ngForm