How to initialize divs in DataTables? - javascript

I have installed a DataTable in my application and it returns back an error saying "DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2".
Now I understand that DataTables structure is meant to be working with < tr >< td >, but I would like to use spans and divs inside as shown in the preview below.
Is there any way how data tables can work on this structure? Or if there's any good alternative which can do the same job?
Thanks.
$('#dt').DataTable();
// COLLAPSE TABLE
$('tr[data-toggle="collapse"]').click(function(){
$('.insert-here').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<div class="table-responsive">
<!-- Table -->
<table class="table" id="dt">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="table-chevron" data-toggle="collapse" data-target="#AccountDetails">
<td><i class="fas fa-angle-right"></i></td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<tr>
<td class="insert-here coll-bg" colspan="8">
<!-- START OF COMPLETE ACCOUNT SETTINGS -->
<div class="collapse" id="AccountDetails">
<div class="col-12 pl-0 mt-3">
<!-- START OF ACCOUNT SETTINGS -->
<div class="col-4 pl-0 account-details-box float-left">
<h2 class="accounts-heading">Account Settings</h2>
<!-- Account Status -->
<div class="row">
<div class="col-md-6 mb-3 float-left">
<p>Account Status</p>
</div>
<div class="col-md-6 mb-3 pl-0 float-left ac-set">
<select class="form-control custom-select col-md-11">
<option>Active</option>
<option>Disabled</option>
<option>Deleted</option>
<option>Pending</option>
</select>
</div>
</div>
<!-- Account Manager -->
<div class="row">
<div class="col-md-6 mb-3 float-left">
<p>Account Manager</p>
</div>
<div class="col-md-6 mb-5 pl-0 float-left ac-set">
<select class="form-control custom-select col-md-11">
<option selected="selected">--</option>
<option>Bilal Khan</option>
<option>Rishabh Saxena</option>
<option>Abhishekh Joshi</option>
</select>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>


Search in your code maybe you have initialized dataTable twice in your code.
You shold have like this code:
$('#example').dataTable( {paging: false} );
Only one Time.

Related

My Success Message (Alert Message) doesn't vanish

My applications has different sides on which the user can add Hardware. If the user successfully add a item a Success Message is shown which vanish after a few seconds. Unfortunetly on one side it won't vanish. Does somebody know why?
On this side the message does vanish:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Greenify | Travel</title>
<!-- ############### -->
<!-- ## CSS Files ## -->
<!-- Bootstrap core CSS -->
<link th:href="#{css/bootstrap.css}" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<!-- Main CSS -->
<link rel="stylesheet" th:href="#{css/main.css}" href="../static/css/main.css">
<!-- Cards CSS -->
<link rel="stylesheet" th:href="#{css/cards.css}" href="../static/css/cards.css">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- JS-File with Dashboard-Charts -->
<script th:src="#{js/dimensions_it_travel_expenses.js}" src="../static/js/dimensions_it_travel_expenses.js"></script>
<!-- JavaScript to save data for charts in Model-->
<script>
oEmissions = [];
oEmissions.emissions_total = [[${emissions_total}]];
oEmissions.emissions_flights = [[${emission_value_flights}]];
oEmissions.emissions_train = [[${emission_value_trains}]];
oEmissions.emissions_car = [[${emission_value_cars}]];
oEmissions.emissions_hotel = [[${emission_value_hotels}]];
</script>
</head>
<body>
<div class="d-flex flex-column vh-100 overflow-hidden">
<!--Toolbar -->
<div th:insert="fragments/topbar :: topbar"></div>
<!-- Add Travel Expenses travel based - Modal -->
<div th:insert="fragments/ITTravelExpenses_Modal_Add :: ITTravelExpenses_Modal_Add"></div>
<div class="row flex-grow-1 overflow-hidden">
<div class="col-auto mh-100 overflow-hidden flex-shrink-0">
<!-- Sidebar -->
<navbar th:include="fragments/sidebar :: sidebar(dashboardActive='', dimensionsActive='active', decarbonizeActive='')"></navbar>
</div>
<div class='col mh-100 overflow-auto pe-4'>
<!-- Row 1 (Headline) -->
<div class="row">
<!-- Headline Dimensions -->
<h1 class="display-6 text-center">IT - Travel Expenses</h1>
</div>
<!-- Test Yearly Emissions<span th:each="year : ${yearlyEmissions}" th:text="${year.getValue()} + ', '">, </span> -->
<!-- Success Message -->
<!-- Error Label -->
<div th:if="${error}" th:text="${error}" class="alert alert-danger alert-dismissible fade show text-center position-fixed top-0 end-0 p-3 " style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Success Label -->
<div th:if="${success}" th:text="${success}" class="alert alert-success alert-dismissible fade show text-center position-fixed top-0 end-0 p-3 " style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Accordion with tables -->
<div class="accordion" id="accordionPanelsStayOpenExample">
<!-- Accordion-Item 1: Travel Expenses -->
<div class="accordion-item">
<h2 class="accordion-header card shadow" id="panelsStayOpen-headingOne">
<button class="accordion-button collapsed p-4" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
<h5>Travel Expenses (<span th:text="${#numbers.formatDecimal(emissions_total, 0, 'POINT', 2, 'COMMA')}"></span> CO<sub>2</sub>e)</h5>
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<!-- Button to add Travel Expenses via Modal -->
<button type="button" class="btn btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#ITTravelExpenses_Modal_Add" style="background-color: var(--own-green-2); float: right;">
<i class="bi bi-plus-lg" style="color: white;"></i>
</button>
<!-- Check if there are entries for trips. If there are no entries, a hint text will be displayed -->
<div th:if="__${trips.size()}__ == 0">
<p class="fs-6">Currently there are no entries for trips. You can add them via the add button!</p>
</div>
<!-- Check if there are entries for trips table -->
<div th:if="__${trips.size()}__ >= 1">
<table class="table table-bordered table-hover">
<thead class="table-light text-center">
<tr>
<th scope="col">Title</th>
<th scope="col">Startdate</th>
<th scope="col">Enddate</th>
<th scope="col">Amount of Persons</th>
<th scope="col">Overnight Stays</th>
<th scope="col">Travel Destination</th>
<th scope="col">Details</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="text-center">
<tr th:each="trip : ${trips}">
<td th:text="${trip.travelName}">Business Trip 1</td>
<td th:text="${#temporals.format(trip.startDate, 'dd.MM.yyyy')}">2000-08-2</td>
<td th:text="${#temporals.format(trip.endDate, 'dd.MM.yyyy')}">2000-08-22</td>
<td th:text="${trip.participants}">4</td>
<td th:text="${trip.stays} + ' days'">5</td>
<td th:text="${trip.destinationCountry}">Italy</td>
<td><i class="bi bi-box-arrow-up-right" role="button" data-bs-toggle="modal" th:attr="data-bs-target='#ITTravelExpenses_Modal_Details' + ${trip.id }"></i></td>
<td>
<table class="d-flex justify-content-center">
<tr>
<!-- <td>-->
<!-- <div>-->
<!-- <i class="bi bi-pencil-fill text-primary me-3" style="cursor: pointer"-->
<!-- data-bs-toggle="modal" th:attr="data-bs-target='#ITTravelExpenses_Modal_Update' + ${trip.id }"></i>-->
<!-- </div>-->
<!-- </td>-->
<td>
<div>
<i class="bi bi-trash-fill text-danger" role="button" type="submit" style="cursor: pointer"
data-bs-toggle="modal" th:attr="data-bs-target='#ITTravelExpenses_Modal_Delete' + ${trip.id }"></i>
</div>
</td>
</tr>
<!-- Delete Travel Expense - Modal-->
<div th:insert="fragments/ITTravelExpenses_Modal_Delete :: ITTravelExpenses_Modal_Delete"></div>
<!-- Update Travel Expense - Modal-->
<div th:insert="fragments/ITTravelExpenses_Modal_Update :: ITTravelExpenses_Modal_Update"></div>
</table>
<!-- Travel Detail Information Expense - Modal-->
<div th:insert="fragments/ITTravelExpenses_Modal_Details :: ITTravelExpenses_Modal_Details"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
<!-- Accordion-Item 5: Hotel -->
<div class="accordion-item">
<h2 class="accordion-header card shadow" id="panelsStayOpen-headingFive">
<button class="accordion-button collapsed p-4" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFive" aria-expanded="false" aria-controls="panelsStayOpen-collapseFive">
<h5>Hotel (<span th:text="${#numbers.formatDecimal(emission_value_hotels, 0, 'POINT', 2, 'COMMA')}"></span> CO<sub>2</sub>e)</h5>
</button>
</h2>
<div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFive">
<div class="accordion-body">
<!-- Check if there are entries for hotelovernights. If there are no entries, a hint text will be displayed -->
<div th:if="__${hotelovernights.size()}__ == 0">
<p class="fs-6">Currently there are no entries for hotel overnight stays.</p>
</div>
<!-- Check if there are entries for hotelovernights table -->
<div th:if="__${hotelovernights.size()}__ >= 1">
<!-- Table with Hotel -->
<table class="table table-bordered table-hover">
<thead class="table-light text-center">
<tr>
<th scope="col">Name of Trip</th>
<th scope="col">Location</th>
<th scope="col">Amount overnight stays</th>
<th scope="col">Amount of Traveller</th>
</tr>
</thead>
<tbody class="text-center">
<tr th:each="hotel : ${hotelovernights}">
<td th:text="${hotel.trip.travelName}">1</td>
<td th:text="${hotel.country}">Land</td>
<td th:text="${hotel.amountOfOvernightStays}">tage</td>
<td th:text="${hotel.trip.participants}">4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Javascript Imports -->
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons#4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
</body>
</html>
While on this side the Message does not vanish:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="../../../../favicon.ico" />
<title>Greenify | IT Infrastructure</title>
<!-- Bootstrap core CSS -->
<link th:href="#{css/bootstrap.css}" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Main CSS -->
<link rel="stylesheet" th:href="#{css/main.css}" href="../static/css/main.css"/>
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css"/>
<!-- Cards CSS -->
<link rel="stylesheet" th:href="#{css/cards.css}" href="../static/css/cards.css">
<!-- JS-File with Charts -->
<script th:src="#{js/dimension_it_infrastructure.js}" src="../static/js/dimension_it_infrastructure.js"></script>
<!-- JavaScript to save data for charts in Model-->
<script>
oEmissions = [];
oEmissions.emissions_total = [[${emissions_total}]];
oEmissions.emissions_servers = [[${servers_emissions}]];
oEmissions.emissions_clouds = [[${cloud_emissions}]];
// Labels and Values for IT Equipment CO2 Emissions Line Chart
aTotalEmissionsByYearITInfraLabels = [[${total_emissions_by_year_it_infra_labels}]];
aTotalEmissionsByYearITInfraValuesNow = [[${total_emissions_by_year_it_infra_valuesNow}]];
aTotalEmissionsByYearITInfraValuesFC = [[${total_emissions_by_year_it_infra_valuesFC}]];
</script>
</head>
<body>
<div class="d-flex flex-column vh-100 overflow-hidden">
<!--Toolbar -->
<div th:insert="fragments/topbar :: topbar"></div>
<!-- Add IT-Infrastructure Own Data Center - Modal -->
<div th:insert="fragments/ITInfrastructure_OwnDataCenter_Modal_Add :: ITInfrastructure_OwnDataCenter_Modal_Add"></div>
<!-- Add IT-Infrastructure Cloud - Modal -->
<div th:insert="fragments/ITInfrastructure_Cloud_Modal_Add :: ITInfrastructure_Cloud_Modal_Add"></div>
<!-- Page content -->
<div class="row flex-grow-1 overflow-hidden">
<!-- Sidebar -->
<div class="col-auto mh-100 overflow-hidden flex-shrink-0">
<!-- Sidebar -->
<navbar th:include="fragments/sidebar :: sidebar(dashboardActive='', dimensionsActive='active', decarbonizeActive='')"></navbar>
</div>
<!-- Content Section -->
<div class="col mh-100 overflow-auto pe-4">
<!-- Row 1 (Headline) -->
<div class="row">
<h1 class="display-6 text-center">IT - Infrastructure</h1>
</div>
<!-- Error Label -->
<div th:if="${error}" th:text="${error}" class="alert alert-danger alert-dismissible fade show text-center position-fixed top-0 end-0 p-3" style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Success Label -->
<div th:if="${success}" th:text="${success}" class="alert alert-success alert-dismissible fade show text-center position-fixed top-0 end-0 p-3" style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Accordion with tables of Own Data Centers and Cloud -->
<div class="accordion" id="accordionPanelsStayOpenExample">
<!-- Accordion-Item 1: Own Data Centers -->
<div class="accordion-item">
<h2 class="accordion-header card shadow" id="panelsStayOpen-headingOne">
<button
class="accordion-button collapsed p-4"
type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne"
aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo">
<h5>Own Data Centers (<span th:text="${#numbers.formatDecimal(servers_emissions, 0, 'POINT', 2, 'COMMA')}">0</span>kg CO<sub>2</sub>e)
</h5>
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<!-- Button to add Own Data Centers via Modal -->
<button type="button" class="btn btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#ITInfrastructure_OwnDataCenter_Modal_Add" style="background-color: var(--own-green-2); float: right">
<i class="bi bi-plus-lg" style="color: white"></i>
</button>
<!-- Check if there are entries for servers table. If there are no entries, a hint text will be displayed -->
<div th:if="__${servers.size()}__ == 0">
<p class="fs-6">
Currently there are no entries for own data centers. You
can add them via the add button!
</p>
</div>
<!-- Check if there are entries for servers table -->
<div th:if="__${servers.size()}__ >= 1">
<table class="table table-bordered table-hover">
<thead class="table-light text-center">
<tr>
<th scope="col">Title</th>
<th scope="col">Amount</th>
<th scope="col">Location</th>
<th scope="col">Start Date</th>
<th scope="col">Period of use</th>
<th scope="col">State</th>
<th scope="col">Power Consumption Active Mode</th>
<th scope="col">
Daily Usage in Active Mode (in hours)
</th>
<th scope="col">Power Consumption IDLE Mode</th>
<th scope="col">
Daily Usage in IDLE Mode (in hours)
</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody class="text-center">
<tr th:each="server : ${servers}">
<!--<td th:text="${tablet.id}">1</td>-->
<td th:text="${server.title}">5</td>
<td th:text="${server.amount}">5</td>
<td th:text="${server.location}">Germany</td>
<td th:text="${#temporals.format(server.startDate, 'dd.MM.yyyy')}">Lenovo</td>
<td th:text="${server.periodOfUse}">4</td>
<td th:text="${server.state}">4</td>
<td th:text="${server.activeMode}">60</td>
<td th:text="${server.usageActiveMode}">60</td>
<td th:text="${server.standbyMode}">60</td>
<td th:text="${server.usageStandbyMode}">60</td>
<td>
<table class="d-flex justify-content-center">
<tr>
<td>
<div>
<i class="bi bi-pencil-fill text-primary me-3" style="cursor: pointer" data-bs-toggle="modal" data-bs-target="#ITInfrastructure_OwnDataCenter_Modal_Update"
th:attr="data-bs-target='#ITInfrastructure_OwnDataCenter_Modal_Update' + ${server.id}"
></i>
</div>
</td>
<td>
<div>
<i class="bi bi-trash-fill text-danger" role="button" type="submit" style="cursor: pointer" data-bs-toggle="modal"
data-bs-target="#ITInfrastructure_OwnDataCenter_Modal_Delete" th:attr="data-bs-target='#ITInfrastructure_OwnDataCenter_Modal_Delete' + ${server.id}"
></i>
</div>
</td>
</tr>
<!-- Update IT Infrastructure Own Data Centers - Modal -->
<div th:insert="fragments/ITInfrastructure_OwnDataCenter_Modal_Update :: ITInfrastructure_OwnDataCenter_Modal_Update"></div>
<!-- Delete IT Infrastructure Own Data Centers - Modal -->
<div th:insert="fragments/ITInfrastructure_OwnDataCenter_Modal_Delete :: ITInfrastructure_OwnDataCenter_Modal_Delete"></div>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Javascript Imports -->
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons#4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
</body>
</html>
The Java Script coding to let the Message vanish is the following:
/* globals Chart:false, feather:false */
window.onload = function () {
// This coding let the Success Message vanish after some time
$(document).ready(function () {
// autodismiss alerts
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 4000);
});
}
I load the Java Script coding in a extra file but it doesn't causes the problem, even if i put the coding in the same file in which the coding for the side is, it still does not vanish....
Does anyone know why?

I have 2 elements in a div side by side, will hiding one make the other expand to fill the space of the div they're in?

The app has 3 rows of 2 tables each [in the code snippet there's just one row] and I'm trying to create events that:
Header is clicked
The other table in the row becomes hidden
The table with the clicked header expands to fill the div space
Is this possible?
I've tried using Bootstrap expand and collapse but that doesn't really fulfill what I want the code to do.
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header bg-dark text-white">
Post Change
</div>
<div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
<div class="col-12">
<table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25]" data-sort-name="memui" data-sort-order="asc">
<thead>
<tr>
[TABLE GOES HERE]
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header bg-dark text-white">
New Members
</div>
<div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
<div class="col-12">
<table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25,50,100,250,500]" data-sort-name="memui" data-sort-order="asc">
<thead>
<tr>
[TABLE GOES HERE]
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
I am expecting the clicked table to expand to fill the space the other hidden table takes up when it becomes hidden.

