个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我试图将每个 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/
26
4
0
我试图将每个 id 与数据库中相应的 id 区分开来。例如:Name_val19 。专线var name=document.getElementById("name_val"+id).innerHTM
我是一名优秀的程序员,十分优秀！