Img Src или data-imgsrc Coldfusion

Прежде всего, <button><tr><td>Something</td></tr></button> является недопустимой разметкой. Вы должны просто выводить кнопки теги с возможно <br> после каждого из них.

Во-вторых, вы правильно <cfloop> список учетных записей с помощью <cfloop>. Тем не менее, вы передаете только 1-ю запись данных в раздел JavaScript. Таким образом, каждая нажатая кнопка может отображать только одно и то же изображение большего размера.

Чтобы сделать то, что вы хотите, вы можете динамически генерировать массив JavaScript с использованием данных запроса, а затем использовать data-imageID на кнопке, чтобы нанести кнопку с нажатой кнопкой мыши на правильное изображение из массива. Затем вы будете вытаскивать данные записи на клиентской стороне, используя вашу функцию jQuery и заполняющую div1.

---

2013-12-24: Пусть начнется сверху.

У вас есть этот запрос:

<cfquery datasource="AccessTest" name="qTest">
    SELECT Account, Image, Image_ID
    FROM PictureDB
</cfquery>

У вас есть цель DIV:

<div id="div1">
<h2>Display Image</h2>
</div>

Вы динамически создаете HTML-кнопки с помощью CFML:

<cfloop query="qTest">
<button>#qTest.Account#</button>
</cfloop>

Наконец, у вас есть этот JavaScript, чтобы назначить действие для события click на каждой кнопке.

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").html('<img src="<cfoutput>#qTest.Image#</cfoutput>">');
        });
    });
</script>

Я создал этот JSFiddle, чтобы показать, как будет выглядеть полученный HTML (используя изображения с моего сайта).

Конечный результат:

<script>
$(document).ready(function(){
    $("button").on('click', function(){
        $("#div1").html('<img src="http://iknowkungfoo.com/static/icons/32/linkedin.png">');
    });
});
</script>

<div id="div1">
    <h2>Display Image</h2>
</div>

<button>Linked In</button>
<button>Facebook</button>
<button>Twitter</button>

Каждая кнопка в документе может иметь только одно и то же изображение, назначенное ему.

---

Динамически создавать клиентский JavaScript с использованием CFML

Запрос и целевой DIV остаются неизменными, но позволяют обновлять HTML, который вы собираетесь генерировать.

Каждой кнопке нужен уникальный идентификатор DOM. Сделайте это, используя Image_ID как часть значения. Используйте атрибут данных HTML5 для хранения обработчика Image_ID для каждой кнопки.

<cfoutput query="qTest">
    <button id="account_#qTest.Image_ID#" data-image-id="#qTest.Image_ID#">#qTest.Account#</button>
</cfoutput>

Результат должен выглядеть следующим образом:

<button id="account_1" data-image-id="1">Linked In</button>
<button id="account_2" data-image-id="2">Facebook</button>
<button id="account_3" data-image-id="3">Twitter</button>

Теперь нам нужен массив объектов JavaScript, который будет содержать данные запроса в клиентском коде.

$(document).ready(function(){
    var _img = [];
    <cfoutput query="qTest">
        _img.push({'id': #qTest.Image_ID#, 'src': '#qTest.Image#'});
    </cfoutput>
    console.log(_img);
});

Это будет выглядеть следующим образом:

$(document).ready(function(){
    var _img = [];
    _img.push({'id': 1, 'src': 'http://iknowkungfoo.com/static/icons/32/linkedin.png'});
    _img.push({'id': 2, 'src': 'http://iknowkungfoo.com/static/icons/32/facebook.png'});
    _img.push({'id': 3, 'src': 'http://iknowkungfoo.com/static/icons/32/twitter.png'});
    console.log(_img);
});

Теперь мы можем связать все это вместе

1. назначая обработчик кликов кнопкам <button>s,
2. который использует значение, если data-
3. найти правильный объект из массива JavaScript
4. и сделать правильное изображение в целевой DIV.

$(document).ready(function(){
    var _img = [];
    _img.push({'id': 1, 'src': 'http://iknowkungfoo.com/static/icons/32/linkedin.png'});
    _img.push({'id': 2, 'src': 'http://iknowkungfoo.com/static/icons/32/facebook.png'});
    _img.push({'id': 3, 'src': 'http://iknowkungfoo.com/static/icons/32/twitter.png'});
    console.log(_img);

    $("button").on('click', function(){
        var _id = $(this).data('image-id');
        console.log('Image ID: ' + _id + '.');
        // Find the corrosponding object in the _img array.
        var result = $.grep(_img, function(e){ return e.id === _id });
        // If only one is found, then reference the image src from the matching object.
        if (result.length === 1) {
            console.log(result[0].src);
            $("#div1").html('<img src="' + result[0].src + '">');
        } else {
            // If none or more than one are found, show a warning.
            console.warn('Could not find image ' + _id + '.');
        }
    });

});

Это можно увидеть здесь.