To accomplish this, add a click event handler to the header for each table. In these handlers, you can hide the div you don't want to be shown, but you will also need to update the displayed div to make it use the remaining space. This can be done by adding the col-12 class and removing the col-6 class (also during the same event).
I'm not sure if you're using any libraries, but with jQuery it would look something like this:
$('#table1headerid').click(function(){
$('#div2id').hide();
$('#div1id').removeClass('col-6').addClass('col-12');
});
$('#table2headerid').click(function(){
$('#div1id').hide();
$('#div2id').removeClass('col-6').addClass('col-12');
});
This can be done without jQuery of course, but I'm lazy :)

****TO VIEW THIS PLEASE CLICK EXPAND SNIPPET ****
In here what I did was just add JQuery and toggle the col-6 with col-md-11 and col-md-1. I didnt hide the DIV. If you wants to hide a dive you can use d-none in JQuery.
function hideOrExpandDivPostChange(){
$('#postChange').toggleClass('col-md-1');
$('#newMember').toggleClass('col-md-11');
}
function hideOrExpandDivNewMember(){
$('#newMember').toggleClass('col-md-11');
$('#postChange').toggleClass('col-md-1');
}
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6" id="postChange" onclick="hideOrExpandDivPostChange()">
<div class="card">
<div class="card-header bg-dark text-white">
Post Change
</div>
<div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
<div class="col-12">
<table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25]" data-sort-name="memui" data-sort-order="asc">
<thead>
<tr>
[TABLE GOES HERE]
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div class="col-6" id="newMember" onclick="hideOrExpandDivNewMember()">
<div class="card">
<div class="card-header bg-dark text-white">
New Members
</div>
<div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
<div class="col-12">
<table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25,50,100,250,500]" data-sort-name="memui" data-sort-order="asc">
<thead>
<tr>
[TABLE GOES HERE]
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Include Javascript

