Диалоговое окно отображения для добавления новой строки в таблицу HTML

Question

Итак, у меня есть таблица HTML, в которой я могу добавить строки в конец таблицы. Появится новая строка с текстовыми полями внутри, и вы можете ввести информацию.

Однако я хочу покончить с этим и использовать новый метод. Я хочу, чтобы при нажатии кнопки add row появляется сообщение dialog box и дает мне возможность добавлять информацию для строки. Затем он использует validation, чтобы убедиться, что строка хороша, а затем добавляет строку в таблицу.

Как бы я мог это сделать?

Вы можете увидеть демо ...

http://codepen.io/Rataiczak24/pen/wzpJop

JavaScript:

// ----- Deactivate/Activate Row ----- 

$(document).on("click", "#html_master .deactivate", function() { 
    var $this = $(this); 
    var $tr = $this.closest('tr'); 
    var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate'; 

    // ------ Confirmation box in order to deactivate/activate row ----- 
    if (confirm('Are you sure you want to ' + action + ' this entry?')) { 
    $tr.toggleClass('deactivated'); 
    $this.val(function (i, t) { 
     return t == 'Deactivate' ? 'Activate' : 'Deactivate'; 
    }); 
    } 
}); 

// ----- Edit Row ----- 

$(document).on("click", "#html_master .edit", function() { 
    var $this = $(this); 
    var tds = $this.closest('tr').find('td').not('.mr_id').filter(function() { 
    return $(this).find('.edit').length === 0; 
    }); 
    if ($this.val() === 'Edit') { 
    $this.val('Save'); 
    tds.prop('contenteditable', true); 
    } else { 
    var isValid = true; 
    var errors = ''; 
    $('#myDialogBox').empty(); 
    // changed from here....... 
    var elements = tds; 
    if (tds.find('input').length > 0) { 
     elements = tds.find('input'); 
    } 
    elements.each(function (index, element) { 
     var type = $(this).attr('class'); 
     var value = (element.tagName == 'INPUT') ? $(this).val() : $(this).text(); 
     // changed from here....... to here 
     // ----- Switch statement that provides validation ----- 
     switch (type) { 
     case "buyer_id": 
      if (!$.isNumeric(value)) { 
      isValid = false; 
      errors += "Please enter a valid Buyer ID\n"; 
      } 
      break; 
     case "poc_n": 
      if (value == value.match(/^[a-zA-Z\s]+$/)) { 
      break; 
      } 
      else { 
      isValid = false; 
      errors += "Please enter a valid Name\n"; 
      } 
      break; 
     case "poc_e": 
      if (value == value.match(/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/)) { 
      break; 
      } 
      else { 
      isValid = false; 
      errors += "Please enter a valid Email\n"; 
      } 
      break; 
     case "poc_p": 
      if (value == value.match('^[0-9()+/-]{10,}$')) { 
      break; 
      } 
      else { 
      isValid = false; 
      errors += "Please enter a valid Phone Number\n"; 
      } 
      break; 
     } 
    }) 
    if (isValid) { 
     $this.val('Edit'); 
     tds.prop('contenteditable', false); 
    } else { 
     alert(errors); 
    } 
    } 
}); 


// ----- Add Row ----- 

function addRow(tableID) { 

    var table = document.getElementById(tableID); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    var cell1 = row.insertCell(0); 
    cell1.innerHTML = rowCount; 
    cell1.className = 'mr_id'; 

    var cell2 = row.insertCell(1); 
    var element2 = document.createElement("input"); 
    element2.type = "text"; 
    element2.name = "txtbox[]"; 
    element2.className = 'mr_name'; 
    cell2.appendChild(element2); 

    var cell3 = row.insertCell(2); 
    var element3 = document.createElement("input"); 
    element3.type = "text"; 
    element3.name = "txtbox[]"; 
    element3.className = 'buyer_id'; 
    cell3.appendChild(element3); 

    var cell4 = row.insertCell(3); 
    var element4 = document.createElement("input"); 
    element4.type = "text"; 
    element4.name = "txtbox[]"; 
    element4.className = 'poc_n'; 
    cell4.appendChild(element4); 

    var cell5 = row.insertCell(4); 
    var element5 = document.createElement("input"); 
    element5.type = "text"; 
    element5.name = "txtbox[]"; 
    element5.className = 'poc_e'; 
    cell5.appendChild(element5); 

    var cell6 = row.insertCell(5); 
    var element6 = document.createElement("input"); 
    element6.type = "text"; 
    element6.name = "txtbox[]"; 
    element6.className = 'poc_p'; 
    cell6.appendChild(element6); 

    var cell7 = row.insertCell(6); 
    var element7 = document.createElement("input"); 
    var element8 = document.createElement("input"); 
    element7.type = "button"; 
    element8.type = "button"; 
    element7.name = "edit"; 
    element8.name = "deactivate"; 

    var setClass = document.createAttribute("class"); 
    setClass.value = "edit"; 
    element7.setAttributeNode(setClass); 

    var setClass1 = document.createAttribute("class"); 
    setClass1.value = "deactivate"; 
    element8.setAttributeNode(setClass1); 

    element7.attr = "class"; 
    element8.attr = "class"; 
    element7.value = "Save"; 
    element8.value = "Deactivate"; 
    cell7.appendChild(element7); 
    cell7.appendChild(element8); 
} 

