Чтобы получить пользовательские данные из веб-приложения в Google Таблицы
Мне нужна помощь, чтобы развеять мои сомнения. Я создал таблицу WebApp, в которой пользователи просто заполняют свои данные, и как только он нажмет кнопку «Сохранить», данные автоматически переместятся в Google Таблицы. Однако этого не происходит. Может кто-нибудь, пожалуйста, помогите мне с этой проблемой.
До сих пор я пробовал использовать метод .getElementById, присваивая отдельным полям ввода отдельные идентификаторы.
Я также пробовал использовать .getElementById(with table ID) и метод строк и столбцов.
Пример: let label=document.getElementById("Master").rows[0].columns[1].value;
Прилагается лист, где есть вся кодировка.
<style>
th {
font-size : 13px;
border : 1px solid black;
border-radius: 5px;
}
table {
margin-top : 20px;
margin-left : 130px;
font-size : 15px;
text-align : center;
border-spacing : 15px;
border : 1px solid black;
}
td {
border : 1px solid black;
border-radius: 5px;
}
input {
width : 56px;
border : none;
text-align : center;
}
button {
width : 60px;
}
.heading {
margin-top:50px;
margin-top:20px;
text-align:center
}
</style>
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
</head>
<body>
<div class = "heading">
<h2>KTRP FOLLOW UP AND MANAGEMENT SHEET</h2>
</div>
<table id = "Master">
<tr>
<th><b>Working Hours</b></th>
<th><label type = "text">07AM to 08AM</label></th>
</tr>
<tr>
<td style = "background-color:#B978F0">
<label><b>Reference</b></label text-align = "left">
</td>
<td style = "border:1px white">
<select id = "mod">
<option>V853132</option>
<option>AB35469</option>
<option>AB35511</option>
<option>VC61764</option>
<option>VC78159</option>
<option>AB32871</option>
<option>VC78183</option>
</select>
</td>
</tr>
<tr>
<tr>
<td style = "background-color:#00FF00"><label><b>Good Parts Qty</b></label></td>
<td><input type = "number" id = "gqty"></td>
</tr>
<tr>
<td style = "background-color:#FC0808"><label><b>Bad Parts Qty</b></label></td>
<td><input type = "number" id = "bqty"></td>
</tr>
<tr>
<tr>
<td style = "background-color:#FFFF00"><label><b>Preventive Maintenance</b></label></td>
<td><input type = "number" id = "pmaint"></td>
</tr>
<tr>
<tr>
<td style = "background-color:#FFFF00"><label><b>Planned Stoppage</b></label></td>
<td><input type = "number" id = "trial0"></td>
</tr>
<tr>
<td style = "background-color:#93C47D"><label><b>Changeover</b></label></td>
<td><input type = "number" id = "co"></td>
</tr>
<tr>
<td style = "background-color:#93C47D"><label><b>Legal Breaks</b></label></td>
<td><input type = "number" id = "break"></td>
</tr>
<tr>
<td style = "background-color:#E83C3C"><label><b>Non quality stops</b></label></td>
<td><input type = "number" id = "nqstop"></td>
</tr>
<tr>
<td style = "background-color:#76A5AF"><label><b>Breakdowns</b></label></td>
<td><input type = "number" id = "bds"></td>
</tr>
<tr>
<td style = "background-color:#76A5AF"><label><b>Micro Stoppages</b></label></td>
<td><input type = "number" id = "msds"></td>
</tr>
<tr>
<td style = "background-color:#A38BE9"><label><b>Organisation Malfunctions</b></label></td>
<td><input type = "number" id = "org"></td>
</tr>
<tr>
<td><label><b>Direct Labour</b></label></td>
<td><input type = "number" id = "dl"></td>
</tr>
<tr>
<td style = "border:1px white"> </td>
<td style = "border:1px white"><button id = "btn">Save</button></td>
</tr>
</table>
<script>
document.getElementById("btn").addEventListener("click",doSave);
function doSave() {
let prodDetails = {
label=document.getElementById("Master").rows[0].columns[1].value;
model=document.getElementById("Master").rows[1].columns[1].value;
goodpartsqty=document.getElementById("Master").rows[2].columns[1].value;
badpartsqty=document.getElementById("Master").rows[3].columns[1].value;
preventivemaint=document.getElementById("Master").rows[4].columns[1].value;
plannedstop=document.getElementById("Master").rows[5].columns[1].value;
changeover=document.getElementById("Master").rows[6].columns[1].value;
legalbreak=document.getElementById("Master").rows[7].columns[1].value;
nonquality=document.getElementById("Master").rows[8].columns[1].value;
breakdown=document.getElementById("Master").rows[9].columns[1].value;
microstoppage=document.getElementById("Master").rows[10].columns[1].value;
organisation=document.getElementById("Master").rows[11].columns[1].value;
directlabour=document.getElementById("Master").rows[12].columns[1].value;
}
google.script.run.dataSave(prodDetails);
}
</script>
</body>
</html>
Привет... Спасибо за ваш ценный ответ. Но я не занимаюсь программированием. Просто попробуйте научиться программировать, а также не знакомы с этим сайтом. Будет лучше, если вы просмотрите лист и поможете мне.
Вы можете вставить код в свой вопрос и отформатировать его вот так и тогда нам не придется сообщать вам наш адрес электронной почты, перейдя по ссылке на вашу таблицу.
Каждый элемент должен иметь уникальный идентификатор
Большое спасибо за ваш вклад. Но уже есть уникальный идентификатор, например - mod, gqty, bqty, pmaint.
Ответы 1
С объявлением объекта prodDetails есть несколько проблем.
Вместо
=следует использовать:или сначала объявить его как пустой объект, а затем присвоить значение каждому из свойств.Для
columnsне существует объектаHTMLTableCellElement. Вместо этого используйтеcells.Значение элементов
selectиinputвнутри таблицы нельзя получить непосредственно из HTMLTableCellElement. Вместо этого вы должны сначала получить элементselectилиinput, а затем получить значение.
Примеры изменений, которые необходимо применить к объявлению prodDetails
Чтобы получить заголовок столбца, из
document.getElementById("Master").rows[0].columns[1].value;
к
document.getElementById("Master").rows[0].cells[1].innerText;
Чтобы получить выбранное значение, из
document.getElementById("Master").rows[1].columns[1].value
к
document.getElementById("Master").rows[1].cells[1].children[0].value
Большое спасибо. Теперь это прекрасно работает. Я попытался указать индивидуальный идентификатор для каждого ввода внутри таблицы. Это тоже работает.
Хотя ссылка на внешний ресурс может быть полезной, вопросы на этом сайте должны быть самостоятельными. Добавьте в тело вопроса всю необходимую информацию, включая минимальный воспроизводимый пример.