I want to include some javascript code in my view, but have no idea of how to do it. I've look for that with no success, there is no clear reference of that.
I want to insert some selectable tables with bootstrap, the reference is at https://datatables.net/extensions/select/examples/styling/bootstrap4.html.
the javascript is this
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} );
the table is this
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
...
They say that I have to include this javascript librarys
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js
https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js
But, where do I do that?? there's no html head...
I tryed the tipical
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} );
document.write(5 + 6);
</script>
How do I fire the code, I suppose that it is done when the table loads, with the reference of #example...
Ok, I have try some things. Certainly I don't want you to solve my issue, but nothing has worked. I include almost the full code. It has to be working as in the example from the upper link . I don't know if the fact that laravel 5.5 is actually working with bootstrap 4 and not the included one is a factor, I don't know actually if it is working by default with jquery...
#extends('layouts.app')
#section('content')
#guest
#else
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Venta</a>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-1 d-block bg-light sidebar">
<div class="sidebar-sticky">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Acciones</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<span data-feather="home"></span>
<span class="sr-only"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="/gymmgr/public/notas/{{ $nota->idNota }}/edit">
<span data-feather="shopping-cart"></span>
Editar
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
onclick="
var result = confirm ('¿Estas seguro de que deseas borrar el grupo?');
if (result)
{
event.preventDefault();
document.getElementById('delete-form').submit();
}
"
>
<span data-feather="users"></span>
Borrar
</a>
<form id="delete-form" action="{{ route('notas.store')}}"
method="POST" style="display: none;">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
</form>
</li>
<li class="nav-item">
<a class="nav-link" href="/gymmgr/public/notas/">
<span data-feather="users"></span>
Regresar
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h5">Nota de venta</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Exportar</button>
</div>
</div>
</div>
<div class="border-bottom">
<div class="col-md-8 order-md-1 ">
<form class="needs-validation" novalidate>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="true"> Pagada
</label>
</div>
<div class="col-md-12">
<label for="usuario">Usuario</label>
<select class="custom-select d-block w-100" id="usuario">
<option value="">Selecciona...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<p>
<div class="form-group">
<label for="strNota">Comentarios</label>
<textarea class="form-control" rows="3" id="strNota" name="text"></textarea>
</div>
</p>
<p>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</p>
</form>
</div>
</div>
</main>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h5">Partidas</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create-horario">+</button>
<div class="modal fade" id="create-horario" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Nueva partida</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('notas.store') }}" method="post">
{{ csrf_field() }}
<div class="modal-body">
<input type="hidden" id="groupID" name="groupID" value= {{ $nota->idNota }} >
<div class="form-group">
<label for="intDia" class="col-form-label">Día de la semana</label>
<select name="intDia" class="form-control">
<option value="1" selected> Lunes</option>
<option value="2" > Martes</option>
<option value="3" > Miércoles</option>
<option value="4" > Jueves</option>
<option value="5" > Viernes</option>
<option value="6" > Sábado</option>
<option value="7" > Domingo</option>
</select>
</div>
<div class="form-group">
<div style="width:50%;float:left;display:inline-block;">
<label for="timHoraInicio" class="col-form-label">Hora de inicio</label>
<input type="time" id="timHoraInicio" name="timHoraInicio" min="9:00" max="18:00" value="09:00" >
</div>
<div align="right">
<label for="timHoraFin" class="col-form-label">Hora de fin</label>
<input type="time" id="timHoraFin" name="timHoraFin" min="9:00" max="18:00" value="10:00">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary" id="submitForm">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</main>
</div>
</div>
</div>
</div>
#endguest
#push('scripts')
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script>
//anyjscode
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} );
</script>
#endpush
#endsection
Thanks in advance.

