javascript - 为什么 .getElementById ("name_val"+id).innerHTML 为空？-6ren

javascript - 为什么 .getElementById ("name_val"+id).innerHTML 为空？

转载作者：行者123 更新时间：2023-11-28 04:26:09

我试图将每个 id 与数据库中相应的 id 区分开来。例如:Name_val19 。专线var name=document.getElementById("name_val"+id).innerHTML;返回空值。该值也存储在数据库中

function edit_row(id)
{ 
  var name=document.getElementById("name_val"+id).innerHTML;
  var age=document.getElementById("age_val"+id).innerHTML;

   document.getElementById("name_val"+id).innerHTML="<input type='text'                               id='name_text"+id+"' value='"+name+"'>";
   document.getElementById("age_val"+id).innerHTML="<input type='text' id='age_text"+id+"' value='"+age+"'>";

   document.getElementById("edit_button"+id).style.display="none";
   document.getElementById("save_button"+id).style.display="block";
  }

  function save_row(id)
  {
   var name=document.getElementById("name_val"+id).value;
   var age=document.getElementById("age_val"+id).value;

   $.ajax
   ({
    type:'post',
    url:'modify_records.php',
    data:{
     edit_row:'edit_row',
     row_id:id,
     name_val:name,
     age_val:age
    },
    success:function(response) {
     if(response=="success")
     {
      document.getElementById("name_val"+id).innerHTML=name;
      document.getElementById("age_val"+id).innerHTML=age;
      document.getElementById("edit_button"+id).style.display="block";
      document.getElementById("save_button"+id).style.display="none";
     }
    }
   });
  }

  function delete_row(id)
  {
   $.ajax
   ({
    type:'post',
    url:'modify_records.php',
    data:{
     delete_row:'delete_row',
     row_id:id,
    },
    success:function(response) {
     if(response=="success")
     {
      var row=document.getElementById("row"+id);
      row.parentNode.removeChild(row);
     }
    }
   });
  }

  function insert_row()
  {
   var name=document.getElementById("new_name").value;
   var age=document.getElementById("new_age").value;

   $.ajax
   ({
    type:'post',
    url:'modify_records.php',
    data:{
     insert_row:'insert_row',
     name_val:name,
     age_val:age
    },
    success:function(response) {
     if(response!="")
     {
      var id=response;

var table=document.getElementById("user_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+id+"'><td id='name_val"+id+"'>"+name+"</td><td id='age_val"+id+"'>"+age+"</td><td><input type='button' class='edit_button' id='edit_button"+id+"' value='Edit' onclick='edit_row("+id+");'/><input type='button' class='save_button' id='save_button"+id+"' value='Save' onclick='save_row("+id+");'/><input type='button' class='delete_button' id='delete_button"+id+"' value='Delete' onclick='delete_row("+id+");'/></td></tr>";

document.getElementById("new_name").value="";
document.getElementById("new_age").value="";
         }
                }
                 });
                }

      $("#insert").submit(function() {
            var name= $("#new_name").val();
            var password= $("#new_age").val();

            $.ajax({
                type: "POST",
                url: "connect.php",
                data: "name=" + name+ "&password=" + password,
                success: function(data) {
                   alert("sucess");
                }
            });


        });

PHP 代码:

<html>
<head>

</head>
<body>
<div id="wrapper">
<table align="center" cellpadding="10" border="1" id="user_table">
<tr>
<th>NAME</th>
<th>AGE</th>
<th></th>
</tr>
<?php
include "connect.php";
$select=mysqli_query($connection,"SELECT * FROM user_detail");
if($select!=NULL){
while ($row=mysqli_fetch_array($select,MYSQLI_BOTH)) 
{
 ?>
        <tr id="row<?php echo $row['id'];?>">
  <td id="name_val<?php echo row['id'];?>"><?php echo $row['name'];?></td>
  <td id="age_val<?php echo $row['id'];?>"><?php echo $row['age'];?></td>
  <td>
      <button class="edit_button" id="edit_button<?php echo $row['id'];?>"  onclick="edit_row('<?php echo       $row['id'];?>');">Edit</button>
      <button class="save_button" id="save_button<?php echo $row['id'];?>"  onclick="save_row('<?php echo $row['id'];?>');">Save</button>
      <button class="delete_button" id="delete_button<?php echo $row['id'];?>"  onclick="delete_row('<?php echo $row['id'];?>');">Delete</button>
  </td>
</tr>
<?php
}
}
?>
<tr id="new_row"><form id="insert" onclick="insert_db()">
 <td><input type="text" id="new_name"></td>
 <td><input type="text" id="new_age"></td>
    <td><button type="button" value="Insert Row" onclick="insert_row()">Insert</button></td>
</form></tr>
</table>
</div>
</body>
    <script type="text/javascript" src="./js/jquery-3.2.0.js"></script>
<script type="text/javascript" src="./js/modify_records.js"></script>
</html>

最佳答案

看起来像一些东西，首先我建议按类获取元素，因为你的 id 很复杂，尝试使用 getElementByClass("edit_button") to get <button class="edit_button" id="...">getElementById() 正是这样做的，您试图通过 id=""属性获取 dom (html) 元素，并将其放入 js 范围中，以便您可以用它做一些事情。它应该是 getElementById("IDofElement")

getElementById("row") gets <p id="row"> </p>

但看起来你设置了 var id=response;这使得你的getElementById("IDofElement"+"ENTIRE AJAX RESPONSE") 调用会抛出错误，因为没有 id 为的 dom 元素，例如 <div id="rowENTIRE-AJAX-RESPONSE"></div>

关于javascript - 为什么 .getElementById ("name_val"+id).innerHTML 为空？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45042608/

文章推荐： c++ - ROS catkin build - 找不到共享库

文章推荐： javascript - Gsheet 由于脚本而超时

文章推荐： javascript - 无法使用 jQuery 将数据写入 txt 文件

javascript - 为什么 .getElementById ("name_val"+id).innerHTML 为空？
我试图将每个 id 与数据库中相应的 id 区分开来。例如:Name_val19 。专线var name=document.getElementById("name_val"+id).innerHTM

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么 .getElementById ("name_val"+id).innerHTML 为空？