这里我想问的是,我已经使用了表格规范的“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;
}
任何人都建议我如何在点击的特定行图像上切换图像。
答案 0 :(得分: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" );
});
})