2

A table shows data grabbed from a database on my site, when a button is clicked the "enableEditing" function is called using the onclick attribute. Then for one field for each row in the the table, an input textbox appears using the field as the value, and the key as the input name.

Before:

<tr class="data_row"> <td class="property_cell">project ref</td> <td class="myNumber">200407</td> </tr>

After:

<tr class="data_row"> <td class="property_cell">project ref</td> <td class="myNumber"> <input name="project ref" value="200407"> </td> </tr>

jQuery:

function enableEditing(){ $("#object_data tr").each(function(){ var key = $(this).children(".property_cell").html(); var value = $(this).children(".myNumber").text(); $(this).children(".myNumber").html("<input name='" + key + "' value='" + value + "'>"); }); }

This works fine, however some of the data from the database contains speech marks or single quotes, which when changed to an input field will mess up the input html. How can I escape the html for each input field?

Improve this question
0

3 Answers 3

Reset to default
3

There are several ways. One of the less error-prone ones is to make jQuery/DOM do the escaping:

var input = $('<input name="'+key+'">'); input.val(value); $(this).children(".myNumber").empty().append(input);
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That worked great, however I noticed the input value does not appear in the source / Google inspector. Can the data within the input field still be manipulated? For example, updating the database from which the original value was grabbed
DOM inspector features of browsers should display the value even though we added it dynamically (some inspectors are broken, though, e.g. Developer Tools in some versions of Internet Explorer). In any case, it should make no difference in actual operation, though I'm not quite sure what exactly you were asking. :)
2

Try

$('.myNumber').contents().replaceWith(function(){ return $('<input />', { name: $(this).parent().prev().text(), value : $(this).text()}); })

Demo: Fiddle

Improve this answer

1 Comment

Not quite - doesn't get the name attribute from the other cell.
0

You should avoid using .html() for something like this. In fact, just don't use jQuery. Vanilla JS is vastly superior - jQuery is entirely built using it!

var rows = document.getElementById('object_data').rows, l = rows.length, i, td, inp; for( i=0; i<l; i++) { td = rows[i].cells[1]; if( !td.className.match(/\bmyNumber\b/)) continue; // failsafe inp = document.createElement('input'); inp.type = "text"; inp.name = rows[i].cells[0].firstChild.nodeValue; inp.value = td.firstChild.nodeValue; td.replaceChild(inp,td.firstChild); }

While it may seem like more code, it will run at least an order of magnitude, possibly two or three, faster than the jQuery alternative.

jsFiddle
jsPerf

Improve this answer

8 Comments

I didn't downvote. I would be willing to use vanilla JS if it were my project, however one of the specifications it to use jQuery :/
That's a stupid specification. Honestly, if I were given such a restriction, I would ask "do you WANT customers to use your site? Or do you want them to get fed up with how slow it is and tell their friends how much it sucks?"
I didn't downvote, but if this is merely one dynamic feature of the page, next to some much more complex ones that are going to be extremely painful in vanilla JS, the overhead is negligible.
@JanKrüger Vanilla JS is not painful. If it is, then you haven't assembled the right tools. Imagine you have a task, to hammer a nail in a wall. What you're describing is like hitting it with the palm of your hand - it'll work, but it'll hurt like hell. jQuery is like taking a swiss-army sledgehammer to it. My solution would be to build a hammer out of the many materials available, and use that.
@Kolink that is, of course, a valid solution. We happen to prefer different solutions, apparently. Personally I like swiss-army sledgehammers.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.