Menu
I'm trying to modify the HTML markup of a page in order to add some button using JavaScript.
Below you can find a "snippet" (quite long, I apologize, but I really need you to get the structure of the page) of the page I am trying to modify.
My JavaScript code is inserted by a browser extension (I can successfully add the JavaScript to the page and make it run) and the only operation it should do is to add a button into the right position.
The HTML page contains a <FORM> with a table in it.
After some rows and cells there is a cell which contains 3 input buttons:
<input type="submit" name="submit" value="Set Ships">
<input type="button" name="sel" value="Select all" onclick="alert('Not Allowed.');">
<input type="button" name="desel" value="Deselect all" onclick="alert('Not Alloowed.');">
I would like my JavaScript code to place a fourth button just after the desel button.
This is the code I use to add the button:
function add() {
var element = document.createElement("input");
element.setAttribute("type", "button");
element.setAttribute("value", "invert");
element.setAttribute("name", "button3");
element.setAttribute("onclick", "foo()");
document.flotta.appendChild(element);
}
This code obviously places the button straight at the end of my document, just after the form (named flotta).
I realized I cannot use the function getElementById because the <td> tag just before the buttons does not have an id associated.
Thus I ask if anyone can point me to a solution to add the fourth button into the right place.
<html>
<head>
<title>fee foo</title>
. . . head code
</head>
<body >
<div id="Layer" name="Layer" /*other attributes*/"></div>
<table /*table attributes*/>
. . . table content
</table>
<form id="flotta" name="flotta" method="post" action="home.php?sel=gestioneflotta">
<table /*table attributes*/>
<tbody>
<tr><td>
<table /* attributes*/>
<tbody><tr>
<td /* attributes*/></td>
<td /* attributes*/></td>
<td /* attributes*/></td>
</tr>
<tr>
<td /* attributes*/"> </td>
<td bgcolor="ffffff" background="bg/pergamena.jpg" align="center">
<input type="submit" name="submit" value="Set Ships">
<input type="button" name="sel" value="Select all" onclick="alert('Not Allowed.');">
<input type="button" name="desel" value="Deselect all" onclick="alert('Not Alloowed.');"> </td>
<td background="bg/menu_d.gif"> </td>
</tr>
<tr>
<td /* attributes*/" width="11" height="11"></td>
<td /* attributes*/></td>
<td /* attributes*/></td>
</tr>
</tbody>
</table>
</td></tr>
<tr>
. . . another row
</tr>
</tbody>
</table>
</form>
<table border="0" cellspacing="0" cellpadding="0" align=center width=510>
. . . another table
</table>
<script type="text/javascript">
some script
</script>
</body>
</html>
578
The following code should get the td:
var td = document.getElementsByName('desel')[0].parentNode;
Basically, it gets all the fields/buttons with the name 'desel' and, assuming there's only one, gets the parent of the first element (which should be the td that contains the buttons).
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
