Изменение заголовка таблицы зависит от заголовка в листе с использованием массива данных ⇐ Javascript

[Anonymous]

Существует ли формула, использующая массив данных, которая, когда я меняю значение в листе, также изменяет заголовок в массиве данных и переопределяю его в таблице? src = "https://i.sstatic.net/it8oye6j.gif"/>
код:
shrong> код.gs>

Код: Выделить всё

let MySheets  = SpreadsheetApp.getActiveSpreadsheet();
let LoginSheet  = MySheets.getSheetByName("Attendance");
let UserSheet  = MySheets.getSheetByName("User");

function doGet(e) {
var output = HtmlService.createTemplateFromFile('Login');
var sess = getSession();
if (sess.loggedIn) {

let page = e.parameter.page;         //01
if (page == null) page = "Main";     //02
output = HtmlService.createTemplateFromFile(page);
return output.evaluate().setTitle('Page')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

return output.evaluate().setTitle('Login Page')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function includeHeader()   //05
{
return HtmlService.createTemplateFromFile("Header.html").evaluate().getContent();
}

function myURL() {
return ScriptApp.getService().getUrl();
}

function setSession(session) {
var sId   = Session.getTemporaryActiveUserKey();
var uProp = PropertiesService.getUserProperties();
uProp.setProperty(sId, JSON.stringify(session));
}

function getSession() {
var sId   = Session.getTemporaryActiveUserKey();
var uProp = PropertiesService.getUserProperties();
var sData = uProp.getProperty(sId);
return sData ? JSON.parse(sData) : { loggedIn: false };
}

function loginUser(pUID, pPassword) {

if (loginCheck(pUID, pPassword)) {

var sess = getSession();
sess.loggedIn = true;
sess.uid = pUID;
setSession(sess);

return 'success';
}
else {
return 'failure';
}
}

function logoutUser() {
var sess = getSession();
sess.loggedIn = false;
setSession(sess);
}

function loginCheck(pUID, pPassword) {
let LoginPass =  false;
let ReturnData = UserSheet.getRange("A:A").createTextFinder(pUID).matchEntireCell(true).findAll();

ReturnData.forEach(function (range) {
let StartRow = range.getRow();
let TmpPass = UserSheet.getRange(StartRow, 2).getValue();
if (TmpPass == pPassword)
{
LoginPass = true;
}
});

return LoginPass;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

/**DataTable */
function getAllDataAtt() {
var sess = getSession();
var uid = sess.uid;
var range = LoginSheet.getDataRange().getDisplayValues();
var header = range.shift();
var userData = range.filter(function(row) {
return row[29] === uid;
});
Logger.log(userData);
return userData;
}< /code>
< /div>
< /div>
< /p>
[b] main.html[/b]> PrettyPrint-Override ">


























body {
background-color:  rgba(58, 103, 177, 30%); //rgba(205, 180, 219, 30%);
font-family: "Niramit", sans-serif;
}

.mycolor2 {
background-color: #212529;//#6d3b89;
height: 45px;
}
.text-white2{color:#fff}
.p-22{padding:.5rem}
h3{margin-top:0;
margin-bottom:.5rem;
font-weight:500;
line-height:1.2;
font-size:calc(1.3rem + .6vw);
font-size:1.75rem;

}

.color {
color: #3a67b1; //#6d3b89;
}
.sbutton:hover {
background-color: #00b8ff;
opacity:0.5;
color:black;
}
.sbutton{
color:white;
padding:5px;
float:right!important;
background-color: transparent;

}
.tablink {
background-color: #212529;
border: none;
}
.tablink2 {
background-color: #212529;
border: none;
}

/* Change background color of buttons on hover */
.tablink:hover {
background-color: #3a67b1;
}
.tablink2:hover {
background-color: #3a67b1;
}

 

function logout()
{
google.script.run.withSuccessHandler(AfterLogOut).logoutUser();
}
function AfterLogOut()
{
document.getElementById("myid").click();
}
  















×



















< /code>
< /div>
< /div>
< /p>
html -код, где я устанавливаю заголовок или заголовок таблицы: < /p>
shrong> divatableatt.html>











body {
font-family: "Niramit", sans-serif;
font-size: 16px;
}

.btn-group-xs>.btn,
.btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: .2rem;
}

.btn-head-table {
padding-bottom: 10px;
}

.editBtn:hover {
color: white;
}
.input{
width: 0%;
color:#28a745;
background-color: #28a745;
border-color:#28a745;}
.bd-yngen-500{
background-color: #2f83fd;
}
.bd-yngen2-500{
background-color: black;
color:white;
}

.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;display:table;width:100%}.w3-table-all{border:1px solid #ccc}
.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:2px 2px;display:table-cell;text-align:left;vertical-align:top;font-size:12px;white-space:nowrap;border: 0.5px solid Silver;}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:8px}
.w3-table tr:hover {background-color: #EEE8AA; color:#0017ff;}
.w3-table tr:first-child:hover {background-color: black; color:white;}
.w3-table td:first-child{left: 0; position: sticky;}
.w3-table th:first-child{left: 0; position: sticky;background-color: black; color:white;}
.w3-table td:nth-child(29){right: 0; position: sticky;background-color: Yellow; color:black; text-align:center;}
.w3-table th:nth-child(29){right: 0; position: sticky;background-color: Yellow; color:black;  text-align:center;}
.w3-table td:nth-child(27) {display:none;}
.w3-table th:nth-child(27){display:none;}
.w3-table td:nth-child(28) {display:none;}
.w3-table th:nth-child(28){display:none;}
.w3-table td:nth-child(26) {display:none;}
.w3-table th:nth-child(26){display:none;}
.w3-table td:nth-child(25) {display:none;}
.w3-table th:nth-child(25){display:none;}
.w3-table td:nth-child(24) {display:none;}
.w3-table th:nth-child(24){display:none;}

.fa-2x{font-size:2em}
.fa-search:before{content:"\f002"}.fa-magnifying-glass-dollar:before,.fa-search-dollar:before{content:"\f688"}.fa-magnifying-glass-location:before,.fa-search-location:before{content:"\f689"},
.fa-magnifying-glass-minus:before,.fa-search-minus:before{content:"\f010"}.fa-magnifying-glass-plus:before,.fa-search-plus:before{content:"\f00e"}

.fa-angle-double-left:before,

table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}
table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}
table.dataTable thead th,table.dataTable thead td{padding:10px 18px;border-bottom:1px solid #111}
table.dataTable thead th:active,table.dataTable thead td:active{outline:none}
table.dataTable tfoot th,table.dataTable tfoot td{padding:10px 18px 6px 18px;border-top:1px solid #111}
table.dataTable tbody tr{background-color:#fff}table.dataTable tbody tr.selected{background-color:#b0bed9}
table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}
table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,table.dataTable.display tbody th,table.dataTable.display tbody td{border-top:1px solid #ddd}
table.dataTable.row-border tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.display tbody tr:first-child td{border-top:none}
table.dataTable.cell-border tbody th,table.dataTable.cell-border tbody td{border-top:1px solid #ddd;border-right:1px solid #ddd}
table.dataTable.cell-border tbody tr th:first-child,table.dataTable.cell-border tbody tr td:first-child{border-left:1px solid #ddd}
table.dataTable.cell-border tbody tr:first-child th,table.dataTable.cell-border tbody tr:first-child td{border-top:none}
table.dataTable.stripe tbody tr.odd,table.dataTable.display tbody tr.odd{background-color:#f9f9f9}table.dataTable.stripe tbody tr.odd.selected,table.dataTable.display tbody tr.odd.selected{background-color:#acbad4}
table.dataTable.hover tbody tr:hover,table.dataTable.display tbody tr:hover{background-color:#f6f6f6}
table.dataTable.hover tbody tr:hover.selected,table.dataTable.display tbody tr:hover.selected{background-color:#aab7d1}
table.dataTable.order-column tbody tr>.sorting_1,table.dataTable.order-column tbody tr>.sorting_2,table.dataTable.order-column tbody tr>.sorting_3,table.dataTable.display tbody tr>.sorting_1,table.dataTable.display tbody tr>.sorting_2,table.dataTable.display tbody tr>.sorting_3{background-color:#fafafa}
table.dataTable.order-column tbody tr.selected>.sorting_1,table.dataTable.order-column tbody tr.selected>.sorting_2,table.dataTable.order-column tbody tr.selected>.sorting_3,table.dataTable.display tbody tr.selected>.sorting_1,table.dataTable.display tbody tr.selected>.sorting_2,table.dataTable.display tbody tr.selected>.sorting_3{background-color:#acbad5}

.dataTables_wrapper{position:relative;clear:both}
.dataTables_wrapper .dataTables_length{float:left}
.dataTables_wrapper .dataTables_length select{border:1px solid #aaa;border-radius:3px;padding:5px;background-color:transparent;padding:4px}
.dataTables_wrapper .dataTables_filter{left: 45%;padding-top:.25em; position:fixed}
.dataTables_wrapper .dataTables_filter:hover input{background-color: #FFFF00;  color: #0017ff;}
.dataTables_wrapper .dataTables_filter input{border:1px solid #aaa;border-radius:3px;padding:5px;background-color:#EEE8AA;margin-left:3px}
.dataTables_wrapper .dataTables_info{clear:both;float:left;padding-top:20px;padding-bottom:100px;position:fixed}
.dataTables_wrapper .dataTables_paginate{left:  40%;text-align:right;padding-top:20px;position:fixed}

.dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;color:#333 !important;border:1px solid transparent;border-radius:2px}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{color:#333 !important;border:1px solid #979797;background-color:white;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #dcdcdc));background:-webkit-linear-gradient(top, white 0%, #dcdcdc 100%);background:-moz-linear-gradient(top, white 0%, #dcdcdc 100%);background:-ms-linear-gradient(top, white 0%, #dcdcdc 100%);background:-o-linear-gradient(top, white 0%, #dcdcdc 100%);background:linear-gradient(to bottom, white 0%, #dcdcdc 100%)}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:default;color:#666 !important;border:1px solid transparent;background:transparent;box-shadow:none}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{color:white !important;border:1px solid #111;background-color:#585858;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));background:-webkit-linear-gradient(top, #585858 0%, #111 100%);background:-moz-linear-gradient(top, #585858 0%, #111 100%);background:-ms-linear-gradient(top, #585858 0%, #111 100%);background:-o-linear-gradient(top, #585858 0%, #111 100%);background:linear-gradient(to bottom, #585858 0%, #111 100%)}

.dataTables_wrapper .dataTables_paginate .paginate_button:active{outline:none;background-color:#2b2b2b;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));background:-webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);box-shadow:inset 0 0 3px #111}

.dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 1em}
.dataTables_wrapper .dataTables_processing{position:absolute;top:50%;left:50%;width:100%;height:40px;margin-left:-50%;margin-top:-25px;padding-top:20px;text-align:center;font-size:1.2em;background-color:white;background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));background:-webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);background:-moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);background:-ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);background:-o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);background:linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255,  0) 100%)}

.dataTables_wrapper .dataTables_scroll{clear:both}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody{*margin-top:-1px;-webkit-overflow-scrolling:touch}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td{vertical-align:middle}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}
.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:1px solid #111}
.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,.dataTables_wrapper.no-footer div.dataTables_scrollBody>table{border-bottom:none}
.dataTables_wrapper:after{visibility:hidden;display:block;content:"";clear:both;height:0}@media screen and (max-width: 767px)
.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}
.dataTables_wrapper .dataTables_paginate{margin-top:.5em}@media screen and (max-width: 640px)































/**
* Prevent forms from submitting.
* */

function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}

window.addEventListener("load", functionInit, true);

/**
* INITIALIZE FUNCTIONS ONLOAD
* */

function functionInit(){
preventFormSubmit();
// getLastTenRows();
};

/**
* HANDLE FORM SUBMISSION
* */

function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
setTimeout(function() {$('#myModal').modal('hide');}, 3000);
document.getElementById("message").innerHTML = "Added/Updated the record successfully.";
document.getElementById("myForm").reset();
}

/**
* Clear form when pop-up is closed.
* */

function clearForm() {
document.getElementById("message").innerHTML = "";
document.getElementById("myForm").reset();
}

google.script.run.withSuccessHandler(createTable).getAllDataAtt();
document.getElementById('resp-spinner5').classList.remove("d-none");
document.getElementById('resp-spinner6').classList.remove("d-none");
document.getElementById('resp-spinner7').classList.remove("d-none");
document.getElementById('resp-spinner8').classList.remove("d-none");
document.getElementById('resp-spinner9').classList.remove("d-none");
document.getElementById('resp-spinner10').classList.remove("d-none");

function createTable(dataArray) {
$('#btn-close').click()
$(document).ready(function(){
document.getElementById('resp-spinner5').classList.add("d-none");
document.getElementById('resp-spinner6').classList.add("d-none");
document.getElementById('resp-spinner7').classList.add("d-none");
document.getElementById('resp-spinner8').classList.add("d-none");
document.getElementById('resp-spinner9').classList.add("d-none");
document.getElementById('resp-spinner10').classList.add("d-none");
$('#data-table').DataTable({
//data: dataArray,
data: dataArray.slice(1),
columns: [
{ title: "Name" },
{ title: "April-01-2025"},
{ title: "April-02-2025"},
{ title: "April-03-2025"},
{ title: "April-04-2025"},
{ title: "April-07-2025"},
{ title: "April-08-2025"},
{ title: "April-09-2025"},
{ title: "April-10-2025"},
{ title: "April-11-2025"},
{ title: "April-14-2025"},
{ title: "April-15-2025"},
{ title: "April-16-2025"},
{ title: "April-17-2025"},
{ title: "April-18-2025"},
{ title: "April-21-2025"},
{ title: "April-22-2025"},
{ title: "April-23-2025"},
{ title: "April-24-2025"},
{ title: "April-25-2025"},
{ title: "April-28-2025"},
{ title: "April-29-2025"},
{ title: "April-30-2025"},
{ title: " "},
{ title: " "},
{ title: " "},
{ title: " "},
{ title: "TOTAL"},
{ title: "Attendance"},

],
//  "ordering": false,
destroy:true,
lengthMenu: [
[18],
['18']
],
// การจัดเรียงลำดับของข้อมูลในคอลัมภ์ asc = น้อยไปหามาก desc = มากไปหาน้อย
order: [[0, "asc"], [0, "asc"], ],
language: {
sProcessing: "In Progress...",
sLengthMenu: "_MENU_ ",
sZeroRecords: "No information found.",
sInfo: '[i][/i] _START_ to _END_ from _TOTAL_ [i][/i]',
sInfoEmpty: "show 0 to 0 from 0 row",
sInfoFiltered: "(Filter data _MAX_ every row)",
sInfoPostFix: "",
sSearch: '[i][/i] Search:',
sUrl: "",
oPaginate: {
sFirst: "Home Page",
sPrevious: '[i][/i]',
sNext: '[i][/i]',
sLast: "Last Page"
}
},
});
});
}

function loading(){
window.addEventListener("load", functionInit, false);
window.addEventListener("load", preventFormSubmitSearch, true);
}

Вот пример листа, который я использую


Подробнее здесь: https://stackoverflow.com/questions/795 ... data-array