使用Javascript或Jquery在创建每一行时动态地为表创建递增id

Using Javascript or Jquery to dynamically create incrementing id for table as each row is created

本文关键字：创建 动态 id 一行 Jquery Javascript 使用      更新时间：2023-09-26

我想让用户在这个表中单击一个图像，这是基于从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函数传递所单击图像的行。

实际上根本不需要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()记住当前状态。

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

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

您可以根据每个图像的行索引为其分配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应该是一样的。

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

相关文章：