Question

我有一张表从数据库中获取数据。数据库表中有'yes'和'no'值，但不是yes和no我想打印图像，然后只需单击图像将其从yes更改为no即可修改它。这是我的表：

<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>

我希望能够在点击时更改数据，所以我需要获取'alt'的值，然后将其传递给ajax，但首先我只想打印alt值来检查它是否有效：< / p>

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);
        }        
    });*/
}

有没有办法获得editableObj的图像alt？

Answer 1

你的editableObj是this = td，你需要找到图片，试试如下：

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

但最好使用数据属性。

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

但无论如何......

Answer 2

你可以参考poc代码来获得所需的图像alt

<!--Q. Ref. https://stackoverflow.com/questions/45709630/how-to-get-alt-of-image-in-jquery-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>How to get 'alt' of image in jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!--<script src="../lib/jquery-3.2.1.min.js"></script>-->
    <script>
        function saveToDatabase(td) {
            var $dataTr = $(td).parent();//get the clicked td tr

            //container.find('html_tag.class')

            //get Project Captain Img alt
            console.log($dataTr.find('img.prcpt').attr('alt'));

            //get Supervisor Img alt
            console.log($dataTr.find('img.spr').attr('alt'));

            //get Checker Img alt
            console.log($dataTr.find('img.chk').attr('alt'));
        }
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Image 1</td>
                <td>Image 2</td>
                <td>Image 3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td onclick="saveToDatabase(this);"><u>Emp 1</u></td>
                <td><img class="prcpt" alt="Img1" /></td>
                <td><img class="spr" alt="Img2" /></td>
                <td><img class="chk" alt="Img3" /></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

如何在jquery中获取图像的'alt'

2 个答案: