1

How can I write the contents of a variable into the text area of a <td>here</td> with javascript? I would like to prompt the user using the called function onclick and store what they type into a variable and then write the string saved to that variable into the same <TD> that the form/input/prompt function call is in.

I'm thinking that this can be done by accessing the column via the class attribute. Ideally, I'd like the function(s) to be independent and robust such that I can use them for several different columns based on the class attributes.

<html>

<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>asdfsadf</title>


</head>

<body bgcolor="#000088">

<script type="text/javascript">
function editDates()
{
    var dates = prompt("Fill in date(s) of absence", 
                        "Example: Travel 1/7 - 2/10");
    document.write.
}
</script>

<table class="mainTable" cellspacing="0" border="1" 
                         cellpadding="1" width="100%" height="100%">
    <tr>
        <td>name</td><td class="r1c1">

            <form method="link" action="index.html" onClick="editDates();">
            <input type="button" name="submit" value="Edit"/></form>
            </td></tr></body></html>

2 Answers 2

4
document.getElementsByClassName('yourClass')[0].innerHTML = 'the content';

I'd recommend using jQuery though, much more beginner friendly / less error prone. In that case it would be:

$('td.yourClass').html('the content');
3
  • can i pass the elements class by means of the function call, ex: editDates(elementClass); function editDates(elementClass){document.getElementsByClassName('elementClass')[0].innerHtml = 'dates';
    – jake
    Feb 9, 2011 at 21:23
  • im looking for a universal function call, one that i can keep calling but with different class's as the target
    – jake
    Feb 9, 2011 at 21:27
  • of course... getElementsByClassName returns an array, you can do a for loop through each one and set the innerHTML on each. but i would def check out jQuery, it's really easy to do this kind of stuff
    – Shawn
    Feb 10, 2011 at 1:14
0

Install mootools, then check out this jsfiddle.net example I have created for you. Any button element (or any element for that matter) you add the class name of "edit_button" to will then change the contents of it's parent table cell to the response from the users prompt input.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.