用于更改图像来源的 Javascript 脚本答案

【问题标题】：Javascript script to change the source of an image用于更改图像来源的 Javascript 脚本
【发布时间】：2010-10-26 21:58:17
【问题描述】：

我在我的一个项目中使用 flexigrid，我需要想出一种方法来根据其中一个单元格的值更改图像源。对于习惯flexigrid的人，我有以下代码：

$json .= ",'".addslashes("<span><img src='' id='flag' />" . $row['availability']. "</span>")."'";

和我想出的 javascript 看起来像这样：

<script type="text/javascript"> 
var available = "<?php echo '$row[availability]' ?>"; 

if (available == 0) { 
document.getElementById('flag').src="images/flag_red.png"; 
} 
elseif (available == 1) { 
document.getElementById('flag').src="images/flag_green.png"; 
} 
else { 
document.getElementById('flag').src="images/flag_orange.png"; 
}

我不确定我需要在哪里插入这个函数以及如何触发它。任何帮助将不胜感激。

问候，克里斯蒂安。

LE：报告问题的代码：

url: 'post2.php',
            dataType: 'json',
            colModel : [
                {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center', hide: true},
                {display: 'URL', name : 'url', width : 450, sortable : false, align: 'left'},
                {display: 'File Name', name : 'filename', width : 270, sortable : true, align: 'left'},
                {display: 'Availability', name : 'availability', width : 50, sortable : true, align: 'center'},
                {display: 'State', name : 'state', width : 40, sortable : true, align: 'center'},
                {display: 'Total Size', name : 'totalsize', width : 90, sortable : false, align: 'center'},
                {display: 'Current Size', name : 'currentsize', width : 90, sortable : false, align: 'center'},
                {display: 'Procent', name : 'procent', width : 40, sortable : true, align: 'center'},
                {display: 'Log',  width : 20, sortable : false, align: 'center'},
                ],
            buttons : [
                {name: 'Add', bclass: 'add', onpress : test},
                {separator: true},
                {name: 'Delete', bclass: 'delete', onpress : test},
                {separator: true},
                {name: 'Select All', bclass : 'selectall', onpress : test},
                {name: 'DeSelect All', bclass : 'deselectall', onpress : test},
                {separator: true}
                ],
            searchitems : [
                {display: 'URL', name : 'url'},
                {display: 'Filename', name : 'filename', isdefault: true}
                ],
            sortname: "state",
            sortorder: "asc",
            usepager: true,
            title: '',
            useRp: false,
            rp: 5,
            showTableToggleBtn: true,
            } ----- **IE says there is a problem here**         );   
});

【问题讨论】：

标签： php javascript json flexigrid

【解决方案1】：

您不应该为此使用 javascript，您可以直接在现有的 PHP 行中执行此操作。

$json .= ",'" . 
         addslashes("<span><img src='" . 
         ($row['availability'] == 0 ? "images/flag_red.png" :
            ($row['availability'] == 1 ? "images/flag_green.png" : 
               "images/flag_orange.png")
         ) . 
         "' id='flag' />" . $row['availability'] . "</span>") . "'";

【讨论】：

简单有效。谢谢，福斯科……非常感谢。每天我都会学到新东西，我很喜欢它。干杯，C。
在旧浏览器 IE 7.0.53 中测试了代码，但无法正常工作，导致 javascript 出错，预期标识符、字符串或数字 flexigrid，第 63 行字符 4，指出的位置是表的配置正在关闭的地方。如果我删除代码，没有问题。
@Chris19 我想这是一个单独的问题.. flexigrid 是否与该版本的 IE 兼容？如您所知，此解决方案不涉及 javascript。
据我所知，整个表格内容都是由 javascript 生成的，所以我猜测代码会破坏该表格中的顺序。我会在一秒钟内更新问题。
并且您提供的代码被插入到 post2.php 文件中。