Jump to content
Sim

JS get tr ID

Recommended Posts

So when a person clicks the TR I want to alert the I'd, but my code looks like this. There's a lot of TRs on the page. So is there a way to attach the function. This page is going to end up being. Module in gangster legends. So assigning to all TRs may cause an issue. I can't remember if GL theme has TRs . 

<table id="game">

<tr id="8" onclick="myFunction(this.id)">

<th>08:00</th>
<td colspan="4" rowspan="2" class="stage-saturn">Welcome</td>
</tr>
<tr id="830" onclick="myFunction(this.id)">
<th>08:30</th>
</tr>
<tr id="9" onclick="myFunction(this.id)">
<th>09:00</th>
<td colspan="4" class="stage-earth">Speaker One <span>Earth Stage</span></td>
</tr>

Screenshot_20201120-092848.png

Share this post


Link to post
Share on other sites
<table id="game">
<tr id="8" onclick="myFunction(this)">
  	<th>08:00</th>
  	<td colspan="4" rowspan="2" class="stage-saturn">Welcome</td>
</tr>
<tr id="830" onclick="myFunction(this)">
  	<th>08:30</th>
</tr>
<tr id="9" onclick="myFunction(this)">
  	<th>09:00</th>
	<td colspan="4" class="stage-earth">Speaker One <span>Earth Stage</span></td>
</tr>


<script>
function myFunction(tr) {
  alert(tr.id);
}
</script>

i would guess something like that

 

Edited by urbanmafia
  • Thanks 1

Share this post


Link to post
Share on other sites

I have that now.  I didn't want to add to all the TR onclickMyFunctions. There's about 30 of them 

Share this post


Link to post
Share on other sites
1 hour ago, Sim said:

I have that now.  I didn't want to add to all the TR onclickMyFunctions. There's about 30 of them 

<table id="game">
<tr id="8">
    <th>08:00</th>
    <td colspan="4" rowspan="2" class="stage-saturn">Welcome</td>
</tr>
<tr id="830">
    <th>08:30</th>
</tr>
<tr id="9">
    <th>09:00</th>
	<td colspan="4" class="stage-earth">Speaker One <span>Earth Stage</span></td>
</tr>

<script type="text/javascript"> 
document.getElementById('game') 
	.addEventListener('click', function (item) { 
	var row = item.path[1]; 
	alert(row.id); 
}); 
</script>

something like that would do it 

Share this post


Link to post
Share on other sites
3 hours ago, Sim said:

I have that now.  I didn't want to add to all the TR onclickMyFunctions. There's about 30 of them 

Store the tr link data in the database with its properties in the appropriate fields and run it through a while loop?

You could manipulate the data pulled with php functions to do what its required to do

Edited by Spydre452

Share this post


Link to post
Share on other sites
1 hour ago, Spydre452 said:

Store the tr link data in the database with its properties in the appropriate fields and run it through a while loop?

You could manipulate the data pulled with php functions to do what its required to do

im guessing he would already be doing this as seems like a time tracking kind of system which would make more sense to have a mysql table and built the table with the data but also the question was more directed at the javascript functionality and not the PHP backend.

Edited by urbanmafia

Share this post


Link to post
Share on other sites
18 hours ago, urbanmafia said:

im guessing he would already be doing this as seems like a time tracking kind of system which would make more sense to have a mysql table and built the table with the data but also the question was more directed at the javascript functionality and not the PHP backend.

Very true, my bad - kind of got carried away there 😅

Share this post


Link to post
Share on other sites
1 hour ago, Spydre452 said:

Very true, my bad - kind of got carried away there 😅

haha its all good it happens, sometime i do the same, so many ideas lol

Share this post


Link to post
Share on other sites
16 minutes ago, urbanmafia said:

yes this is correct did you want it done in jQuery instead of vanilla?

WTH are you talking about? I can do it in jQuery :). Whts is vanilla?

  • Haha 1

Share this post


Link to post
Share on other sites
3 minutes ago, Magictallguy said:

*Very* minor thing here; you can shorthand your

elem.on('click', function () {});

elem.on('click', function () {});

to

elem.click(function () {});

elem.click(function () {});

 

Very true, it's been a while since I've used jQuery but prior .on allowed for event delegation, whereas .click does not - so often opted to use .on opposed .click.

Appreciate it may not be necessary here depending on the way Sim is loading in the info, equally may no longer be the case in jQuery *shrugs*

  • Like 1

Share this post


Link to post
Share on other sites

elem.click won't fire on anything loaded after dom-ready though, so always keep in mind what you plan to use the functionality on.

  • Like 1

Share this post


Link to post
Share on other sites
<table id="game">
  
 <link href="DailyPlanner.css" rel="stylesheet" />
