Add, edit and delete function to my javascript

Question

I'm looking to add edit and delete functionality to the following JavaScript and I'm not sure where exactly to start.

This functions just fine as a input add but It needs to be editable and deletable. Is Javascript the way to go here?

HTML

<table width="600px" class="setpoint-form-table">
        <tr>
            <td colspan="5">
                <p style="font-size:16px; float:left;">First Name / Last Name Table Post and Edit</p>

            </td>
        </tr>
        <tr>
            <td colspan="5" height="20px"></td>
        </tr>
        <tr>

            <input type="text" id="RowPlaceholder2" style="visibility:hidden;" />
            <td width="100px" style="font-size:14px">First Name</td>
            <td><input type="text" id="fName" class="setpoint-textbox" /></td>
            <td width="100px" style="font-size:14px;">Last Name</td>
            <td><input type="text" id="lName" class="setpoint-textbox" /></td>
            <td><button type="button" id="edit">Edit</button></td>


        </tr>
        <tr>
            <td colspan="5" height="20px"></td>
        </tr>
        <tr>
            <td colspan="5"><button type="button" onclick="HvacStandards()">Submit</button></td>
        </tr>
        <tr>
            <td colspan="5">
                <br />
                <br />


                <table width="600px" id="testingWithEdit">
                    <tr>
                        <td style="background-color:#fff; color:#00468C; border-bottom:1px solid #000; border-right:1px solid #000;">First Name</td>
                        <td style="background-color:#fff; color:#00468C; border-bottom:1px solid #000;">Last Name</td>
                    </tr>
                </table>


            </td>
        </tr>
    </table>

JavaScript

function HvacStandards() {
  var rowID = document.getElementById("RowPlaceholder2").value;
  var firstName = document.getElementById("fName").value;
  var lastName = document.getElementById("lName").value;
  var sHtml = "<tr>" +
            "<td id=\"firstName" + rowID + "\">" + firstName + "</td>" +
            "<td id=\"lastName" + rowID + "\">" + lastName + "</td>" +
            "</tr>";
  $("#testingWithEdit").append(sHtml);
  rowID++;
  document.getElementById("RowPlaceholder2").value = rowID;
  document.getElementById("fName").value = "";
  document.getElementById("lName").value = "";
}

Are you looking for persistence? (i.e. when you refresh the page, should the newly added data still be there, or be reset?) — asifrc, May 22 '13 at 03:00
And also, since you're using jQuery: `$('#fName').val();` is a much easier alternative to `document.getElementById("fName").value;` (and you can set the value by passing a parameter, e.g. `$('#fName').val("new value");` ) — asifrc, May 22 '13 at 03:02
it is done on jQuery .tabs working off multiple tabs, should not have to changes pages until submit. Refresh is fine, after form submission, the main page is pulling from the database anyhow. — Sean Robbins, May 22 '13 at 03:13
thats for the jQuery tip. I was orig just using javascript and using shtml but found out that IE didn't like adding a to a table. — Sean Robbins, May 22 '13 at 03:19
working on a fiddle for ya, just in case you're wondering about the silence :) — asifrc, May 22 '13 at 03:43
@asifrc I made some adjustments but it worked like a charm in the end. I've noticed that if I add class='classname' instead of using ", the class still works and it prevents any issues when using ", is there any time of disadvantage to this or is it a recommended method? — Sean Robbins, May 23 '13 at 00:19
No advantage/disadvantage or really a difference beyond needing to escape, so it's just a matter of preference: http://stackoverflow.com/questions/9959928/double-quotes-vs-single-quotes-in-javascript — asifrc, May 23 '13 at 04:11

score 1 · Accepted Answer · answered May 22 '13 at 04:20

Here's just one of the many ways to do this:

In this fiddle, I simply added an extra column to sHTML containing edit and delete buttons that call editRow() and deleteRow() respectively, both passing the parameter of the rowID.

I then defined two new global variables, newRow and currentRow. I then modified HvacStandards use newRow as the RowID. Additionally, I modified it to switch to saveEdits if currentRow is not -1, so that hitting the submit button saves the edits instead of just creating a new row.

Then I created the the editRow function that fills the textboxes with the html contained within firstName+rowID and lastName+rowID, and then set currentRow to the rowID.

The saveEdits function then modifies the html of the table rows to the new values from the inputs, clears the inputs, and then resets currentRow to -1 so hitting submit will add a new row next time.

Finally, the deleteRow function simply removes the row from the dom. (I added an id to the tr in sHTML so that the row as a whole can be identified).

Let me know if this all makes sense and does what you need it to do :)

Also, I recommend that you check out the syntax for jQuery selectors. It's one of the reasons I originally switched from plain JavaScript to jQuery. Here's a ref sheet: http://www.w3schools.com/jquery/jquery_ref_selectors.asp — asifrc, May 22 '13 at 04:24
I will take a look deeply into jQuery! This is way cool! I made a simple edit to the buttons: " " + "" + to prevent a submit which was happening on the edit button. adding a type fixed that. Thanks a ton for your reference and your explanation! — Sean Robbins, May 22 '13 at 12:16

Add, edit and delete function to my javascript

1 Answers1