错误JS - 未捕获的TypeError:无法读取null的属性“value”

时间:2017-01-03 09:22:13

标签: javascript php jquery

一直试图找出这个问题的原因但无济于事,希望有人可以插手。

这是JS,错误发生在第17行。如果它有帮助,我还附加了html。谢谢。

function edit_row(id)
{
 var order=document.getElementById("order_val"+id).innerHTML;
 var link=document.getElementById("link_val"+id).innerHTML;
 var date=document.getElementById("date_val"+id).innerHTML;

 document.getElementById("order_val"+id).innerHTML="<input type='text' id='order_text"+id+"' value='"+order+"'>";
 document.getElementById("link_val"+id).innerHTML="<input type='text' id='link_text"+id+"' value='"+link+"'>";
 document.getElementById("date_val"+id).innerHTML="<input type='text' id='date_text"+id+"' value='"+date+"'>";
	
 document.getElementById("edit_button"+id).style.display="none";
 document.getElementById("save_button"+id).style.display="block";
}

function save_row(id)
{
 var order=document.getElementById("order_text"+id).value;
 var link=document.getElementById("link_text"+id).value;
 var date=document.getElementById("date_text"+id).value;
	
 $.ajax
 ({
  type:'post',
  url:'modify_records.php',
  data:{
   edit_row:'edit_row',
   row_id:id,
   order_val:order,
   link_val:link,
   date_val:date
  },
  success:function(response) {
   if(response=="success")
   {
    document.getElementById("order_val"+id).innerHTML=order;
    document.getElementById("link_val"+id).innerHTML=link;
    document.getElementById("date_val"+id).innerHTML=date;
    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 order=document.getElementById("new_order").value;
 var link=document.getElementById("new_link").value;
 var date=document.getElementById("new_date").value;

 $.ajax
 ({
  type:'post',
  url:'modify_records.php',
  data:{
   insert_row:'insert_row',
   order_val:order,
   link_val:link,
   date_val:date
  },
  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='order_val"+id+"'>"+order+"</td><td id='link_val"+id+"'>"+link+"</td><td id='date_val"+id+"'>"+date+"</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_order").value="";
	document.getElementById("new_link").value="";
    document.getElementById("new_date").value="";
   }
  }
 });
}
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script type="text/javascript" src="7.js"></script>
    </head>
    <body>
        <div id="wrapper">

        <?php
        $host="localhost";
        $username="empty";
        $password="empty";
        $databasename="empty";
        $connect=mysql_connect($host,$username,$password);
        $db=mysql_select_db($databasename);

        $select =mysql_query("SELECT * FROM user_detail");
        ?>

        <table align="center" cellpadding="10" border="1" id="user_table">
            <tr>
                <th>Total order(s)</th>
                <th>Link</th>
                <th>Date</th>
                <th></th>
            </tr>
            <?php
            while ($row=mysql_fetch_array($select)) {
            ?>
                <tr id="row<?php echo $row['id'];?>">
                    <td id="order_val<?php echo $row['id'];?>"><?php echo $row['order'];?></td>
                    <td id="link_val<?php echo $row['id'];?>"><?php echo $row['link'];?></td>
                    <td id="date_val<?php echo $row['id'];?>"><?php echo $row['date'];?></td>
                    <td>
                        <input type='button' class="edit_button" id="edit_button<?php echo $row['id'];?>" value="edit" onclick="edit_row('<?php echo $row['id'];?>');">
                        <input type='button' class="save_button" id="save_button<?php echo $row['id'];?>" value="save" onclick="save_row('<?php echo $row['id'];?>');">
                        <input type='button' class="delete_button" id="delete_button<?php echo $row['id'];?>" value="delete" onclick="delete_row('<?php echo $row['id'];?>');">
                    </td>
                </tr>
            <?php
            }
            ?>
                <tr id="new_row">
                    <td><input type="text" id="new_order"></td>
                    <td><input type="text" id="new_link"></td>
                    <td><input type="text" id="new_date"></td>
                    <td><input type="button" value="Insert Row" onclick="insert_row();"></td>
               </tr>
           </table>
       </div>
    </body>
</html>

modify_records.php

<?php
$host="localhost";
$userlink="empty";
$password="empty";
$databaselink="empty";

$connect=mysql_connect($host,$userlink,$password);
$db=mysql_select_db($databaselink);

if(isset($_POST['edit_row']))
{
 $row=$_POST['row_id'];
 $order=$_POST['order_val'];
 $link=$_POST['link_val'];
 $date=$_POST['date_val'];

 mysql_query("update user_detail set order='$order',link='$link',date='$date' where id='$row'");
 echo "success";
 exit();
}

if(isset($_POST['delete_row']))
{
 $row_no=$_POST['row_id'];
 mysql_query("delete from user_detail where id='$row_no'");
 echo "success";
 exit();
}

if(isset($_POST['insert_row']))
{
 $order=$_POST['order_val'];
 $link=$_POST['link_val'];
 $date=$_POST['date_val'];
 mysql_query("insert into user_detail values('','$order','$link','$date')");
 echo mysql_insert_id();
 exit();
}
?>

0 个答案:

没有答案