Javascript 单击HTML表格行并打开带有预填充数据的表单
一般来说，我不熟悉编码。我自学了基本的HTML、CSS和Javascript，尝试构建一个简单的web应用程序来帮助我的marina更高效地运行。我已经在这方面工作了至少6个小时，但找不到一个方法来实现它 我想做的是允许我的技术人员搜索HTML表，该表由Google工作表动态填充，当他们单击要处理的客户的行时，我需要它打开表单输入页面，并预先填写客户名称、船名和工作订单号。谢谢你能提供的任何帮助 每个技术人员用于输入其姓名、客户姓名、船名、工单号、人工和工时说明以及零件号和零件数量的表单页。这是我希望在技术人员单击他们希望添加时间和部分的条目后，使用HTML表中的数据预加载的表单Javascript 单击HTML表格行并打开带有预填充数据的表单,javascript,html,google-apps-script,Javascript,Html,Google Apps Script,一般来说，我不熟悉编码。我自学了基本的HTML、CSS和Javascript，尝试构建一个简单的web应用程序来帮助我的marina更高效地运行。我已经在这方面工作了至少6个小时，但找不到一个方法来实现它 我想做的是允许我的技术人员搜索HTML表，该表由Google工作表动态填充，当他们单击要处理的客户的行时，我需要它打开表单输入页面，并预先填写客户名称、船名和工作订单号。谢谢你能提供的任何帮助 每个技术人员用于输入其姓名、客户姓名、船名、工单号、人工和工时说明以及零件号和零件数量的表单页。这是
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<?!= include("page-css") ?>
</head>
<body>
<a href = "https://script.google.com/a/obmc.com/macros/s/AKfycbxGT-s3hnCXs4gI-E0Qo5-C87M5yeDd3FhLto6txnQ/exec" id = "labor" class="waves-effect waves-light btn indigo darken-4"><i class="material-icons left">chevron_left</i>Home</a>
<div class = "container">
<h1>Labor Entry </h1>
</div>
<div class = "container">
<div class="row">
<div class="input-field col s12 m8 l8">
<div class="text">Tech</div>
<input type="text" id="tech" class="autocomplete">
</div>
</div>
</div>
<div class = "container">
<div class="row">
<div class="input-field col s12 m8 l8">
<div class="text">Customer Name</div>
<input type="text" id="customer" class="autocomplete">
</div>
</div>
</div>
<div class = "container">
<div class="row">
<div class="input-field col s12 m8 l8">
<div class="text">Boat Name</div>
<input id="boat" type="text" class="validate">
</div>
</div>
</div>
<div class = "container">
<div class="row">
<div class="input-field col s12 m6 l6">
<div class="text">Work Order</div>
<input type="text" id="work order">
</div>
</div>
</div>
<div class = "container">
<div class="row">
<div class="input-field col s6 m6 l6">
<div class="text">Description of Work</div>
<textarea id="desc" class="materialize-textarea"></textarea>
</div>
<div class="row">
<div class="input-field col s2 m2 l2">
<div class="text">Hours</div>
<input id="time" type="text" class="validate">
</div>
</div>
</div>
</div>
<div class = "container">
<div class="row">
<div class="input-field col s12 m8 l8">
<div class="text">Part Number</div>
<input type="text" id="part" class="autocomplete">
</div>
<div class="input-field col s2 m2 l2">
<div class="text">Quantity</div>
<input id="qty" type="text" class="validate">
</div>
</div>
</div>
<div class = "container">
<div class="row">
<button id = "submit" class="btn- waves-effect waves-light btn-large indigo darken-4"><i class="material-icons left">directions_boat</i>Submit</button>
<button id = "clear" class="waves-effect waves-light btn-large indigo darken-4"><i class="material-icons left">clear_all</i>Clear Form</button>
</div> <!-- CLOSE ROW -->
</div> <!-- CLOSE CONTAINER -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include("page-js") ?>
</body>
</html>
劳工入境
技术人员
客户名称
船名
工单
工作说明
小时
零件号
量
方向(b)提交
清晰的形式
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>JavaScript Table Filter Search</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
h3 span {
font-size: 22px;
}
h3 input.search-input {
width: 300px;
margin-left: auto;
float: right
}
.mt32 {
margin-top: 32px;
}
</style>
</head>
<body class="mt32">
<div class="container">
<h1 align = "center">
<span>Work Order Search</span>
<input type="search" placeholder="Search..." class="form-control search-input" data-table="customers-list"/>
</h1>
<table class="table table-striped mt32 customers-list" id = "display-table" onclick="theFunction()" >
<thead>
<tr>
<th align ="center">Customer Name</th>
<th align ="center">Boat Name</th>
<th align ="center">Work Order</th>
<th align ="center">Description of Work</th>
</tr>
</thead>
<tbody id = "table-body">
</tbody>
</table>
</div>
<script>
(function(document) {
'use strict';
var TableFilter = (function(myArray) {
var search_input;
function _onInputSearch(e) {
search_input = e.target;
var tables = document.getElementsByClassName(search_input.getAttribute('data-table'));
myArray.forEach.call(tables, function(table) {
myArray.forEach.call(table.tBodies, function(tbody) {
myArray.forEach.call(tbody.rows, function(row) {
var text_content = row.textContent.toLowerCase();
var search_val = search_input.value.toLowerCase();
row.style.display = text_content.indexOf(search_val) > -1 ? '' : 'none';
});
});
});
}
return {
init: function() {
var inputs = document.getElementsByClassName('search-input');
myArray.forEach.call(inputs, function(input) {
input.oninput = _onInputSearch;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
TableFilter.init();
}
});
})(document)
var data = []
document.addEventListener("DOMContentLoaded",function(){
google.script.run.withSuccessHandler(generateTable).getTableData()
})
function generateTable(dataArray){
dataArray.forEach(function(r){
var tbody = document.getElementById("table-body")
var row = document.createElement("tr")
var col1 = document.createElement("td")
col1.textContent = r[0]
var col2 = document.createElement("td")
col2.textContent = r[1]
var col3 = document.createElement("td")
col3.textContent = r[2]
var col4 = document.createElement("td")
col4.textContent = r[3]
row.appendChild(col1)
row.appendChild(col2)
row.appendChild(col3)
row.appendChild(col4)
tbody.appendChild(row)
})
}
</script>
</body>
</html>
JavaScript表过滤器搜索
h3跨度{
字体大小：22px；
}
h3输入。搜索输入{
宽度：300px；
左边距：自动；
浮球：对
}
.mt32{
边缘顶部：32px；
}
工单搜索
客户名称
船名
工单
工作说明
（职能（文件）{
"严格使用",；
var TableFilter=（函数（myArray）{
var搜索输入；
函数_onInputSearch（e）{
搜索输入=e.目标；
var tables=document.getElementsByClassName（search_input.getAttribute（'data-table'）；
调用（表，函数（表）{
myArray.forEach.call（table.tBodies，函数（tbody）{
myArray.forEach.call（tbody.rows，函数（row）{
var text_content=row.textContent.toLowerCase（）；
var search_val=search_input.value.toLowerCase（）；
row.style.display=text\u content.indexOf（search\u val）>-1？“”：“无”；
});
});
});
}
返回{
init:function（）{
var inputs=document.getElementsByClassName（'search-input'）；
myArray.forEach.call（输入，函数（输入）{
input.oninput=\u onInputSearch；
});
}
};
})（阵列.原型）；
document.addEventListener（'readystatechange'，function（）{
如果（document.readyState==='complete'）{
TableFilter.init（）；
}
});
})（文件）
var数据=[]
document.addEventListener（“DOMContentLoaded”，function（））{
google.script.run.withSuccessHandler（generateTable.getTableData（））
})
函数生成表（dataArray）{
dataArray.forEach（函数（r）{
var tbody=document.getElementById（“表体”）
var行=document.createElement（“tr”）
var col1=document.createElement（“td”）
col1.textContent=r[0]
var col2=document.createElement（“td”）
col2.textContent=r[1]
var col3=document.createElement（“td”）
col3.textContent=r[2]
var col4=document.createElement（“td”）
col4.textContent=r[3]
行。追加子项（col1）
行。追加子项（col2）
行。追加子项（col3）
行。追加子项（col4）
tbody.appendChild（第行）
})
}