Toggle between images on a particular row when clicked on images on that row

Question

Here what i am trying to ask is, i have used the “tabledit” jquery plugin for table specifications. Hence i am adding “images” through “tabledit” “html:” keyword, like below code i am adding "images". screen shot of my web page

 $('#projectsTable').Tabledit({ url: '#', deleteButton: false, buttons: { edit: { class: 'btn btn-primary secodary', html: '<img src="/concrete5/application/images/animated/btn_edit.png" id="edit" /><img src="/concrete5/application/images/animated/btn_ok.png" id="ok" style="display:none" />', action: 'edit' } }, columns: { identifier: [1, 'Projects'], hideIdentifier: true, editable: [[1, 'Projects'], [2, 'Subprojects'],[8, 'Project Status', '{"1": "Open", "2": "Closed"}']] }, onDraw: function() { console.log('onDraw()'); }, onSuccess: function(data, textStatus, jqXHR) { console.log('onSuccess(data, textStatus, jqXHR)'); console.log(data); console.log(textStatus); console.log(jqXHR); }, onFail: function(jqXHR, textStatus, errorThrown) { console.log('onFail(jqXHR, textStatus, errorThrown)'); console.log(jqXHR); console.log(textStatus); console.log(errorThrown); }, onAlways: function() { console.log('onAlways()'); }, onAjax: function(action, serialize) { console.log('onAjax(action, serialize)'); console.log(action); console.log(serialize); } });

but here i want toggle between “edit” and “ok” images on particular row when i clicked on that row button. But as i implemented it only toggle between images in first row of my table, this code is not applicable for remaining rows images. So can anyone tell me how can i implement this code to every row of my table. result of my java script function ,the code what i tried is

var toggle = true;
function changing() 
{
document.getElementById("edit").style.display = toggle ? 'none' : 'block';
document.getElementById("ok").style.display = toggle ? 'block' : 'none';
toggle = !toggle; 
}

Anyone please suggest me how to toggle between images on particular row images clicked.

Answer 1

The code is applying it on element with id = edit , which is not what you want. The function is applying for the 1st matching element you get back from document.getElementById('edit') , in your case just the first row.

you can try this way toggle()

//this assumes you have jquery. can also be acheived via vanilla js as well.
//listen to click event on the .edit and .ok (classes) buttons
// also good idea to increase accuracy by img.edit and img.ok instead of just matching on classes
$(function(){
    $('.edit').on('click',function(){   
       $(this).toggle();  
       //show the ok button which is just next to the edit button
       $(this).next(".ok").toggle();  
    });

    $('.ok').on('click',function(){ 
       $(this).toggle();  
       $(this).prev(".edit").toggle();     
    });
})

a even better approach

In the table edit action html just update like so

html: '<img class="edit" />',

css

.edit {
 background: url("/concrete5/application/images/animated/btn_edit.png") no-repeat scroll 0 0 transparent;
}

.ok {
background: url("/concrete5/application/images/animated/btn_ok.png") no-repeat scroll 0 0 transparent;
}

script

$(function(){
    $('.edit').on('click',function(){   
         $(this).toggleClass( "ok" );          
    });
})