function autoCalcSetup(){
$('form[name=transactions]').jAutoCalc('destroy');
$('form[name=transactions] tr[name=services]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
$('form[name=transactions]').jAutoCalc({decimalPlaces: 2});
}
autoCalcSetup();
$('button[name=remove]').click(function(e){
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e){
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=services]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
<!DOCTYPE html>
<html lang="en">
<!-- blank.html 21 Nov 2019 03:54:41 GMT -->
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>I-MED HEALTHCARE</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="assets/css/app.min.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="assets/bundles/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="assets/bundles/jquery-selectric/selectric.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<link rel="stylesheet" href="assets/bundles/datatables/datatables.min.css">
<link rel="stylesheet" href="assets/bundles/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.jsdelivr.net/npm/jautocalc#1.3.1/dist/jautocalc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Template CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/components.css">
<!-- Custom style CSS -->
<link rel="stylesheet" href="assets/css/custom.css">
<link rel='shortcut icon' type='image/x-icon' href='assets/img/imed.png' />
</head>
<body>
<div class="loader"></div>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<!-- top bar -->
<?php require_once("include/topbar.php"); ?>
<!-- top bar -->
<!-- side bar -->
<?php require_once("include/sidebar.php"); ?>
<!-- side bar -->
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-body">
<!-- add content here -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3>Patient Transactions</h3>
</div>
<div class="card-body">
<div class="form-group">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target=".bd-example-modal-xl">Find Patient</button>
</div>
<div class="container">
<form name="transactions">
<table class="table table-hover table-bordered table-striped" name="transactions">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
<tr name="services">
<td><button class="btn btn-primary" name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" class="form-control" name="qty" value="3"></td>
<td><input type="text" class="form-control" name="price" value="12"></td>
<td><input type="text" style="text-align:right" class="form-control" name="item_total" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" style="text-align:right" class="form-control" name="subtotal" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Tax</td>
<td>
<select class="form-control" name="tax">
<option value=".06">CT Tax</option>
<option value=".00">Tax Free</option>
</select>
</td>
<td><input type="text" style="text-align:right" class="form-control" name="tax_total" jAutoCalc="{subtotal} * {tax}"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Total</td>
<td> </td>
<td><input type="text" style="text-align:right" class="form-control" name="grand_total" jAutoCalc="{subtotal} + {tax_total}"></td>
</tr>
<tr>
<td colspan="4"></td>
<td><button class="btn btn-primary" name="add">Add Row</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary btn-icon icon-right" name="save"><i class="fas fa-file-invoice"></i> Process Payment</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- End of Main Content -->
<!-- FIND PATIENT TABLE MODAL -->
<div class="modal fade bd-example-modal-xl" id="select-patient"tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myLargeModalLabel">Find Patient</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="section-body">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4> </h4>
</div>
<div class="card-body">
<div class="table-responsive">
<?php
require_once("include/connect.php");
try{
$sql="SELECT patient_id, CONCAT(patient_lname, ', ', patient_fname, ' ', patient_mi) AS Fullname, top, pay_method FROM tbl_patientinfo WHERE isDeleted='0'";
$result=$con->prepare($sql);
$result->execute();
?>
<table class="table table-hover" id="table-1">
<thead>
<tr>
<th class="text-center">
#
</th>
<th>Patient Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<?php while($row=$result->fetch()){ ?>
<tr style="cursor: pointer;">
<td><?php echo $row['patient_id']; ?></td>
<td><?php echo $row['Fullname']; ?></td>
<td><?php echo $row['top']; ?></td>
<td><?php echo $row['pay_method']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<?php
} catch (PDOException $th){
echo "Error: ".$th->getMessage();
}
$con=null;
?>
<script>
var table = document.getElementById('table-1');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
//rIndex = this.rowIndex;
document.getElementById("txt-patient_id").value = this.cells[0].innerHTML;
document.getElementById("txt-patient_name").value = this.cells[1].innerHTML;
document.getElementById("txt-payMethod").value = this.cells[3].innerHTML;
$('#select-patient').modal('hide');
};
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of FIND PATIENT TABLE MODAL -->
<!-- setting bar -->
<?php require_once("include/settingbar.php"); ?>
<!-- setting bar -->
<!-- footer bar -->
<?php require_once("include/footer.php"); ?>
<!-- footer bar -->
<script type="text/javascript" src="assets/bundles/CRUD/transaction.js"></script>
<!-- General JS Scripts -->
<script src="assets/js/app.min.js"></script>
<script src="assets/bundles/datatables/datatables.min.js"></script>
<script src="assets/bundles/datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
<!-- JS Libraies -->
<script src="assets/bundles/cleave-js/dist/cleave.min.js"></script>
<script src="assets/bundles/cleave-js/dist/addons/cleave-phone.us.js"></script>
<script src="assets/bundles/jquery-pwstrength/jquery.pwstrength.min.js"></script>
<script src="assets/bundles/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/bundles/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/bundles/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<script src="assets/bundles/select2/dist/js/select2.full.min.js"></script>
<script src="assets/bundles/jquery-selectric/jquery.selectric.min.js"></script>
<script src="assets/bundles/sweetalert/sweetalert.min.js"></script>
<!-- Page Specific JS File -->
<script src="assets/js/page/forms-advanced-forms.js"></script>
<script src="assets/js/page/sweetalert.js"></script>
<script src="assets/js/page/datatables.js"></script>
<!-- Template JS File -->
<script src="assets/js/scripts.js"></script>
<!-- Custom JS File -->
<script src="assets/js/custom.js"></script>
<script src="assets/js/page/sweetalert.js"></script>
</body>
<!-- blank.html 21 Nov 2019 03:54:41 GMT -->
</html>
I have a problem in adding and removing rows. When I type numbers to calculate it using jAutoCalc library, it's working. So I don't have any problem with that. But when I want to add some rows and removing some rows, it shows nothing. And I don't see anything error in my program. But according to Inspects in my Browser (I'm using Microsoft Edge), I have an error in "$new.jAutoCalc('destroy'); " and it says that "$new.jAutoCalc" is not a function.
I use this following codes:
function autoCalcSetup() {
$('form[name=transactions]').jAutoCalc('destroy');
$('form[name=transactions] tr[name=services]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=transactions]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=services]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy'); //this is my error (According to Inspects in Browser)
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form name="transactions">
<table class="table table-hover table-bordered table-striped" name="transactions">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
<tr name="services">
<td><button class="btn btn-primary" name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" class="form-control" name="qty" value="3"></td>
<td><input type="text" class="form-control" name="price" value="12"></td>
<td><input type="text" class="form-control" name="item_total" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" class="form-control" name="subtotal" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Tax</td>
<td>
<select class="form-control" name="tax">
<option value=".06">CT Tax</option>
<option value=".00">Tax Free</option>
</select>
</td>
<td><input type="text" class="form-control" name="tax_total" jAutoCalc="{subtotal} * {tax}"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Total</td>
<td> </td>
<td><input type="text" class="form-control" name="grand_total" jAutoCalc="{subtotal} + {tax_total}"></td>
</tr>
<tr>
<td colspan="4"></td>
<td><button class="btn btn-primary" name="add">Add Row</button></td>
</tr>
</tbody>
</table>
</form>
</div>
I hope you can help me with this problem. If you have any question please don't hesitate to comment down below, and I will try my best to answer it just to solve my problem here. I need to do this for our Capstone Project. Thank so much! God bless you! :D
Related
FACING ISSUE IN CREATING MULTIPLE TABLE FILTERS IN HTML TABLE.
Following is the HTML code wherein I'm trying to filter out data on the basis of 3 columns(here, table has a total of 4 columns). The last column is just a URL hence doesn't need filtering.
But the filters aren't working.
<!doctype html>
<html lang="en">
<head>
<title>Problems Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var $filterableRows = $('#tableF').find('tr').not(':first'),
$inputs = $('.search-key');
$inputs.on('input', function() {
$filterableRows.hide().filter(function() {
var $filterableColumns = $(this).find('td').not(':last');
return $filterableColumns.filter(function() {
var tdText = $(this).text().toLowerCase(),
inputValue = $('#' + $(this).data('input')).val().toLowerCase();
return tdText.indexOf(inputValue) != -1;
}).length == $filterableColumns.length-1;
}).show();
});
</script>
</head>
<body>
<h1 style="text-align:right;"><strong>CODER'S GYM</strong></h1>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section"><i><u>Problems Arena</u></i></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="text-center mb-4">Click on <strong>Try</strong> to Solve</h4>
<input type="text" id="Code" class="search-key" placeholder="Code">
<input type="text" id="Title" class="search-key" placeholder="Title">
<input type="text" id="Difficulty" class="search-key" placeholder="Difficulty">
<div class="table-wrap">
<table id="tableF">
<thead class="thead-primary">
<tr>
<th>Code</th>
<th>Title</th>
<th>Difficulty</th>
<th>Try</th>
</tr>
</thead>
<tbody>
<tr>
<td data-input="Code">ABC</th>
<td data-input="Title">Two Sum</td>
<td data-input="Difficulty" >Easy</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">BCD</th>
<td data-input="Title">Add Two Numbers</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">CDE</th>
<td data-input="Title">Longest Substring Without Repeating Characters</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">DEF</th>
<td data-input="Title">Median of Two Sorted Arrays</td>
<td data-input="Difficulty" >Hard</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">EFG</th>
<td data-input="Title">Longest Palindromic Substring </td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td border-bottom-0" data-input="Code">FGH</th>
<td class="border-bottom-0" data-input="Title">Zingzag Conversion</td>
<td class="border-bottom-0" data-input="Difficulty" >Medium</td>
<td class="border-bottom-0">Try</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I have tried all the things here, but still the code isn't working. I'd be glad if someone could help to resolve this issue as soon as possible.
This might work:
<!doctype html>
<html lang="en">
<head>
<title>Problems Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $filterableRows = $('#tableF').find('tr').not(':first'),
$inputs = $('.search-key');
$inputs.on('input', function() {
$filterableRows.hide().filter(function() {
var $filterableColumns = $(this).find('td').not(':last');
return $filterableColumns.filter(function() {
var tdText = $(this).text().toLowerCase(),
inputValue = $('#' + $(this).data('input')).val().toLowerCase();
return tdText.indexOf(inputValue) != -1;
}).length == $filterableColumns.length-1;
}).show();
});
});
</script>
</head>
<body>
<h1 style="text-align:right;"><strong>CODER'S GYM</strong></h1>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section"><i><u>Problems Arena</u></i></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="text-center mb-4">Click on <strong>Try</strong> to Solve</h4>
<input type="text" id="Code" class="search-key" placeholder="Code">
<input type="text" id="Title" class="search-key" placeholder="Title">
<input type="text" id="Difficulty" class="search-key" placeholder="Difficulty">
<div class="table-wrap">
<table id="tableF">
<thead class="thead-primary">
<tr>
<th>Code</th>
<th>Title</th>
<th>Difficulty</th>
<th>Try</th>
</tr>
</thead>
<tbody>
<tr>
<td data-input="Code">ABC</th>
<td data-input="Title">Two Sum</td>
<td data-input="Difficulty" >Easy</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">BCD</th>
<td data-input="Title">Add Two Numbers</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">CDE</th>
<td data-input="Title">Longest Substring Without Repeating Characters</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">DEF</th>
<td data-input="Title">Median of Two Sorted Arrays</td>
<td data-input="Difficulty" >Hard</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">EFG</th>
<td data-input="Title">Longest Palindromic Substring </td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td border-bottom-0" data-input="Code">FGH</th>
<td class="border-bottom-0" data-input="Title">Zingzag Conversion</td>
<td class="border-bottom-0" data-input="Difficulty" >Medium</td>
<td class="border-bottom-0">Try</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
We put all you javascript inside $(document).ready(function() {}); In this way, html table object is rendered, and ready to be filtered.
And also I suggest you to use the last jQuery code, that is at our day, jquery 3.6.0.
I am trying to add a row to the table when the add button is clicked and add and delete both buttons are working properly but when i add data-toggle="table" in the table tag the add and delete buttons are not working if i remove the data-toggle option i am losing features such as pagination and table styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<table id="myTable" class="table"
data-toggle="table"
data-mobile-responsive="true"
data-pagination="true"
data-height="460"
>
<thead>
<tr>
<th>Product</th>
<th>QTY</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td >
<select id="ex1" required >
<option value="">Iphone</option>
<option value="">IPod</option>
<option value="">Galaxy Tab</option>
<option value="">PocoPhone</option>
</select>
</td>
<td >
<input id="ex2" type="number">
</td>
<td >
<input id="ex3" type="number">
</td>
<td >
<input id="ex4" type="number">
</td>
<td >
<button class="btn btn-outline-success" id="addrow" class="addnew" > Add </button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function() {
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
$('#addrow').click(function(){
//Add row
table.append('<tr><td > <select id="ex1" required > <option value="">Iphone</option><option value="">IPod</option><option value="">Galaxy Tab</option> <option value="">PocoPhone</option> </select> </td> <td > <input id="ex2" type="number"> </td> <td ><input id="ex3" type="number"> </td> <td > <input id="ex4" type="number"> </td> <td > <button class="btnDelete btn-outline-success" id="delrow" >Delete</button> </td> </tr> ');
})
$("#myTable").on('click', '.btnDelete', function () {
$(this).closest('tr').remove();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
</body>
</html>
The order is wrong. Add the JS library before your script...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<table id="myTable" class="table" data-toggle="table" data-mobile-responsive="true" data-pagination="true" data-height="460">
<thead>
<tr>
<th>Product</th>
<th>QTY</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="ex1" required>
<option value="">Iphone</option>
<option value="">IPod</option>
<option value="">Galaxy Tab</option>
<option value="">PocoPhone</option>
</select>
</td>
<td>
<input id="ex2" type="number">
</td>
<td>
<input id="ex3" type="number">
</td>
<td>
<input id="ex4" type="number">
</td>
<td>
<button class="btn btn-outline-success" id="addrow" class="addnew"> Add </button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<!-- Unrelated: version incompatibility
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
-->
<script>
$(document).ready(function() {
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
$('#addrow').click(function() {
//Add row
table.append('<tr><td > <select id="ex1" required > <option value="">Iphone</option><option value="">IPod</option><option value="">Galaxy Tab</option> <option value="">PocoPhone</option> </select> </td> <td > <input id="ex2" type="number"> </td> <td ><input id="ex3" type="number"> </td> <td > <input id="ex4" type="number"> </td> <td > <button class="btnDelete btn-outline-success" id="delrow" >Delete</button> </td> </tr> ');
})
$("#myTable").on('click', '.btnDelete', function() {
$(this).closest('tr').remove();
});
});
</script>
</body>
Can someone explain me why when I toggle the tabs, the content is not aligned horizontally on both tabs?
If you notice, the content table moves to the left when you go to the document.
I can't figure it out why this is happening. Any help?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="content">
<ul class="nav nav-tabs">
<!-- ngIf: !vm.selectedTicket.customerName1 && !vm.selectedTicket.customerName2 -->
<!-- ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
<li ng-if="vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2" class="ng-scope" style=""><a data-toggle="tab" href="#customer1Content" class="ng-binding" aria-expanded="false"><i class="glyphicon glyphicon-user"></i> Customer 1 Information</a></li>
<!-- end ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
<li class=""><a data-toggle="tab" href="#documentContent" class="ng-binding" aria-expanded="false"><i class="glyphicon glyphicon-file"></i> Document Information</a></li>
</ul>
<div class="tab-content top5">
<!-- ngIf: !vm.selectedTicket.customerName1 && !vm.selectedTicket.customerName2 && vm.selectedTicket.customerName -->
<!-- ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
<div ng-if="vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2" id="customer1Content" class="tab-pane fade ng-scope" style="">
<table class="table ipp-simple-table">
<tbody>
<tr>
<th class="first-no-border ng-binding">Customer Number</th>
<td class="first-no-border ng-binding">333</td>
</tr>
<tr>
<th class="ng-binding">Customer Name</th>
<td class="ng-binding">Name1</td>
</tr>
<tr>
<th class="ng-binding">Birth Date</th>
<td class="ng-binding">08.12.2017</td>
</tr>
<tr>
<th class="ng-binding">Account Number</th>
<td class="ng-binding">123</td>
</tr>
<tr>
<th class="ng-binding">Status</th>
<td>
<!-- ngIf: vm.selectedTicket.status.description == 'New' --><span ng-if="vm.selectedTicket.status.description == 'New'" class="ipp-color ng-scope"><b class="ng-binding">New</b></span>
<!-- end ngIf: vm.selectedTicket.status.description == 'New' -->
<!-- ngIf: vm.selectedTicket.status.description == 'Closed' -->
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="ng-binding">Target Ticket
</th>
<td>
<select ng-options="ticket.docid for ticket in vm.tickets" ng-model="vm.selectedTicket" class="ng-pristine ng-untouched ng-valid">
<option label="1" value="object:49">1</option>
<option label="2" value="object:50">2</option>
<option label="3" value="object:51">3</option>
<option label="4" value="object:52">4</option>
<option label="5" value="object:53">5</option>
<option label="6" value="object:54" selected="selected">6</option>
</select>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- end ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
<div id="documentContent" class="tab-pane fade">
<table class="table ipp-simple-table">
<thead>
</thead>
<tbody>
<tr>
<th class="first-no-border ng-binding">Document ID</th>
<td class="first-no-border ng-binding">6</td>
</tr>
<tr>
<th class="ng-binding">Document Date</th>
<td class="ng-binding">05.12.2018</td>
</tr>
<tr>
<th class="ng-binding">Document Type</th>
<td class="ng-binding">9999</td>
</tr>
<tr>
<th class="ng-binding">Description</th>
<td class="w-50 ng-binding">Unkategorisiert</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="ng-binding">Target Ticket</th>
<td>
<select ng-options="ticket.docid for ticket in vm.tickets" ng-model="vm.selectedTicket" class="ng-pristine ng-untouched ng-valid">
<option label="1" value="object:49">1</option>
<option label="2" value="object:50">2</option>
<option label="3" value="object:51">3</option>
<option label="4" value="object:52">4</option>
<option label="5" value="object:53">5</option>
<option label="6" value="object:54" selected="selected">6</option>
</select>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
Can someone explains how is that possible that an inputof type "submit" is placed at the top-left although it's inside the third <tr>
I can change its position to the right place through margin and position properties, but there should be no need for them at all in this case.
see the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
Insert td like this:
<td> <---------------
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td> <--------------
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
you forgot to add td in your tr section, and because your third tr has only one td, you must set colspan to 3 as it's property...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td colspan="3">
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
I am attempting to style a table within a dropdown button.
<div class="col-sm-6 col-md-6 col-lg-6">
<button type="button" class="btn btn-secondary btn-block" data-toggle="collapse" data-parent=".accordion" data-target="#demo2" aria-expanded="true">Supported Tenders</button>
<div id="demo2" class="out collapse in" aria-expanded="true">
<br>
<table table-hover="">
<tr>
<td>Account Type URI: Account</td>
</tr>
<tr>
<td>Network Type URI: Network</td>
</tr>
<tr>
<td>Onboarding Tender: Discover</td>
</tr>
<tr>
<td>Onboarding Gateway: MCX</td>
</tr>
<tr>
<td>Attribute Name: New</td> <tr>
</tr><td>Attribute Value: Tender</td>
</tr>
</table>
</div>
</div>
Essentially,
1. I am wondering how I can move "Attribute Name" and "Attribute Value" to the next column.
Is there any way to create a panel or something that shrinks/collapses the table?
Any assistance will be appreciated. Thank you!
try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>table collapsed in this button click for view the table</h3>
<button type="button" class="btn btn-secondary btn-block" data-toggle="collapse" data-target="#demo">Supported Tenders</button>
<div id="demo" class="collapse">
<table table-hover="">
<tr>
<td>Account Type URI: Account</td>
</tr>
<tr>
<td>Network Type URI: Network</td>
</tr>
<tr>
<td>Onboarding Tender: Discover</td>
</tr>
<tr>
<td>Onboarding Gateway: MCX</td>
</tr>
<tr>
<td>Attribute Name: New</td>
<td>Attribute Value: Tender</td>
</tr>
</table>
</div>
</div>
</body>
</html>