Das Dialogfeld Zeile nach dem Füllen hinzufügen

Ich habe eine HTML-Tabelle und möchte nach dem Klicken auf eine Schaltfläche eine Zeile hinzufügen. Daraufhin wird ein Dialogfeld geöffnet, in das ich die erforderlichen Zeileninformationen eingeben kann. Ich bin auf einen Code gestoßen, der genau das tut, was ich möchte. Ich habe es soweit wie möglich auf meinen Code zugeschnitten. Bis jetzt habe ich das Popup-Feld, aber es fügt keine Zeile hinzu, nachdem ich im Popup auf "Zeile hinzufügen" geklickt habe, was ich tun muss. Ich hatte gehofft, dass jemand mir sagen könnte, was damit nicht stimmt. Ich bin ziemlich fest darauf.Das Dialogfeld Zeile nach dem Füllen hinzufügen

HTML/PHP:

<html> 

    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <link rel="stylesheet" type="text/css" href="test1.css"> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
     <script type="text/javascript" src="test1.js"></script> 
    </head> 

<body> 

<div id="dialog-form" title="Add Vendor"> 
    <p class="validateTips">All form fields are required.</p> 

    <form> 
    <fieldset> 
     <label for="mr_id">Vendor</label> 
     <input type="text" name="mr_id" id="mr_id" class="text ui-widget-content ui-corner-all"> 
     <label for="buyer_id">Buyer ID</label> 
     <input type="text" name="buyer_id" id="buyer_id" class="text ui-widget-content ui-corner-all"> 
     <label for="poc_n">POC Name</label> 
     <input type="text" name="poc_n" id="poc_n" class="text ui-widget-content ui-corner-all"> 
     <label for="poc_p">POC Email</label> 
     <input type="text" name="poc_e" id="poc_e" class="text ui-widget-content ui-corner-all"> 
     <label for="poc_p">POC Phone</label> 
     <input type="text" name="poc_p" id="poc_p" class="text ui-widget-content ui-corner-all"> 

     <!-- Allow form submission with keyboard without duplicating the dialog button --> 
     <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
    </fieldset> 
    </form> 
</div> 



<div id="users-contain" class="ui-widget"> 
<table id="html_master" class="ui-widget ui-widget-content"> 
<thead> 
    <tr class="ui-widget-header"> 
    <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> 

</table> 
</div> 

     <input type="button" id="create-user" value="Add Row"> 

</body> 
</html>

JavaScript:

// ----- Dialog Box ----- 

$(function() { 
    var dialog, form, 

     emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-][email protected][a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, 
     mr_name = $("#mr_name"), 
     buyer_id = $("#buyer_id"), 
     poc_n = $("#poc_n"), 
     poc_e = $("#poc_e"), 
     poc_p = $("#poc_p"), 
     allFields = $([]).add(mr_name).add(buyer_id).add(poc_n).add(poc_e).add(poc_p), 
     tips = $(".validateTips"); 

    function updateTips(t) { 
     tips 
     .text(t) 
     .addClass("ui-state-highlight"); 
     setTimeout(function() { 
     tips.removeClass("ui-state-highlight", 1500); 
     }, 500); 
    } 

    function checkLength(o, n, min, max) { 
     if (o.val().length > max || o.val().length < min) { 
     o.addClass("ui-state-error"); 
     updateTips("Length of " + n + " must be between " + 
      min + " and " + max + "."); 
     return false; 
     } else { 
     return true; 
     } 
    } 

    function checkRegexp(o, regexp, n) { 
     if (!(regexp.test(o.val()))) { 
     o.addClass("ui-state-error"); 
     updateTips(n); 
     return false; 
     } else { 
     return true; 
     } 
    } 

    function addVendor() { 
     var valid = true; 
     allFields.removeClass("ui-state-error"); 

     valid = valid && checkLength(mr_name, "mr_id", 3, 16); 
     valid = valid && checkLength(buyer_id, "buyer_id", 6, 80); 
     valid = valid && checkLength(poc_n, "poc_n", 5, 16); 
     valid = valid && checkLength(poc_e, "buyer_id", 6, 80); 
     valid = valid && checkLength(poc_p, "poc_n", 5, 16); 

     valid = valid && checkRegexp(mr_id, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter."); 
     valid = valid && checkRegexp(buyer_id, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); 
     valid = valid && checkRegexp(poc_n, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); 
     valid = valid && checkRegexp(poc_e, emailRegex, "eg. [email protected]"); 
     valid = valid && checkRegexp(poc_p, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); 

     if (valid) { 
     $("#html_master tbody").append("<tr>" + 
      "<td>" + mr_name.val() + "</td>" + 
      "<td>" + buyer_id.val() + "</td>" + 
      "<td>" + poc_n.val() + "</td>" + 
      "<td>" + poc_e.val() + "</td>" + 
      "<td>" + poc_p.val() + "</td>" + 
     "</tr>"); 
     dialog.dialog("close"); 
     } 
     return valid; 
    } 

    var dialog = $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 400, 
     width: 350, 
     modal: true, 
     buttons: { 
     "Add Row": addVendor, 
     Cancel: function() { 
      dialog.dialog("close"); 
     } 
     }, 
     close: function() { 
     form[ 0 ].reset(); 
     allFields.removeClass("ui-state-error"); 
     } 
    }); 

    form = dialog.find("form").on("submit", function(event) { 
     event.preventDefault(); 
     addVendor(); 
    }); 

    $("#create-user").button().on("click", function() { 
     dialog.dialog("open"); 
    }); 
    });

Ich weiß, dass die Validierung ab jetzt richtig ist, aber das ist nicht mein aktueller Fokus. Ich möchte nur eine Zeile hinzufügen können, nachdem ich das Popup-Fenster bevölkert habe.

Quelle

2016-10-06 Rataiczak24

Ich habe nicht wirklich versucht, Ihren ganzen Code zu verstehen, besonders weil es einen Fehler im JavaScript gibt, aber Sie sollten in der Lage sein, einige JQuery hier zu verwenden. Etwas im Sinne von:

$("//Whatever your table's id/class is").append("<tr>//Whatever goes in here</tr>");

Hilft Ihnen das? Wenn nicht, erkläre bitte, warum, wenn möglich und ich werde tun, was ich kann, um ein effektiveres Feedback zu geben. Viel Glück und gute Codierung! :)

Quelle

2016-10-06 17:17:25

Nicht ganz sicher, was ich mit diesem Code tun würde ... so würde dies das Problem beheben, dass ich keine Zeile hinzufügen kann, nachdem ich das Dialogfeld bevölkert habe ?? – Rataiczak24

Ja, es sollte eine Zeile hinzufügen. Der Schwerpunkt sollte auf ... Ich weiß nicht, ob Sie eine bedingte Anweisung haben, die bestimmt, ob die Schaltfläche "Zeile hinzufügen" gedrückt wurde oder nicht. –

Wohin würde das dann gehen? Am Anfang? Innerhalb der addVendor Funktion? – Rataiczak24

Das Dialogfeld Zeile nach dem Füllen hinzufügen

Antwort

Verwandte Themen