When the checkbox is checked, insert numbering on table td - javascript

<td>
<apex:inputfield value="{!child.Confirm_Order__c}" />
</td>
//checkbox
<td>
<!-- <apex:panelGroup rendered="{!child.Confirm_Order__c==true}">-->
<apex:inputfield value="{!child.Order_numbering__c}" id="getindex" />
//text field
<!-- </apex:panelGroup>-->
</td>
<apex:commandButton value="Save" action="{!Save}" onclick="insert_numbers()" />
Html:
<table>
<th><td>Checkbox value</td><td>Inputfield value</td></th>
<tr>
<td>true</td><td>1</td>
<td>false</td><td></td>
</tr>
<tr>
<td>true</td><td>2</td>
<td>false</td><td></td>
</tr>
</table>
Javascript :
<script>
function insert_numbers() {
$("[id$=getindex]").each(function(index) {
$(this).val(index + 1)
})
}
</script>
Currently it is working fine. It inserts a number for every td.
I want to modify this in such a way that when a checkbox is checked, numbers are inserted in input field td as 1, 2, 3... (I want to insert number to those td checkbox was checked .remaining as blank)
(or)
I won't show input field td whenever checkbox is not checked. Then I want to do number to those td with input field visible.
Currently it is not inserting if td is not avaliable in middle of the row.
How I can do this?

Related

disable radio buttons of a particular column in a table

I have a table of radio buttons as shown in the below picture and if the user checks one radio button then that selected radio button column should be disabled and the user can check only one radio button in a row and for this, I have given the same name to the radio buttons of each row so that user can select only one radio button for a row. now the problem is that I am unable to disable the radio button of the checked column. I have used checked and selected interchangeably. any help is very much appreciated. thank you.
table of radio buttons
<table>
<tr>
<th *ngFor="let heading of columnHeadings[selectedScenario]">
{{heading}}
</th>
</tr>
<tr *ngFor="let i of [0,1,2,3];">
<td *ngFor="let loop of columnHeadings[selectedScenario]">
<input type="radio" name="{{i}}"> Correct
<input type="radio" name="{{i}}"> Partial
</td>
</tr>
</table>
You have to track from which row you are selecting a radio button and then disable it.
HTML:
<table border="1px">
<tr>
<th *ngFor="let heading of columnHeadings[selectedScenario]">
{{heading}}
</th>
</tr>
<tr *ngFor="let i of iterables;">
<td *ngFor="let loop of columnHeadings[selectedScenario]">
<input [disabled]="disabledRows[i]" type="radio" name="{{i}}" (change)="disableRow(i)"> Correct
<input [disabled]="disabledRows[i]" type="radio" name="{{i}}" (change)="disableRow(i)"> Partial
</td>
</tr>
</table>
TypeScript:
selectedScenario: string = "scenario";
iterables = [0,1,2,3];
disabledRows = this.iterables.map(m => false);
columnHeadings = {
scenario: [
"Most Effective Response",
"Second Most Effective Response",
"Trird Most Effective Response",
"Least Effective Response"
]
};
disableRow(index: number) {
this.disabledRows[index] = true;
}
Working solution at Stackblitz.
I suppose that you don't want disable the columns, only need that an option is not selected in the same column, else early you get into a situation when you can not select any value
For this, give values to the radiobuttons and use an array to store the values
values=[]; //declare an empty arrays
<tr *ngFor="let i of [0,1,2,3]">
<td *ngFor="let loop of columnHeadings[selectedScenario];let j=index">
<input type="radio" name="{{i}}" [ngModel]="values[i]"
(ngModelChange)="change($event,i)" [value]="j" > Correct
<input type="radio" name="{{i}}" [ngModel]="values[i]"
(ngModelChange)="change($event,i)" [value]="10+j" > Partial
</td>
</tr>
See that values get the column selected (0,1,2,3) if you select correct and 10 + the column selected if you choose partial (10,11,12,13) (e.g. a value of 12 indicate that you choose the "Trird Most Effective Response partial" and a value of 1 indicate you choose "Second Most Effective Response correct")
The function "change", give value to this.values[index] and loop over "values" making null a value if is in the same column
change(value,index)
{
this.values[index]=value
this.values.forEach((x,i)=>{
if (i!=index && x%10==value%10)
this.values[i]=null
})
}
The stackblitz
Try to add checked disabled to your radios like this:
<input type="radio" checked disabled name="{{i}}">

Delete a table row if its unchecked jquery

