Javascript 为什么.getElementById（“name”val“&“x2B”id）.innerHTML为空？

我试图将每个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");
                }
            });


        });

功能编辑_行（id）
{ 
var name=document.getElementById（“name_val”+id）.innerHTML；
var age=document.getElementById（“age_val”+id）.innerHTML；
document.getElementById（“name_val”+id）.innerHTML=“”；
document.getElementById（“age_val”+id）.innerHTML=“”；
document.getElementById（“编辑按钮”+id）.style.display=“无”；
document.getElementById（“保存按钮”+id）.style.display=“块”；
}
函数保存行（id）
{
var name=document.getElementById（“name_val”+id）.value；
var age=document.getElementById（“age_val”+id）.value；
$.ajax
({
类型：'post'，
url:'modify_records.php'，
数据：{
编辑行：'编辑行'，
行id:id，
姓名：姓名，
年龄：年龄
},
成功：功能（响应）{
如果（响应=“成功”）
{
document.getElementById（“name_val”+id）.innerHTML=name；
document.getElementById（“age_val”+id）.innerHTML=age；
document.getElementById（“编辑按钮”+id）.style.display=“块”；
document.getElementById（“保存按钮”+id）.style.display=“无”；
}
}
});
}
函数删除_行（id）
{
$.ajax
({
类型：'post'，
url:'modify_records.php'，
数据：{
删除行：'删除行'，
行id:id，
},
成功：功能（响应）{
如果（响应=“成功”）
{
var row=document.getElementById（“行”+id）；
row.parentNode.removeChild（row）；
}
}
});
}
函数插入_行（）
{
var name=document.getElementById（“新名称”）.value；
var age=document.getElementById（“新时代”）.value；
$.ajax
({
类型：'post'，
url:'modify_records.php'，
数据：{
插入行：'插入行'，
姓名：姓名，
年龄：年龄
},
成功：功能（响应）{
如果（响应！=“”）
{
var id=响应；
var table=document.getElementById（“用户表”）；
var table_len=（table.rows.length）-1；
var row=table.insertRow（table_len）.outerHTML=“”+名称+”“+年龄+”；
document.getElementById（“新名称”）.value=“”；
document.getElementById（“新时代”）.value=“”；
}
}
});
}
$（“#插入”）.submit（函数（）{
变量名称=$（“#新名称”）.val（）；
var password=$（“#新时代”）.val（）；
$.ajax({
类型：“POST”，
url:“connect.php”，
数据：“name=“+name+”&password=“+password，
成功：功能（数据）{
警惕（“成功”）；
}
});
});

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（“编辑按钮”）获取
getElementById（）正是这样做的，您正试图通过其id=“”属性将dom（html）元素获取到js范围中，以便可以对其进行处理。它应该是getElementById（“IDofElement”）

getElementById（“行”）获取

但看起来你已经准备好了
var id=响应使您的
getElementById（“IDofElement”+“整个AJAX响应”）调用引发错误，因为没有id为的dom元素。
看起来有几件事，首先我建议按类获取元素，因为您的id很复杂，请尝试使用
getElementByClass（“编辑按钮”）获取

getElementById（）正是这样做的，您正试图通过其id=“”属性将dom（html）元素获取到js范围中，以便可以对其进行处理。它应该是getElementById（“IDofElement”）

getElementById（“行”）获取

但看起来你已经准备好了
var id=响应使您的
getElementById（“IDofElement”+“整个AJAX响应”）调用引发错误，因为没有id为的dom元素。
你用这些ID自杀了。用于每行存储一次记录的ID

<tr data-id="<?php echo $row['id'] ?>">
    <!-- added class names to cells bc we'll be using them later -->
    <td class="name"><?php echo $row['name'] ?></td>
    <td class="age"><?php echo $row['age'] ?></td>
    <td>
        <button type="button" class="edit_button">Edit</button>
        <button type="button" class="save_button">Save</button>
        <button type="button" class="delete_button">Delete</button>
    </td>
</tr>

快速演示


$（'.edit_按钮'）。单击（函数（）{
var tr=$（this）.closest（'tr'），
tdName=tr.find（'td.name'），
tdAge=tr.find（'td.age'）；
var id=tr.data（'id'），
name=tdName.text（），
age=tdAge.text（）；
html（“”）；
html（“”）；
tr.find（'.edit_按钮'）.hide（）；
tr.find（'.save_按钮'）.show（）；
});
$（'.save_按钮'）。单击（函数（）{
var tr=$（this）.closest（'tr'），
tdName=tr.find（'td.name'），
tdAge=tr.find（'td.age'）；
var id=tr.data（'id'），
name=tdName.find（'input'）.val（），
age=tdAge.find（'input'）.val（）；
console.log（'saving'，id，name，age）
$.post（'modify_records.php'{
编辑行：“编辑行”，
行id:id，
姓名：姓名，
年龄：年龄
}，功能（回应）{
如果（响应=“成功”）{
html（name）；
html（age）；
tr.find（'.edit_按钮'）.show（）；
tr.find（'.save_按钮'）.hide（）；
}
});
});
$（'.delete_按钮'）。单击（函数（）{
var tr=$（this）.closest（'tr'）
变量id=tr.data（'id'）；
console.log（'deleting'，id）
$.post（'modify_records.php'{
删除行：“删除行”，
行id:id
}，功能（回应）{
如果（响应=“成功”）{
tr.remove（）；
}
});
});
。保存按钮{
显示：无；
}

比尔
21
编辑
拯救
删除
莎拉
22
编辑
拯救
删除
斜纹棉布
34
编辑
拯救
删除
你用这些ID自杀了。用于每行存储一次记录的ID

<tr data-id="<?php echo $row['id'] ?>">
    <!-- added class names to cells bc we'll be using them later -->
    <td class="name"><?php echo $row['name'] ?></td>
    <td class="age"><?php echo $row['age'] ?></td>
    <td>
        <button type="button" class="edit_button">Edit</button>
        <button type="button" class="save_button">Save</button>
        <button type="button" class="delete_button">Delete</button>
    </td>
</tr>

快速演示


$（'）。编辑按钮