2016-12-29 119 views
1

我有以下數據表,它有2個控制按鈕,編輯並保存。我遇到的問題是從第一個預覽隱藏保存按鈕。隱藏某個顯示中的按鈕

(我想實現的輸出是第一頁應該只顯示編輯,當編輯用戶點擊它應該顯示節省。)

請進一步解釋見的片段。

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+"'>"; 
 
\t 
 
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_text"+id).value; 
 
var age=document.getElementById("age_text"+id).value; 
 
\t 
 
$.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=""; 
 
    } 
 
    } 
 
}); 
 
}
<table align="center" cellpadding="10" border="1" id="user_table"> 
 
<tr> 
 
<th>NAME</th> 
 
<th>AGE</th> 
 
<th></th> 
 
</tr> 
 

 
<tr id=""> 
 
    <td id="name_val">Test Name</td> 
 
<td id="age_val">Test Age</td> 
 
    <td> 
 
    <input type='button' class="edit_button" id="edit_button" value="edit" onclick="edit_row('');"> 
 

 
    <input type='button' class="save_button" id="save_button" value="save" onclick="save_row('');"> 
 
    
 
    
 
</tr> 
 
<?php 
 
} 
 
?> 
 

 

 
</table>

+1

您還可以使用visibility:hidden的財產 – HebleV

回答

1

只需添加這css

.save_button{ 
    display: none; 
} 

或去內聯cssstyle="display:none"的第一顯示器。

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+"'>"; 
 
\t 
 
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_text"+id).value; 
 
var age=document.getElementById("age_text"+id).value; 
 
\t 
 
$.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=""; 
 
    } 
 
    } 
 
}); 
 
}
.save_button{ 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table align="center" cellpadding="10" border="1" id="user_table"> 
 
<tr> 
 
<th>NAME</th> 
 
<th>AGE</th> 
 
<th></th> 
 
</tr> 
 

 
<tr id=""> 
 
    <td id="name_val">Test Name</td> 
 
<td id="age_val">Test Age</td> 
 
    <td> 
 
    <input type='button' class="edit_button" id="edit_button" value="edit" onclick="edit_row('');"> 
 

 
    <input type='button' class="save_button" id="save_button" value="save" onclick="save_row('');"> 
 
    
 
    
 
</tr> 
 
<?php 
 
} 
 
?> 
 

 

 
</table>

+0

''這就夠了。我對麼 ? –

+0

是的,這也很好,如果你有單行的表。但是,如果你有不止一個,那就拿第一個 –

1

最初設定爲display:none在HTML代碼中這樣下面的代碼保存按鈕,

<input type='button' class="edit_button" id="edit_button" value="edit" 
    onclick="edit_row('');" style="display:block;"> 
<input type='button' class="save_button" id="save_button" value="save" 
    onclick="save_row('');" style="display:none;">