在创建每一行时，使用Javascript或Jquery动态创建表的递增ID

Question

我希望用户单击此表中的图像，该图像是基于Web服务发送的JSON数据动态创建的，并且图像会发生变化。再次单击图像时，它将变回第一个图像（仅在两个图像之间相互交换）。

我有一个通过jQuery的$.ajax()函数创建的表，如下所示：

<table border="0" width=80% id="table">
            <thead>
            <tr>
                  <td><h3>Check to Renew</h3></td>
                  <td width=40%><h3>Vendor Part</h3></td>
                  <td width=100%><h3>Part Description</h3></td>
                  <td><h3>Unit Price</h3></td>
                  <td><h3>Quantity</h3></td>
            </tr>
            </thead>
            <tbody>
                <tr class="template">
                  <td><img src="images/checkmark.png" alt="check" id="row1" onclick=""></td>
                  <td>$vendorPart</td>
                  <td>$partDescription</td>
                  <td>$price</td>
                  <td><input class="quantityClass" name="quantity" value="$quantity"/></td>
                </tr>
            </tbody>
        </table>

这是更改图像的简单Javascript函数：

renewimg=Array("images/checkmark.png","images/gray_x.png");
function rowImageRefresh(y)
{
    document.getElementById(y).src=renewimg[++m];
    if (m==1)
    {m=-1;}
}

这个Javascript函数工作得很漂亮，但是只有我传递了图像id（在这种情况下特定于行）。用于测试目的的硬编码证明了这一点我的问题是我希望能够在创建表行时动态创建行ID，然后具有可以传递该id的功能。

我想如果我要说明这一点，它会看起来像这样：

JavaScript: var row = 1;

HTML:
//table data

<td><img src="images/checkmark.png" alt="check" id="row+[i];i++;" onclick="rowImageRefresh(this.row.id)"></td>
//more table data

在创建每一行时动态创建id并且onclick函数通过单击的图像行。

Answer 1

你根本不需要一个id。例如：

<img src="images/checkmark.png" alt="check" onclick="toggle(this)">

然后脚本：

function toggle(element)
{
    var sources = ["images/checkmark.png", "images/gray_x.png"],
        current = $(element).data('state') || 0;

    current = 1 - current;

    $(element).data('state', current);
    element.src = sources[current];
}

它在两个状态之间切换，使用.data()记住当前状态。

Answer 2

您可以使用id =“x”设置单个行ID。或者，您可以使用jQuery查找发生click事件的索引并获取该部分的索引。

$('img.check').click(function(){
   var id = $(this).index();
   rowImageRefresh();
});

Answer 3

以下是根据行索引为每个图像分配id的一种方法：

$.each(rows, function(index, row) {
    var data = $.extend({}, row, { id: "row" + index });
    var $row = $(template(data));
    $row.removeClass('template');
    var $img = $('img', $row);
    $img.on('click', function() {
        var $this = $(this);
        if ($this.data('checked') === true) {
            var checked   = $this.attr('src');
            var unchecked = $this.data('src');
            $this.attr('src', unchecked);
            $this.data('src', checked);
            $this.data('checked', false);
        } else {
            var unchecked = $this.attr('src');
            var checked   = $this.data('src');
            $this.attr('src', checked);
            $this.data('src', unchecked);
            $this.data('checked', true);
        }
    });

    $tbody.append($row);
});

图像的HTML如下所示：

<img src="checked.png" alt="check" data-checked="true" data-src="unchecked.png" id="${ id }" />

这是一个有效的例子：http://jsfiddle.net/potatosalad/MJYpA/1/

我使用lodash.js作为模板，但无论你做什么来生成行HTML都应该是一样的。

Answer 4

请考虑使用自定义数据属性，而不是尝试生成唯一ID。

<img src="..." data-partid="$vendorPart" class="part-img" />

$(".part-img").on("click", function() {
    var id = $(this).data("partid");
    // or
    var id = $(this).attr("data-partid").val();

    rowImageRefresh(id);
});

编辑：似乎您正在尝试切换复选框图像。更好的方法可能是使用css和sprites更改背景图像。然后点击你根据状态交换class。