CODEWITHSUNDEEP
javascriptajax
Crystal
Crystal

Reputation: 29448

Create an editable HTML table

I'm trying to follow the prof's example of creating an editable table on double clicking an entry in a HTML table. So my data method looks like this:

function formatData(message) {
    var str = "<table border=1>";
    for (var i = 0; i < message.length; i++) {
        str += "<tr>" + "<td class='editable'>" + message[i].id + "</td>" +
                       "<td>" + message[i].name + "</td>" +
                       "<td class='editable'>" + message[i].url + "</td>" +
                       "<td class='editable'>" + message[i].desc + "</td>" + 
                       "<td>" + "<a href='#' onclick='deleteRequest(this); return false' id='" + message[i].id +                                        "'>delete</a>" + "</td>" + 
                       " + "</td>" + "</tr>";
    }
    str += "</table>";
    return str;
}

I bind a function edit() to the tags whose attributes are of class 'editable.' Then my edit function does:

function edit(elm) {
  /* check to see if we are already editing */
  if (elm.firstChild.tagName && elm.firstChild.tagName.toUpperCase() == "INPUT")
    return;

  /* save original content */
  var orig = elm.innerHTML;

  /* create edit field */
  var input = document.createElement("input");
  input.type = "text";
  input.value = elm.innerHTML;
  input.size = 20;

  /* convert content to editable */
  elm.innerHTML = '';
  elm.appendChild(input);

  /* position cursor and focus */
  if (input.selectionStart)
    input.selectionStart = input.selectionEnd = 0;
  else
    {
     var range = input.createTextRange();
     range.move("character", 0);
     range.select();
    }
  input.focus();

  /* set save trigger callback */
  input.onblur = function(){save(elm, input,orig);};
}

I'm confused on how I would save the information and pass it to the web server to update. I need the id, url, and desc to update the web server. Since they double click on a table entry, that just gives me the element at that value, but I don't have the id. Do I change two lines in my formatData to:

"<td class='editable' id='" + message[i].id + "'>" + message[i].url + "</td>" +
"<td class='editable' id='" + message[i].id +"'>" + message[i].desc + "</td>" +

So that way I can ask the webserver for the url and desc with that id value? That seems like a bad way to do it since now two have the same id, but I'm not sure since I'm relatively new to AJAX, HTML, Javascript. Thanks.

Upvotes: 0

Views: 2070

Answers (1)

user17753
user17753

Reputation: 3161

Eh, I'll push a bit of help your way.

Basically, from what I gather you're binding a function to each td tag with editable. Well, you can determine the id inside that function.

B/c you can select the parentNode of the current node being edited, and then select the firstChild of that parentNode, so parentNode.firstChild which should be the first td, since remember on each row each of your td's will have a single parent tr. Then you select the firstChild of that td node, which is the text node it contains, and then grab its value, the id. So parentNode.firstChild.firstChild.nodeValue

This might not follow exactly with your code, as you only show parts of it... but this is the gist of the idea. Basically selecting nodes through the DOM and pulling the right one based on the current context.

I'd suggest playing around with it till you get it.

Here's a little bit of sample code for you to think about if you get stuck still. It's meant to be brief.

Basically, each middle column is tagged with the test function on the onfocus event (clicking inside the input). So it's on the input itself, and it pulls the parentNode td, then the next parentNode tr, then the firstChild of tr which is the first td then the firstChild of the first td which is the input on that row, then finally that input's value attribute.

<script>
function test(elem) {

    alert( elem.parentNode.parentNode.firstChild.firstChild.value );
}
</script>

<table>
<tr><td><input value="1"/></td><td><input value="stuff" onfocus="test(this)"/></td><td>other stuff</td></tr>
<tr><td><input value="2"/></td><td><input value="stuff3" onfocus="test(this)"/></td><td>other stuff</td></tr>
<tr><td><input value="3"/></td><td><input value="stuff2" onfocus="test(this)"/></td><td>other stuff</td></tr>
</table>

Upvotes: 1

Related Questions