我有在表中添加行的代码来添加新图像, 添加行的功能是工作会,但这行的浏览图像[onclick]的功能只适用于第一行。 我想让浏览图像的功能适用于我添加的每一行。
HTML代码为: -
<table id="images" class="list">
<thead>
<tr>
<td class="left"><?php echo $entry_image; ?></td>
<td class="right"><?php echo $entry_sort_order; ?></td>
<td></td>
</tr>
</thead>
<?php $image_row = 0; ?>
<?php foreach ($product_images as $product_image) { ?>
<tbody id="image-row<?php echo $image_row; ?>">
<tr>
<td class="left"><div class="image"><img src="<?php echo $product_image['thumb']; ?>" alt="" id="thumb<?php echo $image_row; ?>" />
<input type="hidden" name="product_image[<?php echo $image_row; ?>][image]" value="<?php echo $product_image['image']; ?>" id="image<?php echo $image_row; ?>" />
<br />
<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>');" id="simple-image" class="button"><?php echo $text_browse; ?></a> | <a onclick="$('#thumb<?php echo $image_row; ?>').attr('src', '<?php echo $no_image; ?>'); $('#image<?php echo $image_row; ?>').attr('value', '');" class="button"><?php echo $text_clear; ?></a></div></td>
<td class="right"><input type="text" name="product_image[<?php echo $image_row; ?>][sort_order]" value="<?php echo $product_image['sort_order']; ?>" size="2" /></td>
<td class="left"><a onclick="$('#image-row<?php echo $image_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td>
</tr>
</tbody>
<?php $image_row++; ?>
<?php } ?>
<tfoot>
<tr>
<td colspan="2"></td>
<td class="left"><a onclick="addImage();" class="button"><?php echo $button_add_image; ?></a></td>
</tr>
</tfoot>
</table>
添加行的功能是
var image_row = <?php echo $image_row; ?>;
function addImage() {
html = '<tbody id="image-row' + image_row + '">';
html += ' <tr>';
html += ' <td class="left"><div class="image"><img src="<?php echo $no_image; ?>" alt="" id="thumb' + image_row + '" /><input type="hidden" name="product_image[' + image_row + '][image]" value="" id="image' + image_row + '" /><br /><a onclick="image_upload(\'image' + image_row + '\', \'thumb' + image_row + '\');" id="simple-image" class="button"><?php echo $text_browse; ?></a> | <a onclick="$(\'#thumb' + image_row + '\').attr(\'src\', \'<?php echo $no_image; ?>\'); $(\'#image' + image_row + '\').attr(\'value\', \'\');" class="button"><?php echo $text_clear; ?></a></div></td>';
html += ' <td class="right"><input type="text" name="product_image[' + image_row + '][sort_order]" value="" size="2" /></td>';
html += ' <td class="left"><a onclick="$(\'#image-row' + image_row + '\').remove();" class="button"><?php echo $button_remove; ?></a></td>';
html += ' </tr>';
html += '</tbody>';
$('#images tfoot').before(html);
image_row++;
}
&#13;
我用来浏览图片或上传图片的功能是:
function image_upload(field, thumb) {
var btnUpload=$('#simple-image');
new AjaxUpload(btnUpload, {
action: 'index.php?route=common/filemanager/upload&image=' + encodeURIComponent($('#' + field).attr('value')),
name: 'image',
autoSubmit: true,
responseType: 'json',
onChange: function(file, extension) {
this.setData({'directory': ''});
this.submit();
},
onSubmit: function(file, extension) {
$('#upload').append('<img src="catalog/view/theme/mall/image/loading.gif" class="loading" style="padding-left: 5px;" />');
},
onComplete: function(file, json) {
if (json.success) {
$('#' + field).attr('value','data/user/'+file);
$.ajax({
url: 'index.php?route=common/filemanager/image&image=' + encodeURIComponent($('#' + field).attr('value')),
dataType: 'text',
success: function(text) {
$('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />');
}
});
}
if (json.error) {
alert(json.error);
}
$('.loading').remove();
}
});
};
&#13;
可以帮助我一些人