添加和删​​除行的Java脚本问题

时间:2019-03-21 01:22:25

标签: javascript html5

我一直在考虑一些自定义条件,尝试使用Java脚本动态添加和删除行

1)单击添加新行时,必须添加包含3行的整个HTML块

2)应该使用删除按钮删除先前输入的行

3)下拉菜单应按期望的方式工作(一段Java脚本代码用于下拉菜单,基本上是“如果选择了选项A,则在下一个下拉列表中显示相关选项”

HTML代码

<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%">&nbsp;</td>
<td colspan="2">&nbsp;</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>

下拉式JavaScript

<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>

用于添加删除的JavaScript

<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>
  1. 我面临的问题“添加删除”按钮未添加 整个行块。
  2. 删除行不会删除之前添加的行的整个块,并且 仅删除一行
  3. 在使用JS函数添加一行行之后,添加行的下拉菜单也不起作用,我相信这是由于JS控制了下拉菜单的选项。

如果有人可以提供一些帮助,那肯定会有用

0 个答案:

没有答案