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.
Related
I have different table in every button, and I hide the table by putting the visibility to hide in the css, when I click the button the table will show. The problem is when I click the button again it won't hide the table anymore. And another thing is when I click the other buttons the table which is currently showing will hide then another table will show.
function toggle() {
if( document.getElementById("Patient-Table").style.visibility='hidden' )
{
document.getElementById("Patient-Table").style.visibility = 'visible';
}
else{
document.getElementById("Patient-Table").remove(visibility);
}
}
#Patient-Table {
visibility: hidden;
}
<div id="Patient-Table" class="container col-sm-8">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>List of <b> Patients</b></h2>
</div>
<div class="col-sm-6">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<div class="tables border shadow border-3 mt-3 mb-5">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>3 </td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
</tbody>
</table>
function patienttoggle() {
let patientTable = document.getElementById("Patient-Table");
if(patientTable.style.display == "none") {
patientTable.style.display = "block";
}else{
patientTable.style.display = "none";
}
}
Heres my upadted JS CODE
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>
I have a dynamic table and there is an input field in each row as well as a respective button on every rows. I want to get the respective value of the input field when I click on the respective button. To replicate the scenario, you may refer to the following static code with two rows. Can someone help?
$(".returnItem").click(function(){
var row = $(this).closest("input").find("input[name='newQty']").val(); //This is not working
var row = $(".newQty").val(); //This is not working also
alert(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control oldQty" type="number" name="oldQty" value="10" hidden readonly>
<td><input class="form-control newQty" type="number" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control oldQty" type="number" name="oldQty" value="20" hidden readonly>
<td><input class="form-control newQty" type="number" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
</tbody>
</table>
</div>
</form>
In your example you are using jQuery 1.2.3, which doesn't contains closest function (added since 1.3). Although, you're not looking for function closest, but parents. By this function, you will find parent <tr>, and then by find you will find the input and get his value via val.
Also, since your buttons are inside form, after pressing the button, form will be submitted, so you need to add e.preventDefault() from preventing the form to be sent.
$(".returnItem").click(function(e){
e.preventDefault();
row = $(this).parents("tr").find("input[name='newQty']").val();
alert(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
</tbody>
</table>
</div>
</form>
You have used type="submit" in button which led to refresh in
jquery fetching data there are many options below given is one of
them.
Use latest version of jquery cdn for using closest and find based functions. https://cdnjs.com/libraries/jquery
$(".returnItem").click(function(){
var row = $(this).parent().prev().prev().children().val();
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</tr>
</tbody>
</table>
</div>
</form>
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.
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>