我一直在考虑一些自定义条件,尝试使用Java脚本动态添加和删除行
1)单击添加新行时,必须添加包含3行的整个HTML块
2)应该使用删除按钮删除先前输入的行
3)下拉菜单应按期望的方式工作(一段Java脚本代码用于下拉菜单,基本上是“如果选择了选项A,则在下一个下拉列表中显示相关选项”
<html lang="en" dir="ltr">
<div class="header" align="center">
<h1>Downtime Report Form</h1>
</div>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript <form class="dt" method="post" id="data1">-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="DowntimeForm.css">
<form method="post">
<table id="data" Width = "100%" >
<tr>
<td width = "10%">Date and time </td>
<td width = "3%">:</td>
<td width = "17%"> <input type="datetime-local" id="breakdown-time"
name="breakdown-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2025-06-14T00:00" required>
</td>
<td width = "10%">Line Number</td>
<td width = "3%">:</td>
<td width = "8%" > <select id="LineSelection" name="Line Number" required>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="60">60</option>
<option value="70">70</option>
</select>
</td>
<td width = "12%" >Operator Name</td>
<td width = "3%">:</td>
<td width = "17%" ><input type="text" name="Operator Name" value="" required id="opname" ></td>
<td width = "11%">Product Type</td>
<td width = "3%">:</td>
<td><input type="text" name="Product Type" value="" required id="ptype"> </td>
<td width="12%"> </td>
<td colspan="2"> </td>
</tr>
<br>
<br>
<br>
<br>
<br>
<tr class="blank_row">
<td colspan="4"></td>
</tr>
<tr>
<td width = "8%" >Downtime Type</td>
<td width = "3%" >:</td>
<td width = "10%" > <select class="form-control" id="firstList" name="firstList" onClick="getdowntimeItem()" required>
</select> </td>
<td width = "12%">Downtime Subtype</td>
<td width = "3%">:</td>
<td width = "10%"> <select class="form-control" id="secondList" name="secondList" required>
</select> </td>
<td width = "12%">Downtime Minutes</td>
<td width ="3%">:</td>
<td width = "10%"><input type="number" name="Downtime Minutes" value="" required id="dmin"> </td>
</tr>
<p> </p>
<script type="text/javascript">
$(document).ready(function () {
var list1 = document.getElementById('firstList');
list1.options[0] = new Option('--Select--', '');
list1.options[1] = new Option('Electrical', 'Electrical');
list1.options[2] = new Option('Mechanical', 'Mechanical');
list1.options[3] = new Option('Process', 'Process');
list1.options[4] = new Option('Preventive', 'Preventive');
});
function getdowntimeItem(){
var list1 = document.getElementById('firstList');
var list2 = document.getElementById("secondList");
var list1SelectedValue = list1.options[list1.selectedIndex].value;
if (list1SelectedValue=='Electrical')
{
list2.options.length=0;
list2.options[0] = new Option('--Select--', '');
list2.options[1] = new Option('Power Outage', 'Power Outage');
list2.options[2] = new Option('Drive Fault', 'Drive Fault');
list2.options[3] = new Option('Motor Issue', 'Motor Issue');
list2.options[4] = new Option('Sensor Issue', 'Sensor Issue');
list2.options[5] = new Option('Operator Issue', 'Operator Issue');
}
else if (list1SelectedValue=='Mechanical')
{
list2.options.length=0;
list2.options[0] = new Option('--Select--', '');
list2.options[1] = new Option('Bearing', 'Bearing');
list2.options[2] = new Option('Gear Box', 'Gear Box');
list2.options[3] = new Option('Roller Damage', 'Roller Damage');
list2.options[4] = new Option('Speed Issue', 'Speed Issue');
list2.options[5] = new Option('Other', 'Other');
}
else if (list1SelectedValue=='Process')
{
list2.options.length=0;
list2.options[0] = new Option('--Select--','')
list2.options[1] = new Option('Product Change', 'Product Change');
list2.options[2] = new Option('Change Over', 'Change Over');
list2.options[3] = new Option('Fiber Issue', 'Fiber Issue');
list2.options[4] = new Option('Clogging In M/C', 'Clogging in M/C');
list2.options[5] = new Option('Needling Issue', 'Needling Issue');
list2.options[6] = new Option('Other', 'Other');
}
else if (list1SelectedValue=='Preventive')
{
list2.options.length=0;
list2.options[0] = new Option('--Select--','')
list2.options[1] = new Option('Daily PM', 'Daily PM');
list2.options[2] = new Option('Weekly PM', 'Weekly');
}
}
</script>
<script type='text/javascript'>
function addRow(data) {
var data = document.getElementById("data");
var rowCount = data.rows.length;
var row = data.insertRow(rowCount);
var colCount = data.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = data.rows[0].cells[i].innerHTML;
}}
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script lang="JavaScript">
function deleteRow(data) {
try {
var table = document.getElementById("data");
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
catch(e) {
alert(e);
}}
</script>
如果有人可以提供一些帮助,那肯定会有用