Enabling a Control Group in a Row of a Table

Enabling a Control Group in a Row of a Table - javascript

I have the following table:
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Action</th>
<th>Name</th>
<th>Start Time</th>
<th>Duration</th>
</tr>
</thead>
<tbody data-bind="foreach: shiftsList">
<tr>
<td style="width: 9%">
<form>
<button style="width: 47%" class="btn btn-warning"><i class="glyphicon glyphicon-pencil"></i></button> <button style="width: 47%" class="btn btn-danger" data-bind="click: $root.deleteShift"><i class="glyphicon glyphicon-remove"></i></button>
</form>
</td>
<!-- I want to enable these three. -->
<td style="width: 31%"><input disabled="disabled" type="text" class="form-control" data-bind="value: Name"></td>
<td style="width: 30%"><input disabled="disabled" type="time" class="form-control" data-bind="value: StartTime"></td>
<td style="width: 30%"><input disabled="disabled" type="time" class="form-control" data-bind="value: Duration"></td>
<!-- I want to enable these three. -->
</tr>
</tbody>
</table>
It looks like this:
I want it so that when I press the edit button of a row (pencil), the text-boxes of the row will get enabled.
How can I achieve this using Knockout?

You can use knockout enable binding. Define a flag in your viewmodel that will be switched to true when user clicks the pen button.
Quick example: FIDDLE
<input disabled="disabled" type="time"
class="form-control" data-bind="value: Duration,
enable: enabledFlag">

Related

I need to select a specific column in a table, add the VAT rate and display the result in the next column