<body>
<tr id="8" onclick="myFunction(this.id)">
<th>08:00</th>
<td colspan="4" rowspan="2" class="stage-saturn">Welcome</td>
</tr>
<tr id="830" onclick="myFunction(this.id)">
<th>08:30</th>
</tr>
<tr id="9" onclick="myFunction(this.id)">
<th>09:00</th>
<td id="9text" colspan="4" class="stage-earth">Speaker One <span>Earth Stage</span></td>
</tr>
<tr id="930" onclick="myFunction(this.id)">" >
<th>09:30</th>
<td id="930text" colspan="4" class="stage-earth">Speaker Two <span>Earth Stage</span></td>
</tr>
<tr id="10"  onclick="myFunction(this.id)">
<th>10:00</th>
<td colspan="4" class="stage-earth">Speaker Three <span>Earth Stage</span></td>
</tr>
<tr id="1030" onclick="myFunction(this.id)">
<th>10:30</th>
<td colspan="4" class="stage-earth">Speaker Four <span>Earth Stage</span></td>
</tr>
<tr id="11">
<th>11:00</th>
<td rowspan="5" class="stage-mercury">Speaker Five <span>Mercury Stage</span></td>
<td rowspan="5" class="stage-venus">Speaker Six <span>Venus Stage</span></td>
<td rowspan="5" class="stage-mars">Speaker Seven <span>Mars Stage</span></td>
<td rowspan="2" class="stage-saturn">Lunch</td>
</tr>
<tr id="1130">
<th>11:30</th>
</tr>
<tr id="12">
<th>12:00</th>
<td rowspan="3" class="stage-saturn">Break</td>
</tr>
<tr id="1230">
<th>12:30</th>
</tr>
<tr>
<tr id="1">
<th>1</th>
<td colspan="4" rowspan="2" class="stage-earth">Speaker Eight <span>Earth Stage</span></td>
</tr>
<tr id="2">
<th>2:00</th>
</tr>
<tr>
<th>2:30</th>
<tr>
<th>3:00</th>
</tr>
<tr>
<th>3:30</th>
</tr>
<tr>
<th>4</th>
</tr>
<tr>
<th>4:30</th>
</tr>
<tr>
<th>5:00</th>
</tr>
<tr>
<th>5:30</th>
</tr>
<tr>
<th>6:00</th>
</tr>
<tr>
<th>6:30</th>
<td colspan="4" class="stage-earth">Speaker Nine <span>Earth Stage</span></td>
</tr>
<tr>
<th>7:00</th>
<td colspan="2" rowspan="2" class="stage-earth">Speaker Ten <span>Earth Stage</span></td>
<td colspan="2" rowspan="2" class="stage-jupiter">Speaker Eleven <span>Jupiter Stage</span></td>
</tr>
<tr>
<th>7:30</th>
</tr>
<tr>
<th>20:00</th>
<td colspan="2" class="stage-mars">Speaker Twelve <span>Mars Stage</span></td>
<td class="stage-jupiter">Speaker Thirteen <span>Jupiter Stage</span></td>
<td class="stage-jupiter">Speaker Fourteen <span>Jupiter Stage</span></td>
</tr>
<tr>
<th>20:30</th>
<td colspan="4" rowspan="2" class="stage-saturn">Drinks</td>
</tr>
<tr>
<th>21:00</th>
</tr>
</body>

  $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
  } );
  </script>
 
<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p>
</div>

<script type="text/javascript">
var allowedActions =
    [
      "Grand Theft Auto",
      "Hacking",
      "Robbery",
      "Mugging",
      "Forgery",
      "Randomness*"
    ];

var planner = [
        "8",
        "830",
        "9",
        "930",
        "10",
        "1030",
        "11",
        "1130",
        "12",
        "1230,
        "1",
        "130",
        "2",
        "230",
        "3",
        "330",
        "4",
        "430", //THIS IS LINE 147
        "5",
        "530",
        "6",
        "630",
        "7",
        "730"
      ];
      
for(var x = 0; x < planner.length; x++)
{
     planner[x] = "";
}

  function myFunction(ID)
  {
   $( "#dialog" ).dialog( "open" );
    alert(ID);
    //var IDRef = ID + "text";
    var x = document.getElementById(ID + "text");
    document.body.innerHTML = document.body.innerHTML.replace(x.innerHTML, 'Hello World');
  }
</script>

 

Syntax Error Line 147: invalid or unexpected token.

Share this post


Link to post
Share on other sites

Horrible markup aside, you're missing a <script> tag and a "
 

