Take the closest sibling data using javascript - javascript

Below is the table having class as select_fly for td, i want complete html of td with class select_fly.
<table>
<tr>
<td width="5%"><input type="radio" name="onward" class="onward" value="1" checked></td>
<td class="select_fly">
<div class="disp_trip">
hai
</div>
</td>
</tr>
</table>
Below is the script which i wrote for taking the html data. But do no wats wrong in this code its showing undefined. Please help me out with this !!!!
var owner = $('input[name=onward]:checked').closest('td').siblings('td.select_fly').html();

I suppose that you are placing your script in the wrong place in code. Put it after the table tag, it worked for me in this way.

Related

how to force the user to write correctly in HTML input

I have this HTML code in my JSP
<table>
<tr>
<td width="50%" > type your article :
</td>
<td width="50%">
<input type="text" name="article" size="50"/>
</td>
</tr>
</table>
I have in MYSQL database a table 'article' in which i have a column 'designation' , I want to propose a choice of 'designation' to the user according to what is being written.
note: i can not use a dropdownlist because i have more than 1000 designations
Thanks in Advance.
I think you can solve the problem using JQuery Lookup.

Dynamically adding table rows in js, sum up an input values

Hey guys I have a question and I'm looking for help to change this code a lil bit cause I'm struggling to do this for the last hour and I can't seem to figure it out how to change it.
This script works exactly how I want it to be. I can add an input field, I can delete input field and what's the most important it sum up all values.
https://jsfiddle.net/btxjkgr4/3/
What I need is to change this script that It can instead of creating div's, create next table rows with 3 columns to fit this table and sum up all values from 3rd column in each row
<table class="table" id="tab_klasa1">
<tr>
<th class="tg-031ec" colspan="3">Class</th>
</tr>
<tr>
<td class="tg-031ec">Name</td>
<td class="tg-031ec">Profile</td>
<td class="tg-031ec">No. Users</td>
</tr>
<tr>
<td class="tg-031e">A</td>
<td class="tg-031e"><input class="input_t4" type="text" name="fname"></td>
<td class="tg-031e"><input class="input_t4" type="text" name="fname"></td>
</tr>
<tr>
<td class="tg-yw4lcr" colspan="2">Total:</td>
<td class="tg-yw4l"><input class="input_t4" type="text" name="fname"></td>
</tr>
</table>
I applied table in this jsfiddle. I'd really appreciate for help.

Jquery get different input hidden value to a link

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

Where do you put the form element if you have editable rows of a table in AngularJS?

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

Inserting an Image in a specific place using jquery

My html code generated from apex
<tr>
<td class="labelCol">
<label for="login_page:signup_form:pb2:j_id5:j_id12">Contact Name</label>
</td>
<td class="dataCol ">
<input name="login_page:signup_form:pb2:j_id5:j_id12" value="" type="text">
</td>
</tr>
I want to insert an image between the the two td .
You can use insertAfter():
$('<td><img src="src.jpg" /></td>').insertAfter("td.labelCol");
Hey Try insertbefore()
$('<img src="src.jpg"></img>').insertBefore(".dataCol");
Hope it helps you
Well, if you are planning to insert an image between the the two td,
First put a td also, as it's a table structure and then add image there.
$('<td><img src="img.jpg"></img></td>').insertAfter('.labelCol');

Categories