JS get tr ID

Sim · November 20, 2020

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 .

<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>

URBANZ · November 20, 2020

<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 November 20, 2020 by urbanmafia

Sim · November 20, 2020

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

URBANZ · November 20, 2020

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

Spydre452 · November 20, 2020

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 November 20, 2020 by Spydre452

URBANZ · November 20, 2020

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 November 20, 2020 by urbanmafia

Spydre452 · November 21, 2020

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 😅

URBANZ · November 21, 2020

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

Sim · November 21, 2020

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

URBANZ · November 21, 2020

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

Sim · November 21, 2020

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?

Magictallguy · November 21, 2020

2 hours ago, Sim said:

Whts is vanilla?

Pure JavaScript

Djkanna · November 22, 2020

A jQuery way

Edited November 22, 2020 by Djkanna

Magictallguy · November 22, 2020

On 11/22/2020 at 3:44 PM, Djkanna said:

A jQuery way

*Very* minor thing here; you can shorthand your

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

to

elem.click(() => {});

Djkanna · November 22, 2020

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*

SRB · November 23, 2020

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.

Sim · November 23, 2020

<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.

Magictallguy · November 23, 2020

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>

Sim · November 23, 2020

Forgetting a script tag is definitely a first.

Dayo · November 23, 2020

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

Sim · November 23, 2020

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

KyleMassacre · November 15, 2022

On 11/23/2020 at 2:39 PM, Sim said:

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

I don’t want to grave dog but in 2020 this may be accurate in a way but Alpine.js is probably more popular to handle majority of the front end stuff that JQuery was used for

JS get tr ID

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation