Develop Reference

How to hide full row of the table using Jquery

I am building the system where there is a table with the anchor tag name original and copy in each row. Clicking on these anchor tag we can update into the database whether the item is original or copy using ajax. But i cannot hide the full row after one of the anchor tag is clicked.
I am using Laravel-8 to Develop at backend.
My view
<div class='container' style="margin-top:50px">
<div class="row">
<div class="input-group" style="margin:20px">
<form >
<table style="float:right">
<th>
<div class="form-outline">
<input type="search" id="form1" class="form-control" placeholder="Search" /></th>
<th><button type="button" class="btn btn-success" >
<i class="fas fa-search"></i>
</button></th>
</form>
</div>
<div class="table-responsive">
<table class="table custom-table">
<thead>
<tr>
<th scope="col">
<label class="control control--checkbox">
<input type="checkbox" class="js-check-all"/>
<div class="control__indicator"></div>
</label>
</th>
<th scope="col" >S.N</th>
<th scope="col">LC NO</th>
<th scope="col">Applicant</th>
<th scope="col">Doc Value</th>
<th scope="col">Doc Received date</th>
<th scope="col">LC Type</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php $number = 1;?>
#foreach($datas as $items)
<tr>
<th scope="row" style="padding:20px">
<label class="control control--checkbox">
<input type="checkbox"/>
<div class="control__indicator"></div>
</label>
</th>
<td>{{$number}}</td>
<td>{{$items->lc_no}}</td>
<td>{{$items->applicant}}</td>
<td>{{$items->doc_value}}</td>
<td>{{$items->rec_date}}</td>
<td>{{$items->sight_usance}}</td>
<td>Original</td>
<td>Copy</td>
</tr>
<?php $number++; ?>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
Here is my jquery ajax function
$(".original").on('click', function(){
var id=$(this).attr('data-id');
$.ajax
({
type: "GET",
url: "orgupdate/"+id,
success: function(response)
{
alert(response);
}
});
});

Within the event handler this is the element the event occurred on. From that element use closest() to get a reference for the row.
$(".original").on('click', function() {
// reference closest row
var $row = $(this).closest('tr')
var id = $(this).attr('data-id');
$.ajax({
type: "GET",
url: "orgupdate/" + id,
success: function(response) {
alert(response);
// after verify response value remove the row
$row.remove()
}
});
});

Add Textfieds in table when checkbox checked Using Jquery

I have list of parameters along with checkboxs where i can search and select required parameters in table.Now i want to set values for selected parameters.For this i have created textfields(Parameters name,Datatype,Set Value) in table format.When i select check box in parameters table,textfields in table should be created with selected parameters . when i deselect checkbox textfields should removed. For instance if i select one parameter "TestingDevice" from parameters table,Textfields should be created value with "TestingDevice" and other DataType and Set value should be manually entered by user. Below the code i am using.
List Of Parameters
<div class="tab-content">
<div id="Device_B" class="tab-pane fade in active">
<div class="col-md-12">
<div class="col-md-6" style="overflow: auto">
<br>
<input type="text" class="form-control" id="customGroupAddParamInput" onkeyup="addParameterTableSearchFunction()" placeholder="Search 🔍 :">
<br>
<h4>All Parameters</h4>
<div class="span5 border-0" style="overflow: auto">
<table id="customGroupAddParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall_custom_B[]" onclick="selectAllCustom(this)"/>SA</th>
<th>Parameter Name</th>
</tr>
</thead>
<tbody class="parameter_table">
<% #all_br_parameters.each do |parameter| %>
<tr id="tr_rb_<%=parameter['id'] %>">
<td>
<input type="checkbox" class="checkBox" name="checkBox_custom_B[]" onchange="clickedParamBox(this.name)">
</td>
<td style="word-break:break-all;">
<%= parameter['parameter_name']%>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
Table For Textfield
<div class="tab-content" >
<div id="protocol" class="tab-pane fade in active">
<div class="span3 border-0" style="overflow: scroll">
<table id="addParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th>Parameter Name</th>
<th>Data Type</th>
<th>Expected Set Value</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr>
<td>
<input type="text" id="parameterName" class="parameterName" name="parameter_name">
</td>
<td>
<input type="text" class="parameterDscription" name="parameter_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>

Try this out: It's how I'd handle it.
$(document).ready(function() {
window.addEventListener('load', (event) => {
checkbox = document.getElementById("checkbox_to_be_evaluated");
textbox = document.getElementById("textbox_to_be_displayed_or_hidden");
evaluateCheckbox(checkbox, textbox);
});
$(checkbox).click(function(){
evaluateCheckbox(checkbox, textbox)
});
function evaluateCheckbox(checkbox, textbox) {
//take in element of checkbox
if(checkbox.checked){
textbox.style.display = "block";
}else {
textbox.style.display = "none";
}
//handle accordingly
};
});

Add or Remove multiple list item on the basis of AND,OR,NOT conditions in angular js

