Simple question, how to make javascript work with mutliple rows?

[Jason28]

I know that there are tutorials, but I would like to understand what small changes are needed to change a javascript function from working with one row to working with multiple rows.  For example, if you use:

 

<script type='text/javascript">

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

 

<span id="demo" onclick="displayDate()">description</span>

 

That works, but only with one row on the page.  How can I change that to work with multiple rows? 

[KevinM1]

Multiple rows of what?

[Jason28]

Like if I want to use the same function on multiple entries

[KevinM1]

The main problem is determining which elements you want to apply the event to.  There are a variety of ways to do it, but it depends on what you actually want to do with the actual elements in your document.  There's no single answer for all cases.

 

So, if you have a particular problem, show more code.

[Jason28]

Thanks, I am slowly trying to learn javascript so I am doing some test code and here is what I have so far to make an area of text get inserted into a text area and later I could use jquery to update it in the database.  Here is what I have so far:

 

function displayDate(str)
{
document.getElementById("demo").innerHTML="<textarea name=\"editdesc\" cols=\"120\">" + str + "</textarea> <input type=\"button\" onclick=\"UpdateRow()\" value=\"Update\">";
}

function UpdateRow()
{
document.write("hello");
}

 

then the html that uses multiple entries:

 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><b>Description</b>: <span id="demo" onclick="displayDate('Admin, hello! here are having problems with your site. Write me. ECK 98956785664')">Admin, hello! here are having problems with your site. Write me. ECK 98956785664</span></td>
  </tr>
  <tr> <b>Description</b>: <span id="demo" onclick="displayDate('A question for both genders. Guys, do you feel the need to go all out and spend all your money on an engagement ring to make your girl happy?      
      
Ladies, does the cost of the ring actually increase how much love you feel for your man?       
       
I dont have a large amount of money but the ring I bought for my woman the other day s')">A question for both genders. Guys, do you feel the need to go all out and spend all your money on an engagement ring to make your girl happy?      
    
    Ladies, does the cost of the ring actually increase how much love you feel for your man?       
    
    I dont have a large amount of money but the ring I bought for my woman the other day s</span>
      </td>
  </tr>
</table>

 

 

[KevinM1]

Remember: an ID is unique.  Logically, you can't have one id shared by two elements.  JavaScript knows this and is only grabbing the last one, since to it it's the most recent one.

[Jason28]

Right I understand that.  I am asking how to write the javascript to work with multiple IDs so that the output is different for each <tr><td> row

[KevinM1]

Well, right now you have two spans with the ID of 'demo', so you'll first need to change that.  Elements can't share the same ID.

 

And, like I said before, it depends on what you want to do, exactly.  You could simply do something like (pseudo-code):

 

var rows = document.getElementsByTagName('tr'); // change depending on what kind of element you need
var matches = new Array();

for(var i = 0; i < rows.length; ++i) {
   if (/* rows[i] matches a regex pattern for your collection of IDs, like demo1, demo2, demo3, etc. */) {
      matches.push(rows[i]);
   }
}

for(var j = 0; j < matches.length; ++j) {
   matches[j].onclick = function() {
      // event handling code
   }
}

[Jason28]

Thanks, yes I am basically asking how to change a function that works with one case to make it work with multiple rows.  I want to be able to understand what changes are made so I can edit existing functions that are standalone.

[Adam]

And, like I said before, it depends on what you want to do, exactly.

 

yes I am basically asking how to change a function that works with one case to make it work with multiple rows.

 

Ha.. Perhaps ask something "exact"? I would recommend first reading up on how to work with arrays and objects - those are the key to writing these type of scalable functions. It's quite a large subject though for Nightslyr, or anyone to explain it all to you in 'general'. It's the kind of thing you get better at the more experienced you become.