使用 javascript 不使用 Ajax/Jquery 在特定行中启用文本框

Question

所以我 table 从数据库中填充了信息，插入和删除功能正常工作，但我需要能够在按下编辑按钮的特定行中启用文本框。不幸的是，我不能使用 Jquery 或 Ajax，因为这是一个学校项目，我们不允许使用它。

目前它从数据库中获取唯一的行 ID。

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

脑子一热，我会这样做：

给每个人一个唯一的ID。然后，在您的编辑功能中，传递行的 ID。

好的，现在我们在编辑功能中，我们知道我们要启用哪一行。我们现在可以使用以下 JS 代码来实现您想要的：

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

我从这里恢复了部分代码：Get list of all `input` objects using JavaScript, without accessing a `form` object

希望对您有所帮助。 :)

使用 javascript 不使用 Ajax/Jquery 在特定行中启用文本框

Enable textboxes in a specific row with javascript Without Ajax/Jquery

html

javascript

php