At this to the end of view, but within the section block. If your view is a standalone file, that does not extend any other views/layouts, such as the app.blade.php file, then ignore the section block.
#section <!--this block assumes you're extending another file-->
<your-html>
</your-html>
#push('scripts')
<script src="https://cdn.sample.js"></script>
<script src="https://cdn.sample.js"></script>
<script src="https://cdn.sample.js"></script>
<script>
//anyjscode
</script>
#endpush
#endsection

Hello try with Laravel Collective
How to install? here
Import you js file in your blade file:
{!! HTML::script('js/modulos/comun.js') !!}
And, in you js file write whatever else, for example:
file.js
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} );

I think you can achieve what you're after by including a separate yield() in your template file at the bottom of the body tag:
#yield('scripts')
In your view Blade try adding :
#section('content')
Your Content goes here…
#endsection
#section('scripts')
<script type="text/javascript">
<script src="https://cdn.sample.js"></script>
<script>
//anyjscode
</script>
#endsection

Using Jquery tabs isn't working properly

I have 3 different graphs I want to put in tabs and open when selected upon. I used a boostrap elements to make 3 of the graphs. I followed along the Jquery site and used that example and it isn't working how it should. For Example, when I click Tab 1 I want Graph one to appear. I've posted the code below.
$(document).ready(function(){
$( '#tabs' ).tabs();
});
.col-md-1{ padding: 10px;
border:1px solid white;
}
#size { padding: 10px;
border:1px solid white;
}
#page{padding-bottom: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CS2100 Project 3</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- Bootstrap -->
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="project3.css">
<!-- 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>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<div id="tabs">
<ul>
<li>PART 1</li>
<li>PART 2</li>
<li>PART 3</li>
</ul>
<div class="container" id="part1">
<h3>PART 1: 7-Day Forecast (HTML)</h3>
<table class="table table-hover table-bordered text-center">
<tbody>
<tr class="bg-primary text-primary">
<th class="text-center">Forecast</th>
<th class="text-center">Thursday</th>
<th class="text-center">Friday</th>
<th class="text-center">Saturday</th>
<th class="text-center">Sunday</th>
<th class="text-center">Monday</th>
<th class="text-center">Tuesday</th>
<th class="text-center">Wednesday</th>
</tr>
<tr>
<td>High</td>
<td>88</td>
<td>81</td>
<td>75</td>
<td>83</td>
<td>87</td>
<td>90</td>
<td>91</td>
</tr>
<tr>
<td>Low</td>
<td>61</td>
<td>59</td>
<td>52</td>
<td>57</td>
<td>59</td>
<td>63</td>
<td>65</td>
</tr>
<tr>
<td>Precip</td>
<td>0%</td>
<td>50%</td>
<td>40%</td>
<td>10%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
</tbody>
</table>
</div>
<div id="part2">
<div class="container" id="page">
<h3>PART 2: 7-Day Forecast (Bootstrap Grid)</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-center">Forecast</div>
<div class="col-md-1 text-center">Thursday</div>
<div class="col-md-1 text-center">Friday</div>
<div class="col-md-1 text-center">Saturday</div>
<div class="col-md-1 text-center">Sunday</div>
<div class="col-md-1 text-center">Monday</div>
<div class="col-md-1 text-center">Tuesday</div>
<div class="col-md-1 text-center">Wednesday</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">0</div>
<div class="col-md-1 text-center">88</div>
<div class="col-md-1 text-center">81</div>
<div class="col-md-1 text-center">75</div>
<div class="col-md-1 text-center">83</div>
<div class="col-md-1 text-center">87</div>
<div class="col-md-1 text-center">90</div>
<div class="col-md-1 text-center">91</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Low</div>
<div class="col-md-1 text-center">61</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">52</div>
<div class="col-md-1 text-center">57</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">63</div>
<div class="col-md-1 text-center">65</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Precip</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">50%</div>
<div class="col-md-1 text-center">40%</div>
<div class="col-md-1 text-center">10%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
</div>
</div>
<div id="part3">
<div class="container" id="page">
<h3>PART 3: TCP PACKET STRUCTURE</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-right" id="size">Byte#</div>
<div class="col-md-3 text-center" id="size">+0</div>
<div class="col-md-3 text-center" id="size">+1</div>
<div class="col-md-3 text-center" id="size">+2</div>
<div class="col-md-2 text-center" id="size">+3</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">0</div>
<div class="col-md-5 text-center" id="size">Source Port</div>
<div class="col-md-6 text-center" id="size">Destination Port</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">4</div>
<div class="col-md-11 text-center" id="size">Sequence Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-11 text-center" id="size">ACK Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-1 text-center" id="size">Offset</div>
<div class="col-md-1 text-center" id="size">Reserved</div>
<div class="col-md-5 text-center" id="size">Flags</div>
<div class="col-md-4 text-center" id="size">Window Size</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">16</div>
<div class="col-md-5 text-center" id="size">Checksum</div>
<div class="col-md-6 text-center" id="size">Urgent Pointer</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">20-56</div>
<div class="col-md-11 text-center" id="size">Options</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

