Я пытаюсь использовать JQuery для выделения динамически созданных строк в таблице, когда флажок в этой строке снят, а также для обновления элемента счетчика, показывающего, сколько строк проверено.Я использую Google Apps Scripts, в частности, проект представляет собой вывод шаблона HTML (файлы html, js и css).Все работает, КРОМЕ подсвечивания строк при снятии флажка и обновлении счетчика проверенных строк (> _ <). Я искал решение повсюду, но до сих пор получилось пустым.Единственное, о чем я могу думать, это то, что переменная $ (this) в моем файле сценария jquery не установлена на флажок, но я не могу использовать Chrome Dev Tools, чтобы посмотреть «this» (если кто-то не знает способсделать это в ГАЗЕ ...?). </p>
Вот мой code.gs ...
function openLateAccountsNoticesWindow() {
var htmlTemp = HtmlService.createTemplateFromFile('send_notices/HTML').evaluate();
var html = HtmlService.createHtmlOutput(htmlTemp);
SpreadsheetApp.getUi().showModalDialog(html, 'Send Notices');
};
// INCLUDE creates an import so files can be added inside the main index.
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
};
// The getAccountsWithOpenBal function creates an array of accounts with
// an outstanding balance > $0.
function getAccountsWithOpenBal() {
// Code to get the array of accounts from my spreadsheet goes here,
// but I'll provide a stand-in array below for debugging purposes.
var accounts = [
{Unit: "123 Abc Street", Name: "John Doe", Balance: 500.10},
{Unit: "456 Maple Street", Name: "Mary Jane", Balance: 250.05},
{Unit: "765 Stone Road", Name: "Mark Isaguy", Balance: 1300.45},
{Unit: "999 Nine Avenue", Name: "Lauren Lady", Balance: 45.23}];
var lateAccountsArray = [];
for (var i=0; i < accounts.length; i++) {
if (parseFloat(accounts[i]['Balance']) > 0) {
var balToNum = parseFloat(accounts[i]['Balance']);
var bal2Decimals = balToNum.toFixed(2);
var balWithCommas = bal2Decimals.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
accounts[i]['Balance'] = balWithCommas;
lateAccountsArray.push(accounts[i]);
}
}
return lateAccountsArray;
};
Мой HTML ...
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<?!= include('send_notices/CSS') ?>
</head>
<body>
<h4 id="header">Accounts with Current Balance Owed:</h4>
<div id="table_goes_here">
</div>
<br>
<h4>Number of Notices to Submit: <span id="noticeCount"></span></h4>
<br>
<button class="action" id="submitButton" onclick="form_data()">Submit</button> <button class="cancel" onclick="google.script.host.close()">Cancel</button>
<br>
</body>
<?!= include('send_notices/JS') ?>
</html>
Вот сценарийиз моего js-файла, который генерирует таблицу ...
<script>
window.onload = function() {
google.script.run.withSuccessHandler(addAccountsData).getAccountsWithOpenBal();
}
function addAccountsData(lateAccountsArray) {
var div = document.getElementById("table_goes_here");
var table = document.createElement("TABLE");
table.setAttribute("id", "debtorList");
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
// TABLE HEADERS
// Create header row, and append to table body
var headerRow = document.createElement('TR');
tableBody.appendChild(headerRow);
// Next, create each header cell
// Unit Column Header ("unit" = "address")
var unitTH = document.createElement('TH');
unitTH.setAttribute("style", "width: 25%");
unitTH.appendChild(document.createTextNode("Address"));
// Name Column Header (name of account holder)
var nameTH = document.createElement('TH');
nameTH.setAttribute("style", "width: 22%");
nameTH.appendChild(document.createTextNode("Name"));
// Currency Column Header
var currencyTH = document.createElement('TH');
currencyTH.setAttribute("style", "width: 5%");
currencyTH.appendChild(document.createTextNode(""));
// Balance Column Header
var balanceTH = document.createElement('TH');
balanceTH.setAttribute("style", "width: 5%; text-align: right");
balanceTH.appendChild(document.createTextNode("Balance"));
// Checkbox Column Header
var includeTH = document.createElement('TH');
includeTH.setAttribute("style", "width: 10%; text-align: center");
includeTH.appendChild(document.createTextNode("Include"));
// Append all headers to header row
headerRow.appendChild(unitTH);
headerRow.appendChild(nameTH);
headerRow.appendChild(currencyTH);
headerRow.appendChild(balanceTH);
headerRow.appendChild(includeTH);
// I use getRowCount when filling in the table
// rows in order to attach a unique id attr to
// each row and checkbox.
var rowCount = 0;
function getRowCount() {
rowCount += 1;
return rowCount;
}
// Loop through each account, creating a row for each one.
for (var i=0; i < lateAccountsArray.length; i++) {
var tr = document.createElement("TR");
rowCount = getRowCount();
tr.classList.add("account_data");
tr.setAttribute("id", "row" + rowCount);
// td cell for unit/address
var unitTD = document.createElement("TD");
unitTD.classList.add("account_unit");
unitTD.setAttribute("value", lateAccountsArray[i]["Unit"]);
unitTD.appendChild(document.createTextNode(lateAccountsArray[i]["Address"]));
// td cell for account-holder name
var nameTD = document.createElement("TD");
nameTD.classList.add("name");
nameTD.setAttribute("value", lateAccountsArray[i]["Name"]);
nameTD.appendChild(document.createTextNode(lateAccountsArray[i]["Name"]));
// td cell for $ (to keep them aligned, regardless of the
// number of digits in their balance.
var currencyTD = document.createElement("TD");
currencyTD.classList.add("currency");
currencyTD.appendChild(document.createTextNode("$"));
// td cell for balance amount
var balanceTD = document.createElement("TD");
balanceTD.classList.add("balance");
balanceTD.setAttribute("value", lateAccountsArray[i]["Balance"]);
balanceTD.appendChild(document.createTextNode(lateAccountsArray[i]["Balance"]));
// td cell for checkbox
var checkboxTD = document.createElement("TD");
checkboxTD.classList.add("checkboxTD");
var checkbox = document.createElement("INPUT");
checkbox.classList.add("checkbox");
checkbox.setAttribute("id", "checkbox" + rowCount);
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("checked", true);
checkboxTD.appendChild(checkbox);
// Attach all td cells to tr
tr.appendChild(unitTD);
tr.appendChild(nameTD);
tr.appendChild(currencyTD);
tr.appendChild(balanceTD);
tr.appendChild(checkboxTD);
// Attach tr to tableBody
tableBody.appendChild(tr);
// Set the initial count for the number of notices.
if (i == lateAccountsArray.length - 1) {
var noticeCount = document.getElementById("noticeCount");
noticeCount.innerHTML = i;
}
}
div.appendChild(table)
};
</script>
А вот сценарий из моего js-файла, который ПРЕДЛАГАЕТСЯ выделить самый близкий tr и обновить #noticeCount, когда: флажок установлен ...
<script>
$(document).ready(function() {
$(":checkbox").change(function() {
var noticeCountEle = document.getElementById("noticeCount");
var noticeCount = parseFloat(noticeCountEle.text());
if ($(this).is(":checked")) {
noticeCount += 1;
$(this).closest("tr").css("background-color", "rgba(255, 255, 255, 1)");
} else {
noticeCount -= 1;
$(this).closest("tr").css("background-color", "rgba(64, 64, 64, 0.7)");
}
noticeCountEle.innerHTML = noticeCount;
})
});
</script>
Я пробовал .closest ("tr"), .closest (". Account_data"), и я попытался получить идентификатор строки и передать его, но ни один из них, похоже, не работает,Я догадываюсь, что ключевое слово (this) неверно, но я не уверен, как его исправить / обойти.
решено
Проблема была с моимjQuery, но это не было проблемой с ключевыми словами "this" - это была проблема с тем, как я настраивал селекторы.
Родные обработчики событий браузера jQuery (.change (), .click (),.focus () и .blur ()) будут прикрепляться только к элементам, которые существуют во время выполнения функции jQuery, но не к элементам, которые добавляются после первоначального рендеринга (по крайней мере, не так, как я установил селекторы).).Поскольку таблица, строки, ячейки и флажки все динамически создаются с помощью моего JS-файла, мне нужно было присоединить метод .on () к статическому div (#table_goes_here), в котором моя таблица была добавлена динамически, и затем передать «изменение»«обработчик событий и селектор«: checkbox »в качестве аргументов метода.Итак, я исправил проблему, изменив файл сценария jQuery на приведенный ниже код.Если вы хотите узнать больше об обработке событий jQuery, эта страница документации по jQuery именно то, что вам нужно.
<script>
$(document).ready(function() {
$("#table_goes_here").on("change", ":checkbox", function() {
var noticeCountHTML = document.getElementById("noticeCount");
var noticeCount = $("#table_goes_here").find("tr").length;
noticeCountHTML.innerHTML = noticeCount;
if ($(this).is(":checked")) {
noticeCount -= 1;
$(this).closest(".account_data").css("background-color", "rgba(64, 64, 64, 0.7)");
} else {
noticeCount += 1;
$(this).closest(".account_data").css("background-color", "rgba(255, 255, 255, 1)");
}
noticeCountHTML.innerHTML = noticeCount;
})
});
</script>