<link href="DailyPlanner.css" rel="stylesheet"/>
<table id="game">
    <tbody>
    <tr id="8" onclick="myFunction(this.id)">
        <th>08:00</th>
        <td colspan="4" rowspan="2" class="stage-saturn">Welcome</td>
    </tr>
    <tr id="830" onclick="myFunction(this.id)">
        <th>08:30</th>
    </tr>
    <tr id="9" onclick="myFunction(this.id)">
        <th>09:00</th>
        <td id="9text" colspan="4" class="stage-earth">Speaker One <span>Earth Stage</span></td>
    </tr>
    <tr id="930" onclick="myFunction(this.id)">" >
        <th>09:30</th>
        <td id="930text" colspan="4" class="stage-earth">Speaker Two <span>Earth Stage</span></td>
    </tr>
    <tr id="10" onclick="myFunction(this.id)">
        <th>10:00</th>
        <td colspan="4" class="stage-earth">Speaker Three <span>Earth Stage</span></td>
    </tr>
    <tr id="1030" onclick="myFunction(this.id)">
        <th>10:30</th>
        <td colspan="4" class="stage-earth">Speaker Four <span>Earth Stage</span></td>
    </tr>
    <tr id="11">
        <th>11:00</th>
        <td rowspan="5" class="stage-mercury">Speaker Five <span>Mercury Stage</span></td>
        <td rowspan="5" class="stage-venus">Speaker Six <span>Venus Stage</span></td>
        <td rowspan="5" class="stage-mars">Speaker Seven <span>Mars Stage</span></td>
        <td rowspan="2" class="stage-saturn">Lunch</td>
    </tr>
    <tr id="1130">
        <th>11:30</th>
    </tr>
    <tr id="12">
        <th>12:00</th>
        <td rowspan="3" class="stage-saturn">Break</td>
    </tr>
    <tr id="1230">
        <th>12:30</th>
    </tr>
    <tr>
    <tr id="1">
        <th>1</th>
        <td colspan="4" rowspan="2" class="stage-earth">Speaker Eight <span>Earth Stage</span></td>
    </tr>
    <tr id="2">
        <th>2:00</th>
    </tr>
    <tr>
        <th>2:30</th>
    <tr>
        <th>3:00</th>
    </tr>
    <tr>
        <th>3:30</th>
    </tr>
    <tr>
        <th>4</th>
    </tr>
    <tr>
        <th>4:30</th>
    </tr>
    <tr>
        <th>5:00</th>
    </tr>
    <tr>
        <th>5:30</th>
    </tr>
    <tr>
        <th>6:00</th>
    </tr>
    <tr>
        <th>6:30</th>
        <td colspan="4" class="stage-earth">Speaker Nine <span>Earth Stage</span></td>
    </tr>
    <tr>
        <th>7:00</th>
        <td colspan="2" rowspan="2" class="stage-earth">Speaker Ten <span>Earth Stage</span></td>
        <td colspan="2" rowspan="2" class="stage-jupiter">Speaker Eleven <span>Jupiter Stage</span></td>
    </tr>
    <tr>
        <th>7:30</th>
    </tr>
    <tr>
        <th>20:00</th>
        <td colspan="2" class="stage-mars">Speaker Twelve <span>Mars Stage</span></td>
        <td class="stage-jupiter">Speaker Thirteen <span>Jupiter Stage</span></td>
        <td class="stage-jupiter">Speaker Fourteen <span>Jupiter Stage</span></td>
    </tr>
    <tr>
        <th>20:30</th>
        <td colspan="4" rowspan="2" class="stage-saturn">Drinks</td>
    </tr>
    <tr>
        <th>21:00</th>
    </tr>
    </tbody>
</table>
<script>
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000let
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
    });
</script>

<div id="dialog" title="Basic dialog">
    <p>
        This is an animated dialog which is useful for displaying information.
        The dialog window can be moved, resized and closed with the &apos; x &apos; icon.
    </p>
</div>

<script type="text/javascript">
    let x;
    let allowedActions = [
        "Grand Theft Auto",
        "Hacking",
        "Robbery",
        "Mugging",
        "Forgery",
        "Randomness*"
    ];
    let planner = [
        "8",
        "830",
        "9",
        "930",
        "10",
        "1030",
        "11",
        "1130",
        "12",
        "1230",
        "1",
        "130",
        "2",
        "230",
        "3",
        "330",
        "4",
        "430",
        "5",
        "530",
        "6",
        "630",
        "7",
        "730"
    ];

    for (x = 0; x < planner.length; x++) {
        planner[x] = "";
    }

    function myFunction(ID) {
        $("#dialog").dialog("open");
        alert(ID);
        // let IDRef = ID + "text";
        let x = document.getElementById(ID + "text");
        document.body.innerHTML = document.body.innerHTML.replace(x.innerHTML, 'Hello World');
    }
</script>

 

Share this post


Link to post
Share on other sites
On 11/21/2020 at 7:42 PM, Sim said:

If I'm not mistaken GL has jQuery built into it?

Yes and no ... it’s part of the default theme but not in the engine. I must admit I need to alter some of the core modules to remove that dependency as you can’t always rely on it being there

Share this post


Link to post
Share on other sites

With jQuery being so popular now-a-days, maybe add it as an option in json file to include?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...