`input`'s position in a table - html

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>

Related

BS4 table issue

Hello I have tried to make a table that has expenses, amount kai action but I have a problem with the alignment. I tried to correct it through the width but unfortunately it did not work.
What am I doing wrong?
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<a routerLink="/addexpense">Add Expense</a>
<div class="div1">
<label for="keyword">Search:</label>
<input type="text"
id="keyword"
[(ngModel)]="filters.keyword"
name="keyword"
(input)="listExpenses()">
</div>
<div class = "container">
<table class = "table table-striped table-bordered" >
<tr>
<th>Expense</th>
<th>Amount</th>
<th>Actions</th>
</tr>
<div *ngFor ="let expense of expenses">
<tr>
<td>{{expense.expense}}</td>
<td>{{expense.amount | currency: '€'}}</td>
<td> <a routerLink ="/editexpense/{{expense.id}}">Edit</a>
<button *ngIf="expense.id" (click)="deleteExpense(expense.id!)">Delete</button>
</td>
</tr>
</div>
</table>
</div>
</body>
result :

Not to bind *ngFor to <div> element.
Instead, you need to bind *ngFor to <tr> element and remove <div> element from the <table>.
<table class="table table-striped table-bordered">
<tr>
<th>Expense</th>
<th>Amount</th>
<th>Actions</th>
</tr>
<tr *ngFor="let expense of expenses">
<td>{{expense.expense}}</td>
<td>{{expense.amount | currency: '€'}}</td>
<td> <a routerLink="/editexpense/{{expense.id}}">Edit</a>
<button *ngIf="expense.id" (click)="deleteExpense(expense.id!)">Delete</button>
</td>
</tr>
</table>
Sample Solution on StackBlitz

How to add Rows and Delete Rows to calculate again?

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

Add new row to a table by clicking the icon

I have created a table which include a "+" font awesome icon.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group" style="position: relative">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="justify-content-center" style="position: absolute; width: 100%; left: 50%;">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</table>
Now how to add a new row by clicking on the "+" icon?

You can't add another row without using javascript or Jquery. here is a solution:-
function addrow(){
var row = "<tr><td class='form-group' style='position: relative'><input type='Column_1' class='form-control' id='clmn1' placeholder='Enter the name'><div class='justify-content-center' style='position: absolute; width: 100%; left: 50%;'></div></td></tr>";
document.getElementById("myList").insertAdjacentHTML('beforeend', row);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody id="myList">
<tr >
<td class="form-group" style="position: relative">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
</td>
</tr>
</tbody>
<tfoot> <tr><td><a onclick="addrow()" class="fa fa-plus-circle" href="#"></a></tfoot></td></tr>
</table>
</body>
</html>

Not able to filter table with multiple rows

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.

How to add row to a bootstrap table using button

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>