so I created an dynamic HTML table, in which you can add, deleate or edit columns. I added a functionality that adds all the prices from the "pret" columns and shows it below. I need now, when I add or edit the rows, to automaticly select the "price" column and add the VAT rate (19%) and to show the result in the "pret+TVA" column.
when you press on the add row button, it adds a row below the row and when ever you press the "calculate the total price" it displays the sum of all the prices in the third row.
I added the function below which is supposed to select the specific cell and add to its value the rate and then display the result in the next cell.
function tvaCalc() {
var pretNormal = document.getElementById("table").rows.cells[4];
pretNormal = parseFloat(pretNormal);
var tvaPrice = pretNormal * 1.9;
document.getElementById("table").rows.cells[4].innerHTML = pretNormal;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Oferta de pret</title>
</head>
<body>
<section id="project">
<div class="company-name">
<p>SC DD AUTO GLITIA SRL</p>
<p>GLITIA DANIEL</p>
</div>
<div class="offer ">
<h1>Oferta de pret</h1>
</div>
<div class="container container-tabel">
<table id="table" class="main-tabel">
<tr>
<th>article code</th>
<th>article name</th>
<th>Brand</th>
<th>quantity.</th>
<th>price</th>
<th>price+VAT</th>
</tr>
<tr>
<td>--</td>
<td><b>Labour</b></td>
<td>--</td>
<td>--</td>
<td>35</td>
<td ></td>
</tr>
<tr>
<td>--</td>
<td><b>Total RON</b></td>
<td>--</td>
<td>--</td>
<td id="total">0</td>
<td >--</td>
</tr>
</table>
</div>
</section>
<section id="navigation">
<div class="imputs">
<input type="text" id="cod-articol" class="d-print-none inputField" placeholder="Cod articol" name="article-code" value="" required>
<input type="text" id="nume-articol" class="d-print-none inputField" placeholder="Nume articol" name="article-name" value="" required>
<input type="text" id="marca" class="d-print-none inputField" placeholder="marca" name="brand" value="" required>
<input type="text" id="cant" class="d-print-none inputField" placeholder="Cant." name="Cant." value="" required>
<input type="text" id="pret" class="d-print-none inputField" placeholder="Pret" name="Pret" value="" required>
</div>
<br>
<div class="buttons">
<button type="button" class="d-print-none btn btn-outline-secondary" onclick="addHtmlTableRow()">add row</button>
<button type="button" class="d-print-none btn btn-outline-secondary" onclick="editHtmlTbleSelectedRow();">Edit</button>
<button type="button" class="d-print-none btn btn-outline-secondary" onclick="removeSelectedRow();">delete row</button>
<button type="button" class="d-print-none btn btn-outline-secondary" onclick="calculTotal();">calculate the total price</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script></script>
</body>
</html>

I modified your table structure little bit to make it easy to work with. I've also modified your function a bit to also take care of the totals. You can just call it whenever you're updating the table's content. This worked for me
function tvaCalc() {
let rows = document.querySelector('#table tbody').rows;
let total = 0;
for (let row of rows) {
let price = parseFloat(row.cells[4].textContent);
var vatPrice = price * 1.19;
row.cells[5].textContent = vatPrice;
total += price;
}
document.getElementById('total').textContent = total;
}
tvaCalc()
<table id="table">
<thead>
<tr>
<th>article code</th>
<th>article name</th>
<th>Brand</th>
<th>quantity.</th>
<th>price</th>
<th>price+VAT</th>
</tr>
</thead>
<tbody>
<tr>
<td>--</td>
<td><b>Labour</b></td>
<td>--</td>
<td>--</td>
<td>35</td>
<td ></td>
</tr>
<tr>
<td>--</td>
<td><b>Labour</b></td>
<td>--</td>
<td>--</td>
<td>37</td>
<td ></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>--</td>
<td><b>Total RON</b></td>
<td>--</td>
<td>--</td>
<td id="total">0</td>
<td >--</td>
</tr>
</tfoot>
</table>

Fill the currrent data to bootstrap form

I'm using the bootstrap4 framework for my web application. Here's my requirement
I have a table generated with some values & each row has a edit button at the end of the row (last column).
when edit button is clicked, it should pop up a form with existing data in the row. So that user can change only the refuired fields. I know this should be done using javascript to fill the text boxes in the current form. But with bootstrap4 framework i dont know the correct way to do this .
This is my table
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">TV 3</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Derana</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td colspan="2">TV 5</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">6</th>
<td colspan="2">TV 6</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">7</th>
<td colspan="2">TV 7</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
</tbody>
</table>
This is the edit button
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm" >
Edit
</button>
This is my POP form(modal) for the edit button
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Here is a fully working code and more dynamic approach to what you want. You can use native boostrap jQuery function to show your modal on edit click button in your row.
You can watch which button triggered the modal and from their you can grab all the data using jQuery function like closest() and find()
Once you have the respective row data you can then apply it to your form input which are in the modal
In addition, i have also a functionality where recording status is Y then the checkbox in the modal will automatically be checked and if its N then it will be unchecked.
Live Working Demo:
$("#ModalLoginForm").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
//get data
var cId = button.closest('tr').find('th').text() //1st th
var cName = button.closest('tr').find('th').next().text() //2nd th
var cDesc = button.closest('tr').find('th').next().next().text() //3 th
var isRecord = button.closest('tr').find('th').next().next().next().text() //4 th
//Apply data
$('[name="channelid"]').val(cId);
$('[name="channel"]').val(cName);
$('[name="description"]').val(cDesc);
//check the checkbox
if (isRecord == 'Y') {
$('[name="remember"]').prop('checked', true); //check the checbox
} else {
$('[name="remember"]').prop('checked', false);
}
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>TV 3</td>
<td>dfdf</td>
<td>N</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">4</th>
<td>TV 4</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">5</th>
<td>TV 5</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">6</th>
<td>TV 6</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">7</th>
<td>TV 7</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
</tbody>
</table>
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

$(".table .btn-info").on("click", function(){ //now it aply for every .btn-info in every .table... so its better to make a new class or id for your table
var thContentFromThisRow = $(this).closest("tr").find("th").html(); // copy data from the TH in the same ROW as your clicked button
$('[name="channelid"]').val(thContentFromThisRow); //here you select your desired input to fill by name and then use .val (short for value) and you insert your data...
});
This is a short way of collecting one inner html from your th inside row of your button. Just to show how it worsk. Anyway you should go to w3c or another basics page and learn the basics of js/jquery. This code I've written is in jquery since you have bootstrap.

Jquery appended data stacks on top of eachother instead of over the table lenght

I have some data from a AJAX GET request I would like to append to a table.
This is my HTML:
<form>
<table id="project-table" class="table table-striped table-inverse table-responsive">
<caption>Projects</caption>
<thead class="thead-inverse">
<tr>
<th scope="col">#</th>
<th scope="col">Project name</th>
<th scope="col">Description</th>
<th scope="col">Estimated time (min)</th>
<th scope="col">Actual time (min)</th>
<th scope="col">Add task</th>
<th scope="col">Delete project</th>
</tr>
</thead>
<tbody id="project-body">
</tbody>
</table>
</form>
I would like to append my data inside the tbody with the id of project-body.
I append my data like this:
$('#project-body').append(
`
<tr>
<td> <input class="form-control" type="hidden" name="projectid" id="projectid > </td>
<td> <input class="form-control" type="text" name="projectName" id="projectName > </td>
<td> <input class="form-control" type="text" name="description" id="description > </td>
<td> <input class="form-control" type="text" name="estimatedTime" id="estimatedTime > </td>
<td> <input class="form-control" type="text" name="actualTime" id="actualTime > </td>
<td> <a id="addTask" class="btn btn-info" href="Overview.php" role="button"> <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task </td>
<td> <button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger"> <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project </button> </td>
</tr>
`
);
The problem is that all of my TD elements seem to either be not showing at all or are stacking on top of each other. Normally i would like my data to spread vertically over my table filling the all of the table heads

You have missed to add value attribute to each input.
Here is a working example:
$('#add-row').on('click', function(e){
$('#project-body').append(
`
<tr>
<td>
<input class="form-control" type="hidden" name="projectid" id="projectid value="1">
</td>
<td>
<input class="form-control" type="text" name="projectName" id="projectName value="Some value">
</td>
<td>
<input class="form-control" type="text" name="description" id="description value="Some value">
</td>
<td>
<input class="form-control" type="text" name="estimatedTime" id="estimatedTime value="Some value">
</td>
<td>
<input class="form-control" type="text" name="actualTime" id="actualTime value="Some value">
</td>
<td>
<a id="addTask" class="btn btn-info" href="Overview.php" role="button">
<i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
</a>
</td>
<td>
<button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger">
<i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
</button>
</td>
</tr>
`
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add-row">Add row</button>
<form>
<table id="project-table" class="table table-striped table-inverse table-responsive">
<caption>Projects</caption>
<thead class="thead-inverse">
<tr>
<th scope="col">#</th>
<th scope="col">Project name</th>
<th scope="col">Description</th>
<th scope="col">Estimated time (min)</th>
<th scope="col">Actual time (min)</th>
<th scope="col">Add task</th>
<th scope="col">Delete project</th>
</tr>
</thead>
<tbody id="project-body">
</tbody>
</table>
</form>
Hope it helps.

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>

unable to get value of hidden input in jquery using find function

i want when user click delete icon i need value of hidden input inside "delete" class but i am getting undefined can someone guide me where i am doing wrong
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete"></i></td>
</tr>
</table>
my jquery code is as follow
$(document).on('click', '.shopping-cart .delete', function(){
var $target = $(this).parent().find('.row_id').val();
alert($target);
});
every time i run to alert i get error " undefined.tried many different ways but didnt work

You don't have a class on the input, just a name, change your markup like this:
<input type="hidden" name="row_id" class="row_id" value="123">
or your selector like this:
var $target = $(this).parent().find('input[name="row_id"]').val();

$(document).on('click', '.delete', function(){
var $target = $(this).find('input').val();
alert($target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
<th>action</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete">Delete</i></td>
</tr>
</table>
Please check the Working Code.
I have firstly added a new <TH> Tag to display the delete button.
And then in jquery i user .find to get the internal element of <TD> and as per your code it alters the value of hidden box
Thanks wish it might help you

Develop Reference

JavaScript is the programming language of the Web.

Enabling a Control Group in a Row of a Table - javascript

You can use knockout enable binding. Define a flag in your viewmodel that will be switched to true when user clicks the pen button. Quick example: FIDDLE <input disabled="disabled" type="time" class="form-control" data-bind="value: Duration, enable: enabledFlag">

Related

I need to select a specific column in a table, add the VAT rate and display the result in the next column

Fill the currrent data to bootstrap form

Jquery appended data stacks on top of eachother instead of over the table lenght

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

unable to get value of hidden input in jquery using find function

Categories

Resources