在创建每一行时，使用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 =“x”设置单个行ID。 或者，您可以使用jQuery查找发生click事件的索引并获取该部分的索引。

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

Answer 2

请考虑使用自定义数据属性，而不是尝试生成唯一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 。

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="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()记住当前状态。