Проблема Java Script с добавлением и удалением строк - PullRequest
Новая
       1

Проблема Java Script с добавлением и удалением строк

2 голосов
/ 21 марта 2019

Я пытался динамически добавлять и удалять строки, используя Java Script, имея в виду несколько пользовательских условий

1) весь блок HTML, содержащий 3 строки, должен быть добавлен, когда мы нажимаем на кнопку добавления новой строки.

2) ранее введенная строка должна быть удалена с помощью кнопки удаления

3) раскрывающиеся списки должны функционировать по желанию (часть кода java-скрипта используется для раскрывающихся списков, что в основном равно «если»опция A выбрана для отображения связанных параметров в следующем раскрывающемся меню "

HTML Code 

<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 контролирует опциюионы выпадающего.

Если кто-то может оказать некоторую помощь по этому вопросу, это, безусловно, будет полезно

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...