We Keep Coding

How to get one or more data when we do click in checkbox?

I have a problem , when i do click on one or select all , all data coming. But i need when I click on single checkbox then only that particular data should come.
html file
<div class="row">
<div class="col-md-12">
<h1>Student Information</h1>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class="button pull-right" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
Java script file
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
});
}
vm.selectedUsers = [];
vm.process = function() {
vm.selectedUsers.splice(0, vm.selectedUsers.length);
for (var i in vm.data) {
vm.selectedUsers.push(vm.data[i]);
}
}

This link may what your looking for : Angular Checkboxes “Select All” functionality with only one box selected initially
.

Visibility does not work

So I have content that is hidden. And using one button, I want to make it visible. But it doesnt work
<table style="visibility:hidden;" id="viewevade">
<tr>
<td class="form"width="25%">Period</td>
<td class="form"width="75%"> PeriodA </td>
</tr>
<tr>
<td class="form">Inbound Call Date</td>
<td class="form">Date</td>
</tr>
<tr>
<td class="form">Input Date</td>
<td class="form"> DateA</td>
</tr>
<tr>
<td class="form">Reviewer</td>
<td class="form">username</td>
</tr>
<tr>
<td class="form">Topic</td>
<td class="form">Topic A</td>
</tr>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
and I make a function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
to use it in
<button width="100%" onclick="ViewEva();">View Evaluation</button></td>
It doesnt work. Any help? Thanks b4

I created this as a codepen here:
http://codepen.io/anon/pen/pjZMrO
Using your function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
It seems to work fine. Do you have any errors in the JavaScript developer console of your browser?
EDIT: The form in the table contained an empty form post - this lead to the form being posted as it was displayed and the element appearing to show and immediately disappear.
<form action ="" method="post" onsubmit="">

I can think of two things.
You are not including your script
Your HTML is wrong and your browser goes bananas
Here you have a plunker working example
Note both the <script src='./script.js'></script> and the
<tr>
<td>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
</td>
</tr>
Your table cannot be direct child of the row, you have to put it in a column, and close the inner table

How to set background color for each column in table?

I have a table with four columns and two rows, 4th column have a button for each rows, now I want to change the background color in the second column of second row while click the button for each rows. Please let me know how to do this.
Here I have placed my code for your reference.
$(function(){
$('input').click(function(){
$('table').find('tr td:eq(1)').css('background-color', 'red');
});
});
HTML
<table border="1" style="border-collapse:collapse;">
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td><input type="button" value="button"></input></td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td><input type="button" value="button"></input></td>
</tr>
</table>

