2017-07-11 4 views
1

私は各IDとデータベースからの対応するIDを区別しようとしています。例:Name_val19。行var name=document.getElementById("name_val"+id).innerHTML;はヌル値を戻しています。.getElementById( "name_val" + id).innerHTMLがnullであるのはなぜですか?

<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> 
+0

' ">'、 'row ['id']'は '$' –

答えて

0

は最初、私はgetElementByClass("edit_button") to get <button class="edit_button" id="..."> getElementByIdをを使用してみてください、あなたのIDが複雑であるため、クラスによって要素を取得をお勧めします、いくつかのことのようになります。値は、データベースも

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コードに格納されています()は、id = ""属性でdom(html)要素をjsスコープに取得しようとしているので、何かを行うことができます。それはgetElementByIdを(「IDofElement」)

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

する必要がありますが、それはあなたが何をありますのでご getElementByIdを(「IDofElement」+「全体AJAX応答」)を行う var id=response;はエラーをスロー呼び出していない設定のように見えますidのidを持つdom要素 <div id="rowENTIRE-AJAX-RESPONSE"></div>

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> 

要素(例えば.find().closest())とattach event handlersを見つけるために、その能力を最大限にjQueryのを利用します。 document.getElementByIdonclickの属性は、passéの場合はjQueryとなります。

あなたのコードがきれいになります

$('.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>

関連する問題