Develop Reference

How to identify the row being edited for dynamically added rows?

Have a set of rows which are added dynamically. A row contains two dropdowns and three textfields and are student objects.
Following is my code :
<tr class="dynamicRow">
<div class="inputField">
<td><b><bean:message key="label.student.code" />:</b>
</td><td >
<logic:present name="studentList">
<html:select property="dgList[0].stuCreate"
styleId="stuSelect" >
<html:option value="">
<bean:message key="label.student.select.code" />
</html:option>
<html:optionsCollection name="studentform"
property="studentList" label="label" value="value" />
</html:select>
</logic:present>
</td>
</div>
...and 3 more fields like this.
My Requirement : When values are populated in the pop up with x number of rows and if I change any field value then how to identify that row has been edited and get the field value before and after editing to update in database? Kindly help.
Code that worked: onchange() called for each field in that row. Means for one row just to check if the value has been changed onchange() is called 5 times. Can this be optimised . Kindly help.

Not able to display number of rows in a table based on drop down or input field

I have a table with 'n' number of rows and by default i have set to display 10 rows in each page as the table is a paginated column.
I am now trying to include a text box where user can enter number of rows that has to displayed in each page as below:
<input type="number" min="1" max="100" ng-model="rowsperpage"/>
I have defined in my controller
$scope.rowsperpage = 10;
This is basically a smart table, trying to figure this out from past 3 hours and thought getting some help from you folks out there.
Please point me if am doing in wrong way, am pretty new to angular world.

Bind your property to st-items-by-page in st-pagination:
<table st-table="rowCollection">
...
<tfoot>
<tr>
<td>
<div st-pagination="" st-items-by-page="rowsperpage"></div>
</td>
</tr>
</tfoot>
</table>
for more info check:
http://lorenzofox3.github.io/smart-table-website/

Build my own autocomplete angularjs

Im trying to build my own search function with auto complete.
Search MAC:<br/>
<input type="text" ng-model="boxtext">
<tr ng-repeat="box in boxes | filter:boxtext">
<td>{{box.type}}</td>
<td>{{box.mac}}</td>
<td>{{box.serial}}</td>
</tr>
</table>
The problem I have now Is that all rows from boxes are printed out, and the filtered when I start typing In the text field.
I really don't know how to print out the rows from "boxes" when I start typing In the text field? Any suggestions?

You could simply add an ng-if to the preview table:
<input type="text" ng-model="boxtext">
<table ng-if="boxtetxt.length > 0">
<tr ng-repeat="box in boxes | filter:boxtext">
<td>{{box.type}}</td>
<td>{{box.mac}}</td>
<td>{{box.serial}}</td>
</tr>
</table>
This way the table is removed as long as boxtext.length > 0 is false. Note that boxtext has to be initialized to an empty string, or it will be null or undefined and will not have a length.

How to collect dynamic html from input fields using JavaScript

I have 16 table elements like,
<td id="test"> /Dynamic value appears here from JavaScript/ </td>
Where I put values from OnChange event, with this JavaScript
document.getElementById('test').innerHTML = value + " LT";
Now I want to know how to grab all input field values upon changing input field values in <td id="Test"> </td> , because in the other field I want to show total amount based on other fields.
----------------------------------------------------------update
I will ask other question from same opera.
How get value from input type="hidden" field, where value changed allways then user select new element on html ??

How to allow user to enter elements in an HTML table

I want to allow a user to enter a list of persons in a web application, and then submit them as one batch. Each row looks roughly like this:
<TR>
<TD> <INPUT name="person.fname"> </TD>
<TD> <INPUT name="person.lname"> </TD>
<TD> <INPUT name="person.birthdate"> </TD>
</TR>
The form starts out with a single row of blank inputs, and I want a fresh row added to the list whenever the user fills in any of the fields -- i.e. the list grows on demand. Likewise, I want a row to disappear whenever the user clears all fields in it.
What is the easiest, most robust and most maintainable way to implement this?
Finally, how do I submit this table of values back to the server? What is the preferred way to name each field so that the server can create a list of Person entities based on the entered values?

If you are familiar with jQuery, you can use the .change handler to catch them changing the field. Test to see if it's the last row and if there is data in it. If they have taken everything out of the row, remove it. jQuery has some great ways to do this, but it's all dependent on how you want to write it. If so, append the new row using jQuery's .append function. If you're using Python and cgi_app and you use the same name attribute for each type of cell, you can use form.getlist('fname[]') and it will return an array of the names.

What is the preferred way to name each field so that the server can create a list of Person entities based on the entered values?
You can do:
<TR>
<TD> <INPUT name="person[fname]"> </TD>
<TD> <INPUT name="person[lname]"> </TD>
<TD> <INPUT name="person[birthdate]"> </TD>
</TR>
Which generates array 'person'

JQuery is a good suggestion, but if you don't want to use it, you can try generating input name by appending an index. For example:
<TR>
<TD> <INPUT name="person_0.fname"> </TD>
<TD> <INPUT name="person_0.lname"> </TD>
<TD> <INPUT name="person_0.birthdate"> </TD>
</TR>
...
<TR>
<TD> <INPUT name="person_N.fname"> </TD>
<TD> <INPUT name="person_N.lname"> </TD>
<TD> <INPUT name="person_N.birthdate"> </TD>
</TR>
where "N" is the row index. This way may help you to easily get the entire whole row values by using (i.e.) $GET['person'.$i.'fname'], $GET['person'.$i.'lname']... and so on.

CSS:
input:not(:first-of-type){
display:none}
jQuery:
$('input').click(function(){
$(this).val('');
}).blur(function(){
if($(this).val().length>1){
$(this)
.toggleClass('processed')
.hide('slow')
.parents('#person').find('input:not(.processed):first').show('slow');
}
});
$('#person').prepend('Click on blank space to proceed<br/>');
HTML:
<tr>
<form id=person method=post action='/your_page_on_server'>
<td><input name="fname" value='Enter the first name'/></td>
<td><input name="lname" value='Enter the last name'/></td>
<td><input name="birthdate" value='Enter the birth date'/></td>
<td><input type=submit value='Submit'/></td>
</form>
</tr>
I'm not familiar with server-side scripting, so my answer in only partial. Here's an example.
Also, I recommend to add input validation by JS.