Find the tr containing the button using closest(), then find the second column using that
$(function() {
$('input').click(function() {
$(this).closest('tr').find('td:eq(1)').css('background-color', 'red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" style="border-collapse:collapse;">
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td>
<input type="button" value="button"></input>
</td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td>
<input type="button" value="button"></input>
</td>
</tr>
</table>

You don't need to use a heavy JavaScript / jQuery for this case. Instead you can use <col>:
<table border="1" style="border-collapse:collapse;">
<col style="background-color: #f00;" />
<col style="background-color: #0f0;" />
<col style="background-color: #00f;" />
<col style="" />
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td><input type="button" value="button" /></td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td><input type="button" value="button" /></td>
</tr>
</table>
Also note that you don't have </input> which might fail some code (eg. syntax highlighters).

Try this,
If you are aware of parent() in jquery then you can also try this,
$(function() {
$('input').click(function() {
$(this).parent().parent().find('td:eq(1)').css('background-color', 'red');
});
});
" $(this).parent().parent().find('td:eq(1)') " In this line of js, it will move to its parent tag twice, means $(this) is clicked input control and from that it will move to its parent tag twice to reach to its tag and from that position it will find the td at position 1. From here onwards you can do your color changing operation like shown in above js code.

Make current HTML row editable

In the screenshot, I want to be able to use the onClick event of the edit image to make the 5 proceeding text boxes of the same row editable. By default I have set them 'readonly'. I have looked for other solutions but I am not sure how to reference the current row.
<table class = "idtable" cellspacing="0">
<tr style="background-color:#999999;color:white">
<th width="200px" class="tablehead">Type</th>
<th width="200px" class="tablehead">Value</th>
<th width="200px" class="tablehead">State</th>
<th width="200px" class="tablehead">Status</th>
<th width="200px" class="tablehead">Entry Date</th>
<th width="100px" class="tablehead">Edit</th>
<th width="100px" class="tablehead">Delete</th>
</tr>
<tr style="text-align:center">
<td class="idtable-borderleft"><input id="idType" class="readonly" type="text" value="INSTSERVICES" readonly></td>
<td class="idtable-bordermid"><input id="idValue" class="readonly" type="text" value="1234 " readonly></td>
<td class="idtable-bordermid"><input id="idState" style="font-size:85%" class="readonly" type="text" value="UNMODIFIED" readonly></td>
<td class="idtable-bordermid"><input id="idStatus" class="readonly" type="text" value="Active" readonly></td>
<td class="idtable-bordermid"><input id="idStartDate" class="readonly" type="text" value="2015-03-17" readonly></td>
<td class="idtable-bordermid"><img onclick="editRow()" src="https://localhost:8443/xxxxx/images/edit.png"></td>
<td class="idtable-borderright"></td>
</tr>
<tr>
<td colspan="7"><input style="margin-left:50%; margin-top: 5px" type="submit" value="Update"></td>
</tr>
</table>

Don't use the onClick tag.
Attach to the click event using jQuery, then traverse the DOM to find the row and finally manipulate the input tags.
In this example, I assume that you added a class of btnedit to the image:
$('.idtable .btnedit').click(function(){
var row = $(this).closest('tr'); //find the parent row
var inputs = $('input', row); //find all the inputs inside the row
inputs.prop('readonly', false); //change the attribute
});
Fiddle: http://jsfiddle.net/o26q8w6j/

You need to use something like jQuery editable.
Try double clicking text in below demo
http://www.appelsiini.net/projects/jeditable/default.html
You need to fire ajax call to update data in database.

How to close a jquery dialog box when a submit button is clicked(Submit button is residing inside the dialog box)

i have struts2 form inside a jquery dialog box, when i submit my form inside that dialog box my Struts2 action is performing but that pop up jquery dialog box is not closing.
How can i close that dialog box when![enter image description here][1] i submit my form?
<table>
<tr>
<td>
<td align="center" >
<sj:head jqueryui="true" jquerytheme="cupertino" />
<sj:dialog
id="mybuttondialog"
autoOpen="false"
showEffect="fadeIn"
hideEffect="fadeOut"
modal="true"
title="Rename"
>
<s:form action="EditDayActionUserTemplate" id="formId323">
<table style="height:48px;width: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2" align="center">
<input type="hidden" name="dayId" value="<%=daycont%>"/>
<input type="hidden" name="workoutId" value="<%=trid%>"/>
</td>
</tr>
<tr>
<td width="50%" align="right"><font size="6px">Date</font></td>
<td width="50%"> <sj:datepicker id="datghfe4" name="date" value="%{#parameters['date']}" label="Select Date" appendText=" (dd.MM.yy)" displayFormat="dd.M.yy"/></td>
</tr>
<tr>
<td> </td>
<td align="right"><sj:submit formIds="formId323" id="sdfdss3" button="true" value="Rename" targets="rightmiddiv"></sj:submit></td>
</tr>
</table>
</s:form>
</sj:dialog>
<sj:submit
openDialog="mybuttondialog"
value="Rename"
button="true"
/>
</td>
</tr>
</table>

Whenever you need to close the dialog box (programmatically I suppose) call the dialog method with argument close. Like this
$('#mybuttondialog').dialog('close');
Check this page for more info.