Question

这里我想问的是，我已经使用了表格规范的“tabledit”jquery插件。因此我通过“tabledit”“html：”关键字添加“图像”，如下面的代码我添加“图像”。 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);
            }
 		


      });

但是当我点击该行按钮时，我想在特定行上的“编辑”和“确定”图像之间切换。但是当我实现它时只在表格的第一行中的图像之间切换，这段代码不适用于剩余的行图像。所以任何人都可以告诉我如何将我的代码实现到我的表的每一行。 result of my java script function，我尝试的代码是

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

任何人都建议我如何在点击的特定行图像上切换图像。

Answer 1

代码将其应用于id = edit的元素，这不是您想要的。该函数正在申请从document.getElementById('edit')返回的第一个匹配元素，在您的情况下只是第一行。

你可以这样试试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();     
    });
})

更好的方法

在table编辑操作中，html只是像这样更新

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;
}

脚本

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

单击该行上的图像时，在特定行上的图像之间切换

1 个答案: