按下按钮后如何将输入值添加到html表列（javascript）

时间：2021-05-19 07:28:57

标签： javascript html html-table

我有一个要求用户输入的表单，它包括下拉列表和输入框。用户插入值并按“确定”后，这些值应根据其类别显示在我的 html 表中。当检测到用户插入的第二个值时，将自动添加 html 表行。目前我已经创建了 html 表单，当我按下 add new header 时它会自动添加，但是如何通过知道用户有新输入来添加行？所有的值都应该存储在相应的列中。

当用户输入一个新值并按OK时，系统将检查第一行值是否存在，如果存在则显示新值（事件参数、条件类型和要匹配的值） ) 到下一行。

  1. 会弹出一个表单供用户输入值 enter image description here

  2. 用户点击OK后，所有的值将存储在第一行

enter image description here

  1. 当用户添加另一个输入并点击 OK 时，将自动出现第二行并在第二列显示第二个输入。

用户输入的另一个输入 enter image description here

enter image description here

我的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: '\00bb';
  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">&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 个答案:

答案 0 :(得分：1)

给模态表单按钮添加id

<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);
});
相关问题
最新问题