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


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

所以我让这个表充满了数据库中的信息,插入和删除功能正在工作,但我需要能够启用按下编辑按钮的特定行中的文本框。不幸的是,我不能使用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>

我会这样做:

给每个人一个唯一的id。然后,在编辑函数中,传递行的id。

好的,现在我们在edit函数中,我们知道要启用哪一行。。我们现在可以使用以下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;
    }
}

我从这里恢复了部分代码:使用JavaScript获取所有"输入"对象的列表,而不访问"表单"对象

希望能有所帮助。:)