I believe the issue is with the additionally declared jQuery library at the bottom of the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"</script>
As well, you have not included the jQuery UI library:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
$(document).ready(function(){
$( '#tabs' ).tabs();
});
.col-md-1{ padding: 10px;
border:1px solid white;
}
#size { padding: 10px;
border:1px solid white;
}
#page{padding-bottom: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CS2100 Project 3</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Bootstrap -->
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="project3.css">
<!-- 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>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<div id="tabs">
<ul>
<li>PART 1</li>
<li>PART 2</li>
<li>PART 3</li>
</ul>
<div class="container" id="part1">
<h3>PART 1: 7-Day Forecast (HTML)</h3>
<table class="table table-hover table-bordered text-center">
<tbody>
<tr class="bg-primary text-primary">
<th class="text-center">Forecast</th>
<th class="text-center">Thursday</th>
<th class="text-center">Friday</th>
<th class="text-center">Saturday</th>
<th class="text-center">Sunday</th>
<th class="text-center">Monday</th>
<th class="text-center">Tuesday</th>
<th class="text-center">Wednesday</th>
</tr>
<tr>
<td>High</td>
<td>88</td>
<td>81</td>
<td>75</td>
<td>83</td>
<td>87</td>
<td>90</td>
<td>91</td>
</tr>
<tr>
<td>Low</td>
<td>61</td>
<td>59</td>
<td>52</td>
<td>57</td>
<td>59</td>
<td>63</td>
<td>65</td>
</tr>
<tr>
<td>Precip</td>
<td>0%</td>
<td>50%</td>
<td>40%</td>
<td>10%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
</tbody>
</table>
</div>
<div id="part2">
<div class="container" id="page">
<h3>PART 2: 7-Day Forecast (Bootstrap Grid)</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-center">Forecast</div>
<div class="col-md-1 text-center">Thursday</div>
<div class="col-md-1 text-center">Friday</div>
<div class="col-md-1 text-center">Saturday</div>
<div class="col-md-1 text-center">Sunday</div>
<div class="col-md-1 text-center">Monday</div>
<div class="col-md-1 text-center">Tuesday</div>
<div class="col-md-1 text-center">Wednesday</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">0</div>
<div class="col-md-1 text-center">88</div>
<div class="col-md-1 text-center">81</div>
<div class="col-md-1 text-center">75</div>
<div class="col-md-1 text-center">83</div>
<div class="col-md-1 text-center">87</div>
<div class="col-md-1 text-center">90</div>
<div class="col-md-1 text-center">91</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Low</div>
<div class="col-md-1 text-center">61</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">52</div>
<div class="col-md-1 text-center">57</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">63</div>
<div class="col-md-1 text-center">65</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Precip</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">50%</div>
<div class="col-md-1 text-center">40%</div>
<div class="col-md-1 text-center">10%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
</div>
</div>
<div id="part3">
<div class="container" id="page">
<h3>PART 3: TCP PACKET STRUCTURE</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-right" id="size">Byte#</div>
<div class="col-md-3 text-center" id="size">+0</div>
<div class="col-md-3 text-center" id="size">+1</div>
<div class="col-md-3 text-center" id="size">+2</div>
<div class="col-md-2 text-center" id="size">+3</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">0</div>
<div class="col-md-5 text-center" id="size">Source Port</div>
<div class="col-md-6 text-center" id="size">Destination Port</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">4</div>
<div class="col-md-11 text-center" id="size">Sequence Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-11 text-center" id="size">ACK Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-1 text-center" id="size">Offset</div>
<div class="col-md-1 text-center" id="size">Reserved</div>
<div class="col-md-5 text-center" id="size">Flags</div>
<div class="col-md-4 text-center" id="size">Window Size</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">16</div>
<div class="col-md-5 text-center" id="size">Checksum</div>
<div class="col-md-6 text-center" id="size">Urgent Pointer</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">20-56</div>
<div class="col-md-11 text-center" id="size">Options</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

HTML Table, retrieving data from row and displaying it elsewhere

I'm trying to make it so when you click on a row in the table, depending what row you press, it will display that data into the other panel. So when I click the first row, the Number in the table fills out the number in the other panel, under "Readings". As well as the Name in the table, filling out the Name field under "Readings". How would I go about doing this?
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Table</h4>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>First</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Second</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Third</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Fourth</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Form</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Readings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Number:</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="1" disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="device" class="form-control" value="Name here" />
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-10 -->
</div>
<!-- end row -->

There you go pal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Table</h4>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>First</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Second</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Third</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Fourth</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Form</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Readings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Number:</label>
<div class="col-md-8">
<input
type="text"
id="numberInput"
class="form-control"
placeholder="Number"
disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input
type="text"
id="deviceInput"
class="form-control"
value="Name here" />
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-10 -->
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- end row -->
<script>
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#numberInput');
var device = document.querySelector('#deviceInput');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
device.value = data[1];
}
})();
</script>
</body>
</html>

With vanilla Javascript (there are data-binding libraries that can handle this), table rows do have click events. So you can create a function that handles that click event.
You can either use the onclick attribute or addEventListener method of HTML elements. You can explicitly state the input to the function or calculate it. So say the function name is updateOther, you could do updateOther(1,'First') or updateOther(this). The latter will pass the row element that was clicked and you can extract the pertinent information.

$(document).ready(function(){
$(".gradeA").click(function(){
var currentRow = this;
var number = $(this).find("td")[0].innerText;
var name = $(this).find("td")[1].innerText;
$("form input[type='text']").val(number);
$("form input[type='device']").val(name);
})
});

Categories

Resources