695 lines
28 KiB
PHP
695 lines
28 KiB
PHP
<style>
|
||
.table th,
|
||
.table td {
|
||
padding: 4px;
|
||
}
|
||
|
||
table.dataTable tbody td {
|
||
padding: 4px 4px !important;
|
||
}
|
||
|
||
.btn .btn-secondary .buttons-csv .buttons-html5 .my_class {
|
||
position: relative;
|
||
left: 79px;
|
||
}
|
||
|
||
/* Add styles for the table and its elements as needed */
|
||
.disabled {
|
||
background-color: #ddd; /* Set desired gray color for disabled rows */
|
||
}
|
||
|
||
.small-width {
|
||
width: 5%;
|
||
}
|
||
.medium-width {
|
||
width: 10%;
|
||
}
|
||
.large-width {
|
||
width: 15%;
|
||
}
|
||
.extra-large-width {
|
||
width: 20%;
|
||
}
|
||
|
||
</style>
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
<div class="row">
|
||
<div class="col-xl-12">
|
||
<div id="accordion" class="mb-3">
|
||
<div class="card mb-1">
|
||
<h5 class="m-1">
|
||
<a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne" aria-expanded="true">
|
||
<i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
|
||
</a>
|
||
</h5>
|
||
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
|
||
<div class="card-body">
|
||
<!-- <div class="text-center"> -->
|
||
<div class="form-row">
|
||
<div class="form-group col-md-4">
|
||
<label>Client</label> <br />
|
||
<select class="form-control" id="clients">
|
||
<option value="0">Select</option>
|
||
</select>
|
||
</div>
|
||
|
||
|
||
<div class="form-group col-md-4">
|
||
<label>Branch</label> <br />
|
||
<select name="branch_id" class="form-control" id="branch_id">
|
||
<option value="0">Select</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group col-md-4">
|
||
<label>Policy</label> <br />
|
||
<select class="form-control" id="policies">
|
||
<option value="0">Select</option>
|
||
</select>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
<div class="row">
|
||
<!-- <div class="col-6" style="text-align: right;">
|
||
<a href="<?= base_url("employee/endorsement-list"); ?>" class="btn btn-primary waves-effect waves-light" id="get-emp-list" onclick="fetchEmpolyeeList(event);">Submit</a>
|
||
</div> -->
|
||
<div class="col-12" style="text-align: right;">
|
||
<a href="<?= base_url("employee/endorsement-list"); ?>" class="btn btn-primary waves-effect waves-light" id="get-emp-list" onclick="calculatePremium(event);" >calc</a>
|
||
<a href="#" class="btn btn-primary waves-effect waves-light" id="get-emp-list" onclick="addRowToTable();">+</a>
|
||
</div>
|
||
<!-- <button onclick="addRowToTable()">Add Row</button> -->
|
||
</div>
|
||
<!-- </div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="row" id="client_list">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row" style="padding-bottom: 10px;">
|
||
<!-- <div class="col-6" style="align-self: center;">
|
||
<h4 style="position: relative;">Endorsement List</h4>
|
||
</div> -->
|
||
<div id="suggestion-box" style="display: none; position: absolute; background-color: #fff; border: 1px solid #ccc; padding: 5px; z-index: 100;">
|
||
Suggestions, pick any one
|
||
<ul id="suggestions"></ul>
|
||
</div>
|
||
</div>
|
||
<table class="table table-hover m-0 table-centered dt-responsive w-100" cellspacing="0" id="emptable">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th class="small-width">SNO</th>
|
||
<th class="small-width">Emp code</th>
|
||
<th class="large-width">Name</th>
|
||
<th class="large-width">DOB</th>
|
||
<th class="small-width">Gender</th>
|
||
<th class="medium-width">Relation</th>
|
||
<th class="large-width">SI</th>
|
||
<th class="medium-width">DOC</th>
|
||
<th class="medium-width">Basic pay</th>
|
||
<th class="small-width">Band</th>
|
||
<th class="small-width">Unit</th>
|
||
<th class="small-width">Delete</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody id='emptablebody'>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div>
|
||
|
||
|
||
|
||
<div class="modal fade" id="centermodal" tabindex="-1" role="dialog" aria-hidden="true" >
|
||
<div class="modal-dialog modal-dialog-centered" style="max-width:80%;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="myCenterModalLabel">Center modal</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<h5>Overflowing text to show scroll behavior</h5>
|
||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div><!-- /.modal -->
|
||
|
||
|
||
|
||
<script>
|
||
$(document).ready(function() {
|
||
// Initialize select2
|
||
$("#clients").select2();
|
||
$("#policies").select2();
|
||
$("#branch_id").select2();
|
||
});
|
||
|
||
// Declare a global variable to store API response data
|
||
var clientPolicies = [];
|
||
var clientPoliciesWithBranch = {
|
||
policies: []
|
||
};
|
||
var client_id = '<?= isset($getData) ? $getData['client_id'] : '0' ?>';
|
||
var client_branch_id = '<?= isset($getData) ? $getData['branch_id'] : '0' ?>';
|
||
|
||
$(window).on("load", function() {
|
||
console.log("window loaded");
|
||
// $('#centermodal').modal('show');
|
||
fetchClientPolicies();
|
||
|
||
addRowToTable(['Ram Kumar','01-Apr-1990','M','Self','500000','',450000,'A','unit1']);
|
||
addRowToTable(['Sita','01-Apr-1993','F','Spouse','500000','','','A','unit1']);
|
||
|
||
});
|
||
|
||
|
||
function fetchClientPolicies() {
|
||
|
||
$('#loader').show();
|
||
var apiURL = '<?php echo base_url(); ?>' + 'util/clients-with-policies';
|
||
console.log('fetchClientPolicies');
|
||
// console.log(apiURL);
|
||
$.ajax({
|
||
url: apiURL,
|
||
method: 'GET',
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
"X-Requested-With": "XMLHttpRequest"
|
||
},
|
||
success: function(response) {
|
||
// console.log(response.code);
|
||
// console.log(response.dataStatus);
|
||
// console.log(response.data);
|
||
if (response.code === 200 && response.dataStatus === true && response.data !== "") {
|
||
try {
|
||
clientPolicies = (response.data);
|
||
|
||
|
||
response.data.forEach(policy => {
|
||
// console.log('policies', policy.policies);
|
||
policy.policies.forEach(p => {
|
||
clientPoliciesWithBranch.policies.push(p);
|
||
});
|
||
});
|
||
|
||
// console.log(clientPolicies);
|
||
appendClients(clientPolicies);
|
||
|
||
setTimeout(function() {
|
||
if (client_id) {
|
||
var foundPolicies = clientPolicies.find(function(item) {
|
||
// console.log(typeof item.id)
|
||
return item.id == client_id;
|
||
});
|
||
appendBranch(foundPolicies.branchs);
|
||
}
|
||
}, 500);
|
||
|
||
setTimeout(function() {
|
||
if (client_branch_id) {
|
||
|
||
var foundPolicies = clientPoliciesWithBranch.policies.filter(function(item) {
|
||
// console.log('item', item);
|
||
return item.branch_id === client_branch_id;
|
||
});
|
||
|
||
if (foundPolicies) {
|
||
// console.log('foundPolicies', foundPolicies);
|
||
appendPolicies(foundPolicies);
|
||
} else {
|
||
console.log('No policies found for the selected client');
|
||
}
|
||
}
|
||
}, 500);
|
||
|
||
} catch (error) {
|
||
console.error('Error parsing API response data:', error);
|
||
}
|
||
} else if (response.code === 404 && response.dataStatus === false) {
|
||
console.error('no data found', response);
|
||
} else {
|
||
console.error('Something went wrong!');
|
||
}
|
||
},
|
||
error: function(xhr, status, error) {
|
||
console.error('Error fetching data from API:', error);
|
||
}
|
||
});
|
||
|
||
$('#loader').hide();
|
||
}
|
||
|
||
|
||
function appendClients(data) {
|
||
|
||
var clientID = <?= isset($getData) ? $getData['client_id'] : '0' ?>;
|
||
$.each(data, function(index, item) {
|
||
var option = $('<option>', {
|
||
value: item.id,
|
||
text: item.client_name
|
||
});
|
||
if (clientID == item.id) {
|
||
option.attr('selected', true);
|
||
}
|
||
$('#clients').append(option);
|
||
});
|
||
}
|
||
|
||
|
||
function appendBranch(data) {
|
||
|
||
$('#branch_id').empty();
|
||
$('#branch_id').append($('<option>', {
|
||
value: '0',
|
||
text: 'Select'
|
||
}));
|
||
$.each(data, function(index, item) {
|
||
var option = $('<option>', {
|
||
value: item.id,
|
||
text: item.branch_name
|
||
});
|
||
if (client_branch_id == item.id) {
|
||
option.attr('selected', true);
|
||
}
|
||
$('#branch_id').append(option);
|
||
});
|
||
}
|
||
|
||
|
||
function appendPolicies(data) {
|
||
|
||
$('#policies').empty();
|
||
$('#policies').append($('<option>', {
|
||
value: '0',
|
||
text: 'Select'
|
||
}));
|
||
|
||
var PolicyID = <?= isset($getData) ? $getData['policy_id'] : '0' ?>;
|
||
// console.log(PolicyID)
|
||
$.each(data, function(index, item) {
|
||
var option = $('<option>', {
|
||
value: item.client_policy_id,
|
||
text: `${item.name ?? ''} - ${item.policy_no ?? ''} - ${item.policy_type ?? ''}`
|
||
});
|
||
if (PolicyID == item.client_policy_id) {
|
||
option.attr('selected', true);
|
||
}
|
||
$('#policies').append(option);
|
||
});
|
||
}
|
||
|
||
$(document).ready(function() {
|
||
|
||
$('#clients').on('change', function() {
|
||
|
||
$('#policies').empty();
|
||
$('#policies').append($('<option>', {
|
||
value: '0',
|
||
text: 'Select'
|
||
}));
|
||
|
||
var selectedClient = $(this).val();
|
||
// console.log(selectedClient);
|
||
// $('#selectedOptionInfo').text('Selected option: ' + selectedOption);
|
||
|
||
// Check if the selected option exists in apiData
|
||
var foundPolicies = clientPolicies.find(function(item) {
|
||
return item.id === selectedClient;
|
||
});
|
||
// console.log(foundPolicies.branchs);
|
||
appendBranch(foundPolicies.branchs);
|
||
});
|
||
|
||
});
|
||
|
||
$(document).ready(function() {
|
||
|
||
$('#branch_id').on('change', function() {
|
||
|
||
var selectedClient = $(this).val();
|
||
|
||
// console.log('selectedBranch', selectedClient);
|
||
// console.log('clientPolicies', clientPoliciesWithBranch);
|
||
|
||
var foundPolicies = clientPoliciesWithBranch.policies.filter(function(item) {
|
||
// console.log('item', item);
|
||
return item.branch_id === selectedClient;
|
||
});
|
||
|
||
|
||
if (Array.isArray(foundPolicies) && foundPolicies.length === 0) {
|
||
|
||
appendPolicies(foundPolicies);
|
||
toastr.warning('No policies found for the selected client branch.');
|
||
|
||
} else {
|
||
|
||
// console.log('foundPolicies', foundPolicies);
|
||
appendPolicies(foundPolicies);
|
||
}
|
||
});
|
||
|
||
});
|
||
|
||
// Function to convert object to query parameters
|
||
function objectToQueryString(obj) {
|
||
return Object.keys(obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
|
||
}
|
||
|
||
function calculatePremium() {
|
||
event.preventDefault(); // Prevent default action
|
||
let table = document.getElementById('emptable');
|
||
let tabledata = getTableDataAsJson(table);
|
||
// return;
|
||
var client_id = $('#clients').val();
|
||
var policy_id = $('#policies').val();
|
||
var branch_id = $('#branch_id').val();
|
||
// console.log(client_id + '-' + policy_id);
|
||
// if (client_id == '0' || policy_id == '0') {
|
||
// alert('Please select values in both dropdowns.');
|
||
// return;
|
||
// }
|
||
|
||
var queryParams = {
|
||
client_id: client_id,
|
||
policy_id: policy_id,
|
||
branch_id: branch_id,
|
||
data: tabledata,
|
||
};
|
||
|
||
|
||
// $('#loader').show();
|
||
var apiURL = '<?php echo base_url(); ?>' + 'employee/test-rack-rate';
|
||
console.log('calculatePremium');
|
||
// console.log(apiURL);
|
||
$.ajax({
|
||
url: apiURL,
|
||
method: 'POST',
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
"X-Requested-With": "XMLHttpRequest"
|
||
},
|
||
data: JSON.stringify(queryParams),
|
||
success: function(response) {
|
||
console.log(response);
|
||
|
||
var myModal = new bootstrap.Modal(document.getElementById('centermodal'), { keyboard: true });
|
||
|
||
// Show the modal
|
||
myModal.show();
|
||
// return;
|
||
// console.log(response.dataStatus);
|
||
// console.log(response.data);
|
||
if (response.code === 200 && response.dataStatus === true && response.data !== "") {
|
||
// $("#centermodal").modal('show');
|
||
console.log('success');
|
||
} else if (response.code === 404 && response.dataStatus === false) {
|
||
console.error('no data found', response);
|
||
} else {
|
||
console.error('Something went wrong!');
|
||
}
|
||
},
|
||
error: function(xhr, status, error) {
|
||
console.error('Error fetching data from API:', error);
|
||
}
|
||
});
|
||
|
||
// $('#loader').hide();
|
||
|
||
|
||
}
|
||
|
||
document.getElementById('toggleIcon').addEventListener('click', function() {
|
||
var icon = document.getElementById('icon');
|
||
icon.classList.toggle('mdi-chevron-down');
|
||
icon.classList.toggle('mdi-chevron-up');
|
||
});
|
||
|
||
|
||
function formatNumberToIndianLocale(value, field_name, action) {
|
||
|
||
// Check if the value is a valid number (either as a number or as a string)
|
||
if (!isNaN(value) && !isNaN(parseFloat(value)) && field_name != 'No of Days') {
|
||
|
||
// Convert the value to a number and format it using Indian English locale
|
||
var return_val = parseFloat(value).toLocaleString('en-IN');
|
||
|
||
if (field_name == 'Period of non coverage') {
|
||
|
||
return value + ' days';
|
||
}
|
||
|
||
if (field_name == 'Total Amount') {
|
||
|
||
return '₹ ' + return_val + ' ( To be Refunded )';
|
||
}
|
||
|
||
if (field_name == 'Total') {
|
||
|
||
if (action == 'd') {
|
||
|
||
return '₹ ' + return_val + ' ( To be Refunded )';
|
||
|
||
} else if (action == 'si') {
|
||
|
||
return '₹ ' + return_val + ' ( To be paid )';
|
||
}
|
||
|
||
}
|
||
|
||
return '₹ ' + return_val;
|
||
|
||
} else {
|
||
// Return the original value if it's not a valid number
|
||
return value;
|
||
}
|
||
}
|
||
|
||
$('.close').click(function() {
|
||
|
||
$('#table_data').empty();
|
||
})
|
||
|
||
const suggestionBox = document.getElementById("suggestion-box");
|
||
const suggestionsList = document.getElementById("suggestions");
|
||
|
||
function addRowToTable(default_data = false) {
|
||
console.log(default_data);
|
||
const tableBody = document.getElementById("emptablebody");
|
||
const existingRowCount = tableBody.rows.length;
|
||
|
||
const newRow = document.createElement("tr");
|
||
|
||
let newCell;
|
||
|
||
// SNO with auto-increment
|
||
newCell = document.createElement("td");
|
||
newCell.textContent = existingRowCount + 1;
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
newRow.appendChild(newCell);
|
||
|
||
// Emp code (assuming you want an input field)
|
||
newCell = document.createElement("td");
|
||
newCell.innerHTML = 'FAM001';
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
newRow.appendChild(newCell);
|
||
|
||
// Name (assuming you want an input field)
|
||
newCell = document.createElement("td");
|
||
newCell.innerHTML = (default_data != false ? default_data[0] : '');
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
newRow.appendChild(newCell);
|
||
|
||
// **HERE'S WHERE YOU ADD CELLS FOR OTHER COLUMNS**
|
||
|
||
// DOB (assuming you want a date input field)
|
||
newCell = document.createElement("td");
|
||
// newCell.innerHTML = '<input type="date" class="form-control">'; // Adjust for your needs
|
||
newCell.innerHTML = (default_data != false ? default_data[1] : ''); // Adjust for your needs
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
newRow.appendChild(newCell);
|
||
|
||
// Gender (assuming you want a date input field)
|
||
newCell = document.createElement("td");
|
||
newCell.innerHTML = (default_data != false ? default_data[2] : ''); // Adjust for your needs
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
// newCell.addEventListener("input", handleInput);
|
||
newRow.appendChild(newCell);
|
||
|
||
// relationship (assuming you want a date input field)
|
||
newCell = document.createElement("td");
|
||
newCell.innerHTML = (default_data != false ? default_data[3] : ''); // Adjust for your needs
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
newCell.addEventListener("input", handleInput);
|
||
newRow.appendChild(newCell);
|
||
|
||
// SI (assuming you want a date input field)
|
||
newCell = document.createElement("td");
|
||
newCell.innerHTML = (default_data != false ? default_data[4] : ''); // Adjust for your needs
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
newRow.appendChild(newCell);
|
||
|
||
// DOC (assuming you want a date input field)
|
||
newCell = document.createElement("td");
|
||
newCell.innerHTML = (default_data != false ? default_data[5] : ''); // Adjust for your needs
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
newRow.appendChild(newCell);
|
||
|
||
// BP (assuming you want a date input field)
|
||
newCell = document.createElement("td");
|
||
newCell.innerHTML = (default_data != false ? default_data[6] : '');
|
||
// Adjust for your needs
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
newRow.appendChild(newCell);
|
||
// band (assuming you want a date input field)
|
||
newCell = document.createElement("td");
|
||
newCell.innerHTML = (default_data != false ? default_data[7] : ''); // Adjust for your needs
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
newRow.appendChild(newCell);
|
||
// unit (assuming you want a date input field)
|
||
newCell = document.createElement("td");
|
||
newCell.innerHTML = (default_data != false ? default_data[8] : ''); // Adjust for your needs
|
||
newCell.contentEditable = "true"; // Make the cell editable (if needed)
|
||
newCell.style.border = "1px solid";
|
||
newRow.appendChild(newCell);
|
||
|
||
// ... Add remaining cells and content
|
||
|
||
// Create a checkbox for disabled
|
||
newCell = document.createElement("td");
|
||
|
||
newCell.style.border = "1px solid";
|
||
newCell.innerHTML = '<i class="material-icons" onclick="deleteRow(event)"></i>';
|
||
const checkBox = document.createElement("input");
|
||
checkBox.type = "checkbox";
|
||
checkBox.addEventListener("change", function() {
|
||
newRow.classList.toggle("disabled");
|
||
});
|
||
newCell.appendChild(checkBox);
|
||
newRow.appendChild(newCell);
|
||
tableBody.appendChild(newRow);
|
||
}
|
||
|
||
function deleteRow(button) {
|
||
// console.log(button.target.parentElement.parentElement);
|
||
// console.log(button.parentNode.parentNode);
|
||
const tableBody = document.getElementById("emptablebody");
|
||
const rowToDelete = button.target.parentElement.parentElement;
|
||
tableBody.removeChild(rowToDelete);
|
||
}
|
||
|
||
let focusedCell;
|
||
|
||
function handleInput(event) {
|
||
focusedCell = event.target;
|
||
const inputValue = focusedCell.textContent.trim();
|
||
if (inputValue.length > 1) { // Show suggestions only after 2 characters
|
||
showSuggestions(inputValue);
|
||
} else {
|
||
hideSuggestions();
|
||
}
|
||
}
|
||
|
||
function showSuggestions(inputValue) {
|
||
console.log(inputValue);
|
||
|
||
const suggestions = ["Self", "Spouse", "Son","Daughter","Father","Mother","Father in law",'Mother in law','M','F']; // Replace with your logic or API call
|
||
const filteredSuggestions = suggestions.filter(s => s.toLowerCase().startsWith(inputValue.toLowerCase()));
|
||
console.log(filteredSuggestions);
|
||
console.log(filteredSuggestions.length);
|
||
suggestionsList.innerHTML = ""; // Clear previous suggestions
|
||
if(filteredSuggestions.length)
|
||
{
|
||
suggestionBox.style.display = "block"; // Show the suggestion box
|
||
for (const suggestion of filteredSuggestions) {
|
||
const listItem = document.createElement("li");
|
||
listItem.textContent = suggestion;
|
||
listItem.addEventListener("click", function() {
|
||
console.log(focusedCell);
|
||
if (focusedCell) { // Check if a cell is focused
|
||
focusedCell.textContent = suggestion; // Set the selected suggestion in the focused cell
|
||
}
|
||
hideSuggestions();
|
||
});
|
||
suggestionsList.appendChild(listItem);
|
||
}
|
||
|
||
// Position the suggestion box near the input field (optional)
|
||
const cellRect = focusedCell.parentNode.getBoundingClientRect();
|
||
// console.log(cellRect.left);
|
||
// console.log(cellRect.right);
|
||
suggestionBox.style.left = 170 + "px";
|
||
suggestionBox.style.top = 50 + "px";
|
||
}
|
||
}
|
||
|
||
function hideSuggestions() {
|
||
suggestionBox.style.display = "none";
|
||
suggestionsList.innerHTML = ""; // Clear suggestions
|
||
}
|
||
|
||
|
||
function getTableDataAsJson(table) {
|
||
// let index = {'1' : 'sno','2' : 'emp_code'};
|
||
const tableBody = table.querySelector("tbody");
|
||
if (!tableBody) {
|
||
console.error("Error: Table does not have a tbody element.");
|
||
return null;
|
||
}
|
||
|
||
// Get all rows
|
||
const rows = tableBody.querySelectorAll("tr");
|
||
|
||
// Create an empty array to store JSON data
|
||
const jsonData = [];
|
||
|
||
// Loop through each row
|
||
for (const row of rows) {
|
||
const cells = row.querySelectorAll("td");
|
||
const rowData = {}; // Create an object to hold cell data
|
||
|
||
// Loop through each cell in the row
|
||
for (let i = 0; i < cells.length; i++) {
|
||
const cellContent = cells[i].textContent.trim();
|
||
// You can adjust the property name logic if needed (e.g., use cell index as key)
|
||
const isCheckbox = i === 11;
|
||
if (isCheckbox) {
|
||
rowData[`column${i + 1}`] = cells[i].querySelector("input[type='checkbox']").checked;
|
||
} else {
|
||
rowData[`column${i + 1}`] = cellContent; // Use descriptive column names (optional)
|
||
}
|
||
|
||
}
|
||
|
||
// Add the row data object to the JSON array
|
||
jsonData.push(rowData);
|
||
}
|
||
console.log(jsonData);
|
||
return jsonData;
|
||
}
|
||
|
||
</script>
|