Yevgeniy Bagackiy Yevgeniy Bagackiy - 2 years ago 54
jQuery Question

How to get 'alt' of image in jquery

I have a table getting data from database. There are 'yes' and 'no' values inside database table but instead of yes and no I want to print image and then be able to modify it just by clicking on image to change from yes to no. Here is my table:

<div class="test2"></div>
<table id="admin_table" class="quartz-table">
<thead class="head">
<tr>
<th class="sorter-false">Del</th>
<th class="sorter-false">Count</th>
<th class="sorter-false">Driver</th>
<th class="sorter-false">SubDriver</th>
<th class="sorter-false">Skills</th>
<th class="sorter-false"><span class='vert'>Project Captain</span></th>
<th class="sorter-false"><span class='vert'>Supervisor</span></th>
<th class="sorter-false"><span class='vert'>Checker</span></th>
</tr>
</thead>
<tbody>
<?php
foreach($faq as $k=>$v) {
?>
<tr>
<td class="delete_row"><a href="#" class="link_del" id="<?php echo $faq[$k]["id"]; ?>"> <img alt="" src="imagesAssessment/delete.png"></a></td>
<td><?php echo $count++ ?></td>
<td class="editable_skl" contenteditable="false" onBlur="saveToDatabase(this,'driver','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["driver"]; ?></td>
<td class="editable_skl" contenteditable="false" onBlur="saveToDatabase(this,'subdriver','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["subdriver"]; ?></td>
<td class="editable_skl" contenteditable="false" onBlur="saveToDatabase(this,'skills','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["skills"]; ?></td>
<td class="prcpt" onclick="saveToDatabase(this,'Project Captain','<?php echo $faq[$k]["id"]; ?>')" >
<?php
if($faq[$k]["Project Captain"] == 'yes')
{ echo '<img alt="yes" src="imagesAssessment/yes.png">' ; }
else{ echo '<img alt="no" src="imagesAssessment/no.png">'; }
?>
</td>
<td class="spr" onclick="saveToDatabase(this,'Supervisor','<?php echo $faq[$k]["id"]; ?>')" >
<?php
if($faq[$k]["Supervisor"] == 'yes')
{ echo '<img alt="yes" src="imagesAssessment/yes.png">'; }
else{ echo '<img alt="no" src="imagesAssessment/no.png">'; }
?>
</td>
<td class="chk" onclick="saveToDatabase(this,'Checker','<?php echo $faq[$k]["id"]; ?>')" >
<?php
if($faq[$k]["Checker"] == 'yes')
{ echo '<img alt="yes" src="imagesAssessment/yes.png">'; }
else{ echo '<img alt="no" src="imagesAssessment/no.png">'; }
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>




I want to be able to change data on click so I need to get value of 'alt' and then pass it to ajax, but first I just want to print alt value to check if it works:

function showEdit(editableObj) {
$(editableObj).css("background","#4D5B6D");
$(".header_hide_show").css('visibility', 'visible');
}
function saveToDatabase(editableObj,column,id) {
var department = $('#info').val()

$('.test2').html(editableObj.attr('alt'));
/*$.ajax({
url: "comAssessment/hr_config_skill_edit.php",
type: "POST",
data:'department='+department+'&column='+column+'&editval='+answer+'&id='+id,
success: function(data){
$(editableObj).css("background","#4D5B6D");
//$('.test2').html(data);
}
});*/
}


Is there a way to get alt of image for editableObj?

Answer Source

Your editableObj is this = td, you need to find image, try below:

var alt = $(editableObj).find("img").attr("alt");

But better to use data attributes.

<img data-status="yes"/>
.attr("data-status"); 

But anyway ...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download