HTML/PHP:

<table id="html_master"> 
<thead> 
    <tr> 
    <td>ID</td> 
    <td>Vendor</td> 
    <td>Buyer ID</td> 
    <td>POC Name</td> 
    <td>POC Email</td> 
    <td>POC Phone</td> 
    <td>Edit/Delete</td> 
    </tr> 
</thead> 
<tbody> 

<?php 
    foreach ($dbh->query($sql) as $rows){ 
    ?> 
    <tr> 
     <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td> 
     <td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td> 
     <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td> 
     <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>  
     <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td> 
     <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td> 
     <td><input type="button" class="edit" name="edit" value="Edit"> 
     <input type="button" class="deactivate" name="deactivate" value="Deactivate"></td> 
    </tr> 
<?php 
    } 
?> 
</tbody> 
     <br> 
     <input type="button" class="add" value="Add Row" onclick="addRow('html_master')"> 
</table> 

<input type="button" class="add" value="Add Row" onclick="addRow('html_master')"> 

</body> 
</html> 

Answer 1

Вы можете использовать модальный всплывающее окно. Посмотрите на это: How to create a modal popup using javascript

Вам нужно будет создать отдельный div на этом модальном, поместить все необходимые поля ввода в этот sub div.

Все, что вам нужно сделать, это вызвать всплывающее окно «Добавить строку», щелкнуть кнопкой мыши, получить ввод пользователя, закрыть всплывающее окно, проверить код и ввести его в таблицу.

Я написал этот код для вас, я надеюсь, что это помогает

HTML

<table border="1" style="width:100%;"> 
     <thead> 
     <tr style="font-weight:bold;"> 
      <td>Field 1</td> 
      <td>Field 2</td> 
     </tr> 
     </thead> 
     <tbody id="tBody"></tbody> 
    </table> 
    <button onclick="showModal();">Add Row</button> 
    <div class="modal" id="modal"> 
     <div class="content"> 
     <input type="text" id="field1" placeholder="Field 1" /><br /> 
     <input type="text" id="field2" placeholder="Field 2" /> 
     <br /> 
     <button onclick="addRow();">Add</button> 
     <button onclick="closeModal();">Close</button> 
     </div> 
    </div> 

CSS

.modal{ 
     display:none; 
     background:#fff; 
     opacity:0.9; 
     position:fixed; 
     top:0; 
     width:100%; 
     height:100%; 
    } 
    .content{ 
     width:300px; 
     background:#f2f2f2; 
     margin:0 auto; 
     padding:2%; 
    } 

JS

function showModal(){ 
     document.getElementById("modal").style.display = "block"; 
    } 
    function closeModal(){ 
     document.getElementById("modal").style.display = "none"; 
    } 
    function addRow(){ 
     var tBody = document.getElementById("tBody"); 
     var field1 = document.getElementById("field1"); 
     var field2 = document.getElementById("field2"); 

     /* Your validation code here */ 


     var rowData = '<tr>' 
          + '<td>'+field1.value+'</td>' 
        + '<td>'+field2.value+'</td>' 
        + '</tr>'; 
     if(tBody.innerHTML!=null){ 
      tBody.innerHTML = tBody.innerHTML + rowData; 
     }else{ 
      tBody.innerHTML = rowData; 
     } 
     alert("row has been added!"); 
     field1.value=''; 
     field2.value=''; 
     closeModal(); 
    }