为什么.getElementById（＆＃34; name_val＆＃34; + id）.innerHTML为空？

时间：2017-07-11 19:01:04

标签： javascript php jquery html getelementbyid

我试图将每个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>

2 个答案:

答案 0 :(得分：0)

看起来像是一些东西，首先我建议逐个获取元素，因为你的id很复杂，请尝试使用getElementByClass("edit_button") to get <button class="edit_button" id="..."> getElementById（）正是这样做的，你试图通过它的id =“”属性得到一个dom（html）元素到js Scope中，这样你就可以用它做点什么了。它应该是getElementById（“IDofElement”）

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

但它看起来像你设置  var id=response;这使你的 getElementById（“IDofElement”+“ENTIRE AJAX RESPONSE”）调用抛出一个错误，因为没有dom元素的id为例如 <div id="rowENTIRE-AJAX-RESPONSE"></div>

答案 1 :(得分：0)

你用所有这些ID杀死了自己。使用HTML5 data-attribute每行存储您的记录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>

充分利用jQuery查找元素（例如.find()和.closest()）和attach event handlers。当谈到jQuery时，document.getElementById和onclick属性是passé。

您的代码可以更清晰：

$('.edit_button').click(function () {
    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();

    tdName.html('<input type="text" name="name"  value="' + name + '">');
    tdAge.html('<input type="text" name="age" value="' + age + '">');

    tr.find('.edit_button').hide();
    tr.find('.save_button').show();
});

$('.save_button').click(function () {
    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();

    // shorthand method for $.ajax POST
    $.post('modify_records.php', {
        edit_row: 'edit_row',
        row_id: id,
        name_val: name,
        age_val: age
    }, function (response) {
        if (response == "success") {
            tdName.html(name);
            tdAge.html(age);
            tr.find('.edit_button').show();
            tr.find('.save_button').hide();
        }
    });
});

$('.delete_button').click(function () {
    var tr = $(this).closest('tr')
    var id = tr.data('id');

    $.post('modify_records.php', { delete_row: 'delete_row', row_id: id }, function (response) {
        if (response == "success") {
            tr.remove();
        }
    });
});

快速演示 

$('.edit_button').click(function() {
  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();

  tdName.html('<input type="text" name="name"  value="' + name + '">');
  tdAge.html('<input type="text" name="age" value="' + age + '">');

  tr.find('.edit_button').hide();
  tr.find('.save_button').show();
});

$('.save_button').click(function() {
  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', {
    edit_row: 'edit_row',
    row_id: id,
    name_val: name,
    age_val: age
  }, function(response) {
    if (response == "success") {
      tdName.html(name);
      tdAge.html(age);
      tr.find('.edit_button').show();
      tr.find('.save_button').hide();
    }
  });
});

$('.delete_button').click(function() {
  var tr = $(this).closest('tr')
  var id = tr.data('id');

  console.log('deleting', id)

  $.post('modify_records.php', {
    delete_row: 'delete_row',
    row_id: id
  }, function(response) {
    if (response == "success") {
      tr.remove();
    }
  });
});
.save_button {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr data-id="1">
    <td class="name">Bill</td>
    <td class="age">21</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>
  <tr data-id="2">
    <td class="name">Sarah</td>
    <td class="age">22</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>
  <tr data-id="3">
    <td class="name">Jean</td>
    <td class="age">34</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>
</table>

相关问题
最新问题