i am using a table each row contains a check box while i submit i want unchecked row to be disabled this is how i tried i created a table and row which contain a input type checked if the input type unchecked means i want to disable that row so while i retrieve in mvc i can get the details
<table id="subjectTable">
<tbody><tr><input type='checkbox' name='subjectcheck' /></tr></tbody>
</table>
$("input:not(:checked)").each(function () {
$(this).closest('tr').attr("disabled", "true");
});
this how i tried can any one help
If you want to simply remove the <tr>, you can use the jQuery methods .closest() and .remove() :
Select your inputs with $('input:not(:checked)')
Find the closest <tr> with .closest('tr')
Remove them with .remove()
PS: Keep in mind you have to have a <td> inside your <tr>, otherwise your <input> will be placed outside of your <table>.
$('button').on('click', function(){
$('input:not(:checked)').closest('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="subjectTable">
<tbody>
<tr><td><input type='checkbox' name='subjectcheck' /></td></tr>
</tbody>
</table>
<button>Emulate submit !</button>
To remove the parent tr of unchecked tr try .parent() and .remove() like the following way:
$("input:not(:checked)").each(function () {
$(this).parent('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="subjectTable">
<tbody>
<tr>
<input type='checkbox' name='subjectcheck'/>
</tr>
</tbody>
</table>

jQuery Select Checkbox When Text Exists, Hide Unselected Rows from Print

I have a dynamically generated table that contains a checkbox for each row, some data, and a text input field.
I want to automatically check the checkbox for a selected row once text is entered in that row's textbox. Finally, when the 'Finish' button is pressed, I want any unselected rows to be hidden from printing. Final output will be the table containing only the selected rows (i.e. those with a check in the checkbox) and their values.
Here's the css print class to hide the unselected rows:
<style type="text/css" media="print">
.grid .hidden tr {
display:none;
}
</style>
Here's the HTML:
<table id="data" class="grid">
<thead>
<tr>
<th> </th>
<th>Part Number</th>
<th>Description</th>
<th>Qty to Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check"></td>
<td>1234</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>3454</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>6787</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
</tbody>
</table>
<button id="clicker">Finish</button>
Finally, here's the jQuery. This is selecting all the checkboxes when text is entered in a text field, not just the one for that row (which I don't understand), and not assigning the "hidden" class to the rows without a checkbox - the class is not being assigned at all.
$(document).ready(function() {
//Check for input in text field
$('#data > tbody > tr').each(function() {
$(".inputData").change(function() {
if ($(this).val().length > 0) {
$(".check").prop("checked",true);
} else {
$("tr").addClass("hidden");
}
});
});
$("#clicker").click(function() {
window.print();
return false;
});
});
</script>
My logic in constructing this was to make sure we're only selecting rows in the table with an id of data. The first function will iterate over each row looking at the text field, and if the length of that field is greater than 0, check the box. Otherwise, assign the class of "hidden", which will prevent it from printing. Finally, simply assign a click event to the button.
Any help is greatly appreciated.
Here's a jsFiddle
This checks or unchecks the appropriate box based on whether the input has a value:
$(".inputData").on('input', function () {
var checkbox= $(this).closest('tr').find('[type="checkbox"]');
checkbox.prop('checked', $(this).val());
});
It doesn't need to be within an each() method.
This hides all rows in which the checkboxes are not checked:
$('[type="checkbox"]:not(:checked)').closest('tr').hide();
It makes sense to put that within the $("#clicker").click() function.
Updated Fiddle

How to get a value of the closest td with class on button click?

I have table rows with data and buttons. http://codepen.io/leongaban/pen/nuIkd
Each button corresponds to each row, also when you click a button it changes class names from hide to un_hide the next step is to retrieve the text value of the td with class contact_name in the row that the clicked button belongs too.
Table structure:
<tr>
<td class="contact_name" style="padding: 7px 0;">
Name 1
</td>
<td>
<button class="btn_hide">Hide</button>
</td>
</tr>
<tr>
<td class="contact_name" style="padding: 7px 0;">
Name 2
</td>
<td>
<button class="btn_hide">Hide</button>
</td>
</tr>
Using this jQuery, it will get ALL text values of .contact_name in all the rows
var name = $('.contact_name').text();
So I tried this to get the text value of the 'closest' .contact_name td
var name = $(this).closest('.contact_name').text();
However that returns blank for me :(
How would you get the Name 1 value by clicking the first Hide button?
.contact_name is not parent from the clicked button.
var name = $(this).closest('tr').find('.contact_name').text();
Try,
var name = $(this).closest('td').prev('.contact_name').text();
Or
var name = $(this).closest('tr').find('.contact_name').text();
DEMO
var name = $(this).closest('tr').children('.contact_name').text();

Change the background color of a row based on field value

I have an HTML form. I need to be able to change the background of a row in a table based on a the value of a field in another row.
Example:
Row A. Field #1 value=YES
Based on the YES vale
Row B. Background changes to yellow.
There are a number of ways to go about doing what you want. Check out this fiddle for a simple example. Type Yes in the textbox to see the highlight change. With some more info in your question I can modify the example to make it more useful.
Say you had the following HTML:
<form>
<table>
<tr>
<td><input type="text" id="field1"/></td>
<td>Something else</td>
</tr>
<tr class="rowb">
<td>Some value</td>
<td>Some other value</td>
</tr>
</table>
</form>
And the following jQuery JavaScript:
$(document).ready(function(){
$("#field1").change(function(){
$(".rowb").addClass($("#field1").val() == "Yes"?"highlight":"lowlight");
});
});
And the following CSS:
.highlight{
background-color:yellow;
}
.lowlight{
background-color:blue;
}
first give filed 1 and row 2 an id by using the id attribute
is the value already set to true when the html loaded ??
if yes add onLoad="changeBG" to the table
if no add onChange="changeBG" on the feild1
and then add this code
<script type="text/javascript" >
function changeBG () {
if(document.getElementById("feild1").getAttribute(value) == true)
document.getElementById("rowB").setAttribute(background-color,yellow) ;
}
</script>

Categories