Scribd
Upload
16 views2 pages

Dashboard Jaidev

This HTML document creates a survey data table using Bootstrap for styling. It includes a dropdown menu for selecting survey questions related to gender or country, which dynamically updates the table with the corresponding data. The script section is intended to handle the data population based on user selection but contains placeholders for actual data values.

Uploaded by

srahulelite
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views2 pages

Dashboard Jaidev

This HTML document creates a survey data table using Bootstrap for styling. It includes a dropdown menu for selecting survey questions related to gender or country, which dynamically updates the table with the corresponding data. The script section is intended to handle the data population based on user selection but contains placeholders for actual data values.

Uploaded by

srahulelite
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Data Table</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

</head>
<body>
<div class="container mt-4">
<div class="row mb-4">
<div class="col-md-6">
<select class="form-control" id="questionDropdown">
<option value="">Select question</option>
<option value="gender">Q1 Gender data</option>
<option value="country">Q2 Country data</option>
</select>
</div>
</div>
<div class="row mb-4">
<div class="col-md-12">
<table class="table table-bordered" id="surveyTable">
<thead>
<tr>
<th>Category</th>
<th>Number of Respondents</th>
</tr>
</thead>
<tbody>
<!-- Survey data will be inserted here -->
</tbody>
</table>
</div>
</div>
</div>

<!-- jQuery -->


<!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
<!-- Bootstrap JS -->
<!-- <script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"
></script> -->
<script>
$(document).on('globalUpdate', function() {
$(document).ready(function() {
const surveyData = {
gender: {
male: {{q1.r1}},
female: {{q1.r2}}
},
country: {
UK: {{q2.r1}},
USA: {{q2.r2}},
India: {{q2.r3}}
}
};

$('#questionDropdown').change(function() {
const selectedQuestion = $(this).val();
const tableBody = $('#surveyTable tbody');

tableBody.empty();

if (selectedQuestion === 'gender') {


tableBody.append(`<tr><td>Male</td><td>$
{surveyData.gender.male}</td></tr>`);
tableBody.append(`<tr><td>Female</td><td>$
{surveyData.gender.female}</td></tr>`);
} else if (selectedQuestion === 'country') {
tableBody.append(`<tr><td>UK</td><td>$
{surveyData.country.UK}</td></tr>`);
tableBody.append(`<tr><td>USA</td><td>$
{surveyData.country.USA}</td></tr>`);
tableBody.append(`<tr><td>India</td><td>$
{surveyData.country.India}</td></tr>`);
}
});
});
});
</script>
</body>
</html>
end

You might also like