使用javascript在没有Ajax / Jquery的情况下启用特定行中的文本框

Question

So I have this table getting filled with information from database, The insert and delete functions are working but I need to be able to enable the text boxes in the specific row that the edit button is pressed. Unfortunatly I can not use Jquery or Ajax as this is a school project and we're not allowed to use it.

At the moment it gets the unique row ID from the database.

    <?php
    include("db.php");
    ?>

   <div class="ukeContainer"> <!-- Legger inn i ukecontainer -->
   <input type="button" value="Legg til ny bruker" onclick="nytt();">
   <table class="sortable">  
   <!-- gjør tabellen mulig å sortere -->
  <tr>
  <th>Epost</th>
  <th>Brukernavn</th>
  <th>Etternavn</th>
  <th>Fornavn</th>
  <th>Brukertype</th>
  <th></th></tr>


  <?php
  $sql = "select A.*, Br.Type from  Brukere A INNER JOIN Brukertyper Br    ON A.Brukertype=Br.Brukertype"; 
  if ($db) {
    $res = $db->query($sql);
     while ($rad = $res->fetch_assoc()) {
      echo("<tr><td><input type='text' name='epost'      value='".$rad['Epost']."' disabled></td>");
  echo("<td><input type='text' name='bnavn' value='".$rad['Brukernavn']."' disabled></td>");
  echo("<td><input type='text' name='enavn' value='".$rad['Etternavn']."' disabled></td>");
  echo("<td><input type='text' name='fnavn' value='".$rad['Fornavn']."' disabled></td>");
  echo("<td><input type='text' name='type' value='".$rad['Type']."' disabled></td>");
  echo("<td>");
  echo("<input id='Slett".$rad['idBrukere']."' ");
  echo("type='submit' value='Slett' onclick='slett(".$rad['idBrukere'].")';>");
  echo("<input id='Rediger".$rad['idBrukere']."' ");
  echo("type='submit' value='Rediger' onclick='endre(".$rad['idBrukere'].")';></td></tr>");
  echo("</td></tr>");
}
   } else {die("Får ikke forbindelse med database.");}
 ?>
    </table>
 </div>

 </body>

Answer 1

Just out of the head, I'd do it like this:

Give every an unique id. Then, at your edit-function, pass the ID of the row.

Ok, so now we are in the editfunction and we know which row we want to enable.. We can now use the following JS code to achieve what you want:

function enableRow(rowId)
{
    // Get the container element
    container = document.getElementById(rowId);

    // Find its child `input` elements
    var inputs = container.getElementsByTagName('input');
    for (var index = 0; index < inputs.length; ++index) {
        inputs[index].disabled = false;
    }
}

I recovered part of the code from here: Get list of all `input` objects using JavaScript, without accessing a `form` object

Hope that helps. :)