I have been using a database within the Moodle Learning Management System that generates a bootstrap table.
Here is an example of what it looks like: https://i.sstatic.net/UJc4M.png
The last row in the table contains a dropdown menu. When viewing your own entry, you have the options to view, edit, or delete the entry (three values to select from):
https://i.sstatic.net/PG6Ui.png
If you are looking at entries from other users, you can only view them (only one value to select from), so the dropdown menu is not necessary:
https://i.sstatic.net/MvYYz.png
How can I change the dropdown menu for entries from other users to a button while keeping the dropdown menu for my own entries?
The button should display "Mehr" and simply be a link to the "view.php" page. I am limited to using CSS or JavaScript but I am not proficient in JS. I can assign the dropdown menu its class, but this applies to all dropdown menus.
This is the code for two dropdown menus (#1 for own entry and #2 for another user's entry):
<div class="dropdown" id="yui_3_17_2_1_1676893448131_33"><button class="btn btn-outline-primary dropdown-toggle"
type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Mehr</button>
<div class="dropdown-menu" style="will-change: transform;">
<div class="dropdown-item"><a href="https://[...]/mod/data/view.php?d=53&rid=1974"><i
class="icon fa fa-search-plus fa-fw " title="Einzelansicht" role="img"
aria-label="Einzelansicht"></i></a></div>
<div class="dropdown-item"><a
href="https://[...]/mod/data/edit.php?d=53&rid=1974&sesskey=QmOlQH4lg5"><i
class="icon fa fa-cog fa-fw " title="Bearbeiten" role="img" aria-label="Bearbeiten"></i></a></div>
<div class="dropdown-item"></div>
<div class="dropdown-divider"></div>
<div class="dropdown-item"><a
href="https://[...]/mod/data/view.php?d=53&delete=1974&sesskey=QmOlQH4lg5"><i
class="icon fa fa-trash fa-fw " title="Löschen" role="img" aria-label="Löschen"></i></a></div>
</div>
</div>
<div class="dropdown"><button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mehr</button>
<div class="dropdown-menu">
<div class="dropdown-item"><a href="https://[...]/mod/data/view.php?d=53&rid=1973"><i
class="icon fa fa-search-plus fa-fw " title="Einzelansicht" role="img"
aria-label="Einzelansicht"></i></a></div>
<div class="dropdown-item"></div>
<div class="dropdown-item"></div>
<div class="dropdown-divider"></div>
<div class="dropdown-item"></div>
</div>
</div>
I am seeking JavaScript assistance to achieve something similar to this: If the dropdown menu only contains one dropdown item, then switch the dropdown menu to a button with the content of the href link and an aria label of "View."
<button type="button" class="btn btn-outline-primary">Mehr</button>
<a class="btn btn-primary" href="https://[...]/mod/data/view.php?d=53&rid=1973" role="button">Link</a>
Can anyone provide guidance on how to implement this?