I want to add multiple add or remove multiple rules on the basis of AND/OR/NOT operators. For example: rule1>12h && rule2<10h. How can we do that?
<label class="control-label" for="field_notificationRules">Notification
Filter Rules:</label>
<div class="form-group">
<table class="table table-stripped table-bordered">
<thead>
<tr>
<th><label class="control-label" for="field_filterRuleDefinition">Rule Definition</label></th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" name="notificationFilterRulesDefinition" id="field_filterRuleDefinition" ng-model="vm.notificationRules.notificationRules.notificationFilterRules.notificationFilterRulesDefinition"/>
</td>
<td><button class="btn fa fa-plus" ng-click="addNewFilterRow()">Add</button></td>
</tr>
<tr ng-show="filterShow">
<td>
<input type="text" class="form-control" name="notificationFilterRulesDefinition" id="field_filterRuleDefinition" ng-model="vm.notificationRules.notificationRules.notificationFilterRules.notificationFilterRulesDefinition"/>
</td>
<td><button class="btn fa fa-plus" ng-click="addNewFilterRow()">Add</button></td>
</tr>
</tbody>
</table>
</div>

auto update total onkeyup with angularjs

I have a list of users from a web api which i've supplied the user with a search box to filter to make searching easy.
On the top side of the table too i've provided the total number of users returned by the api.
What i have to do is when the user starts typing and results are being filtered, the total number of displayed should also be updated
<div class="col-sm-9">
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="table">
<tr>
<td width="6%"><strong>Filter By</strong></td>
<td width="94%"> <select ng-model="queryBy">
<option value="$"></option>
<option value="Customer_Name">Name</option>
<option value="Address">Adddress</option>
<option value="Region">Region</option>
<option value="District">District</option>
</select> </td>
</tr>
<tr>
<td><strong>Search</strong></td>
<td> <div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Customers" ng-model="query[queryBy]"/>
</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<img src="img/loader.gif" width="100" height="13" border="0" />
</div>
<table class="table table-striped table-hover">
<tr>
<td> </td>
<td> </td>
<td>Total Customers: {{users_list.length}}</td>
</tr>
<tr class="success">
<td><strong><a style="color: black; text-decoration: none" href="#/home" ng-click="clikme('Customer_Name')">Customer Name</a></strong></td>
<td><strong>Phone Number</strong></td>
<td><strong>Address</strong></td>
</tr>
<tr ng-repeat="item in users_list | filter: query ">
<td>{{item.Customer_Name}}</td>
<td>{{item.Phone_Number}}</td>
<td>{{item.Address}}</td>
</tr>
</table>
</div>
JS
.controller('app_users_ctrl',function($scope,$http,$location){
$scope.query = {};
$scope.queryBy = '$';
$http.post('http://websource.com/calls/app_users.php').success(function(data){
$scope.users_list=data
//console.log(JSON.stringify(data));
$scope.loading=false;
})
$scope.clikme= function(field){
$scope.myvar= order ? '-' + field : '+' + field;
order=!order;
}
})

Yo need to use lenght for the filtered result so try this.
change {{users_list.length}} for {{ (users_list | filter: query).length }}

Validate row with inputs in a table that has been built dynamically in AngularJS

I've been struggling on the solution to the following problem.
I have a table in which every row is build dynamically by ngRepeat.
Every row has four columns and in every column there is an input element.
My question is - how can I validate these four input fields and show the row in red if at least one of this four inputs is invalid.
I've tried to accomplish it with the help of this answer - AngularJS dynamic form field validation. But maybe because I'm doing something wrong it didn't help
<form novalidate name="feedInputSpecificForm" ng-submit="save()">
<table class="table table-condensed cf-table">
<thead>
<tr>
<th class="text-center">{{ 'Feed input' | translate }}</th>
<th class="text-center">{{ 'Calcium' | translate }}</th>
<th class="text-center">{{ '(g/Kg)' | translate }}</th>
<th class="text-center">{{ 'DM/FM factor' | translate }}</th>
</tr>
</thead>
<tbody>
<tr ng-class="{'danger': feedInputSpecificForm.$invalid}"
ng-repeat="item in items">
<td width="20%" class="text-right">
<input ng-model="item.name" type="text" dynamic-name="{{ 'name_' + $index }}" required/>
</td>
<td width="30%" class="text-center">
<input ng-model="item.calcium" type="text" ng-pattern="/^[\d,\.]+$/i" dynamic-name="{{ 'ca_' + $index }}"
class="form-control" required/>
</td>
<td width="20%" class="text-center">
<select ng-model="item.ca_dm" class="form-control input-sm" dynamic-name="{{ 'ca_dm_' + $index }}" required>
<option value="dm">DM</option>
<option value="fm">FM</option>
</select>
</td>
<td width="30%" class="text-center">
<input ng-model="item.dm_fm_factor" type="text" ng-pattern="/^[\d,\.]+$/i"
dynamic-name="{{ 'dm_fm_factor_' + $index }}" class="form-control" required/>
</td>
</tr>
</tbody>
<tfoot class="feed-inputs-control">
<tr ng-if="type === 'specific'">
<td colspan="2" width="50%">
<button ng-click="onAdd()" type="button" class="btn btn-primary btn-sm">Add new feed</button>
</td>
<td colspan="2" width="50%">
<button type="submit" class="btn btn-primary btn-sm">Save</button>
</td>
</tr>
</tfoot>
</table>
</form>

I've found the answer and it was very simple.
Everything worked after me added ng-form in the "tr" tag there I was doing ng-repeat:
<tr ng-class="{'danger': item.id.$invalid}"
ng-repeat="item in items" ng-form="item.id">...</tr>