Как добавить входное значение в столбец таблицы html после нажатия кнопки (javascript)

ProgramBox

Как добавить входное значение в столбец таблицы html после нажатия кнопки (javascript)

Post author:admin
Запись опубликована:20 января, 2022
Post category:Вопросы по программированию

#javascript #html #html-table

Вопрос:

У меня есть форма, которая запрашивает ввод данных пользователем, и она включает выпадающий список и поле ввода. После того, как пользователь вставил значение и нажал «ОК», эти значения должны появиться в моей таблице html в зависимости от их категории. Строка таблицы html будет добавлена автоматически при обнаружении второго значения, вставленного пользователем. В настоящее время я создал html-форму , и она будет автоматически добавлена при нажатии add new header , но как я могу добавить строку, зная, что пользователь вводит новую информацию? Все значения должны храниться в соответствующем столбце.

Когда пользователь вводит новое значение и нажимает OK, система проверяет, существует ли значение первой строки или нет, если оно существует, оно отобразит новое значение (параметр события, тип условия и соответствующее значение) в следующей строке.

Появится форма, в которой пользователь сможет ввести значение
После того , как пользователь нажмет на OK кнопку, все значение будет сохранено в первой строке

Когда пользователь добавит другой ввод и нажмет OK , автоматически появится вторая строка и отобразит второй ввод во втором столбце.

Другой ввод, введенный пользователем

Мой html

 <!DOCTYPE html>
<html lang="en">
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,500" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>


body {font-family: 'Quicksand', sans-serif;}
.button {**
  border-radius: 50px;
  background-color:  #ff9633;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  padding: 10px;
  width: 80px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  margin-left:500px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '0bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 45%;

  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}


/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #ff9633;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #ff9633;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ff9633;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color:
#fa7d34;
}
</style>
</head>
<body>


<ul>

  <li><div id="myBtn1"><a href="#AddCon">Alert Policies</a></div></li>
  <li><a href="#contact">Test3</a></li>
  <li><a href="#about">Test4</a></li>
</ul>



<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">amp;times;</span>
      <h2>Alert Policies</h2>
    </div>
    <div class="modal-body">

        <p style="font-size:14px">Please select an event parameter as well as the condition type and value that apply.</p>

        <!-- parameter drop down -->
            <form  method="post">

            <label for="Parameter"> <b style="font-size:13px" >  Event parameter to evaluate </b></label>
            <select name="Parameter" id="Parameter" style="width:340px; font-family: 'Quicksand', sans-serif;">
                <option disabled selected value>select a parameter</option>
                <option value="Subject">Subject</option>
                <option value="Text">Text</option>

            </select>
            <br><br>

            <label for="Condition">   <b style="font-size:13px" >  Type of condition </b></label>
            <select name="Condition" id="Condition" style="width:340px; margin-left:69px; font-family: 'Quicksand', sans-serif;">
                <option disabled selected value>select a condition</option>
                <option value="Equals">Equals</option>
                <option value="Contain">Contain</option>
                <option value="NotContain">Does not contain</option>

            </select>
            <br><br>

            <label for="valuetomatch"> <b style="font-size:13px" > Value to match</b></label>
            <input type="text" id="valuetomatch" name="valuetomatch" style="width:333px; margin-left:80px; font-family: 'Quicksand', sans-serif;">
            <br>
            <br>
<button  class="button" ><span>OK</span></button>
  </form>



    </div>


  </div>

</div>

<form id='test' method="post">

    <div class="table-responsive">
        <table id="form_table" class="table table-bordered">
            <tr>
                <th>No</th>
                <th>Event parameter to evaluate</th>
                <th>Type of condition</th>
                <th>Value to match</th>

            </tr>
            <tr class='case'>
                <td><span id='snum'>1.</span></td>
                <td><input class="form-control" type='text' disabled name='eventpara[]'/></td>
                <td><input class="form-control" type='text' disabled name='typecondition[]'/>
                     <td><input class="form-control" type='text'  disabled name='valuematch[]'/>
                    <table class="table table-bordered"></table>
                </td>
            </tr>
          </table>
          <button type="button" class='btn btn-success addmore'>  add new Header</button> <br>
    </div>
    <input type="submit" name="submit" value="Submit" class="btn btn-info">
</form>




<script>

//add tablebox
$(document).ready(function(){
    $(".addmore").on('click', function () {
        var count = $('#form_table')[0].rows.length;
        var data = "<tr class='case'><td><span id='snum"   count   "'>"   count   ".</span></td>";
        data  = "<td><input class='form-control' type='text' disabled name='eventpara[]'/></td><td><input class='form-control' type='text' disabled name='typecondition[]'/><td><input class='form-control' type='text' disabled name='valuematch[]'/><table class='table table-bordered'></table></td></tr>";
        $('#form_table').append(data);
    });
    $('form#test').on('click', '.childtbl', function () {
        var $titlesTable = $(this).next('table')[0];
        var titlesCount = $titlesTable.rows.length   1;
        var data1 = "<tr class='case1'><td><span id='snum1"   titlesCount   "'>"   titlesCount   ".</span></td>";
        data1  = "<td>Title:<input class='form-control' type='text' name='wr[]'/></td></tr>";
        $($titlesTable).append(data1);
    });
});

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn1");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

1. developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

2. Не могли бы вы подробнее уточнить, где должна быть произведена автоматизация? Я не уверен, какой ввод текста пользователем должен вызвать отображение следующей строки таблицы.

3. Когда пользователь вводит новое значение и нажимает OK , система проверяет, существует ли значение первой строки или нет, если оно существует, оно отобразит новое значение (параметр события, тип условия и соответствующее значение) в следующей строке.

Ответ №1:

Добавьте идентификатор в кнопку модальной формы

 <button id="addData"  class="button" ><span>OK</span></button>

Создайте пустой массив в скрипте

 <script>
    var arrayOfData = []

Добавьте следующий код в jquery

 $("#addData").on('click', function () {
  const parameter = $('#Parameter').val()
  const condition = $('#Condition').val()
  const value = $('#valuetomatch').val()

  arrayOfData.push({
  parameter,
  condition,
  value
  })

  var data = `<tr><th>No</th><th>Event parameter to evaluate</th><th>Type of condition</th><th>Value to match</th></tr>`;

  arrayOfData.forEach((item, index) => {
    data  = `<tr class='case'><td><span id='snum${index   1}'>${index   1}</span></td><td><input class='form-control' type='text' disabled name='eventpara[]' value="${item.parameter}"/></td><td><input class='form-control' type='text' disabled name='typecondition[]' value="${item.condition}"/><td><input class='form-control' type='text' disabled name='valuematch[]' value="${item.value}"/><table class='table table-bordered'></table></td></tr>`
  })
  $('#form_table').html(data);
});

Метки: Как добавить входное значение в столбец таблицы html после нажатия кнопки (javascript)

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

добавление дополнительных элементов в NavigationView занимает много времени

Отсутствует адаптер Wi-Fi

Различные значения в виде строки в другом столбце