Fatal编程技术网
  • javascript/
  • img是通过更改其src来实现的，并且由动态提供的源代码（mysql和php）和Javascript绘制

img是通过更改其src来实现的，并且由动态提供的源代码（mysql和php）和Javascript绘制

javascript php mysql

img是通过更改其src来实现的，并且由动态提供的源代码（mysql和php）和Javascript绘制,javascript,php,mysql,Javascript,Php,Mysql,我有以下脚本： <? /*//Disable error reporting error_reporting(0); */ //Report runtime errors //error_reporting(E_ERROR | E_WARNING | E_PARSE); //Report all errors error_reporting(E_ALL); //end of error reporting ?> <html> <meta http-equiv="

我有以下脚本：

<?
/*//Disable error reporting
error_reporting(0);
*/
//Report runtime errors
//error_reporting(E_ERROR | E_WARNING | E_PARSE);

//Report all errors
error_reporting(E_ALL);
//end of error reporting

?>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('select').on('change', function(e){
    var selected_value = $(this).val();
    var option_data = $(this).children('option[value="'+selected_value+'"]');

    // get data values
    var visanumber = option_data.data('visanumber');
    var idnumber = option_data.data('idnumber');
    var statusapp = option_data.data('statusapp');
    var subdate = option_data.data('subdate');
    // the photo
    var accntvisaphotopath = option_data.data('accntvisaphotopath');
    if(accntvisaphotopath == 'data-passport=') {
        $(this).closest('td').siblings().find('img.accntVisaPhotoPath').attr('src', 'accntvisaphotopath');
        $(this).closest('td').siblings().find('img.passportPath').attr('src', 'passportpath');
    } else {
        $(this).closest('td').siblings().find('img.passportPath').attr('src', 'passportpath');
        $(this).closest('td').siblings().find('img.accntVisaPhotoPath').attr('src', 'accntvisaphotopath');
    }
    // set the values
    $(this).closest('td').siblings().find('span.visanumber').text(visanumber);
    $(this).closest('td').siblings().find('span.idnumber').text(idnumber);
    $(this).closest('td').siblings().find('span.statusapp').text(statusapp);
    $(this).closest('td').siblings().find('span.subdate').text(subdate);
     });
 </script>
 </head>
 <body>
 <?

 $con=mysqli_connect("localhost","xxx","xxxx","xxxx");

// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL:" . mysqli_connect_error();
}    
$result = mysqli_query($con, "SELECT * FROM visa ORDER BY idvisa");

?>
<div align="center">
<form name="contractInfo" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
<table border="1px" width="700">
<tr>
<td align="center" colspan="7"><b>Email:</b><input name="email" type="text" id="email"></td>
</tr>
<tr>
    <th> <div align="center">&nbsp;Applicant Name&nbsp;</div></th>
    <th> <div align="center">Visa Number</div></th>
    <th> <div align="center">ID Number </div></th>
    <th> <div align="center">Employment Status</div></th>
    <th> <div align="center">&nbsp;Visa&nbsp;</div></th>
    <th> <div align="center">&nbsp;Passport&nbsp;</div></th>
    <th> <div align="center"><font color="red">Elapse</div></th>
    </tr>
<tr>
<td>
<select>
<? echo "<option value=\"\">Select Person:</option>";?><br>
<? while ($row=mysqli_fetch_array($result)) {
echo "<option value=".$row['idvisa']." data-visanumber=".$row['visanumber']." data-idnumber=".$row['idnumber']." data-statusapp='{$row['statusapp']}' data-accntVisaPhotoPath=".$row['accntVisaPhotoPath']." data-passport=".$row['passportPath']." data-subdate='{$row['subdate']}'>".$row['fName']." ".$row['lName']."</option>";
    }
?>
</select>
<?//Additional var
//Time
$today = date("Y/m/d G:i:s");
$date= $row["subdate"];
$days = strtotime($today) - strtotime($date);

//End Time
?>
</td>
<td><span class="visanumber"></span></td>
<td><span class="idnumber"></span></td> 
<td><span class="statusapp"></span></td>    
<td align="center"><img class="accntVisaPhotoPath" height="50" width="50"></img></td>   
<td align="center"><img class="passportPath" height="50" width="50"></img></td>
<td><span class="subdate"></span></td>
</span>
</tr>
<tr>
<td>
<select>
<? 
mysqli_data_seek( $result, 0 );
echo "<option value=\"\">Select Person:</option>";
while ($row=mysqli_fetch_array($result)) {
echo "<option value=".$row['idvisa']." data-visanumber=".$row['visanumber']." data-idnumber=".$row['idnumber']." data-statusapp='{$row['statusapp']}' data-accntVisaPhotoPath=".$row['accntVisaPhotoPath']." data-passport=".$row['passportPath']." data-subdate='{$row['subdate']}'>".$row['fName']." ".$row['lName']."</option>";
}   
?>
</td>
<td><span class="visanumber"></span></td>
<td><span class="idnumber"></span></td> 
<td><span class="statusapp"></span></td>    
<td align="center"><img class="accntVisaPhotoPath" height="50" width="50"></img></td>   
<td align="center"><img class="passportPath" height="50" width="50"></img></td>
<td><span class="subdate"></span></td>
</span>
</tr>
</table>
<br><br>
    <input type="button" name="cancelvalue" value="CANCEL" onClick="self.close()"> 
    <input name="reset" type="reset" value="Clear" height="14"> &nbsp;&nbsp;
    <input name="submit" type="submit" value="Send" height="14">
<br><br>
</form>
</body>
</html>
其目的可能是改变它的src

我试图在这里搜索，但似乎我在修改我发现的东西时太笨了。我知道，这很简单，但我在处理自定义数据属性方面是新手，然后让Javascript填充所有内容，但图像让我措手不及

我的在这里。

您的获取图像路径应返回要显示的图像，请尝试以下操作：

function getImagePath(){

   return "https://www.google.com/images/srpr/logo11w.png";
}
现在，您需要将参数添加到getImagePath函数中，函数应该返回相应的图像url

我建议在这种情况下使用类，不要使用ID，因为它将有多行

<td><span class="visanumber"></span></td>
<td><span class="idnumber"></span></td>    
<td><span class="statusapp"></span></td>   
<td align="center"><img class="accntVisaPhotoPath" height="50" width="50"></td>    
<td align="center"><img class="passport" height="50" width="50"></td>
<td><span class="subdate"></span></td>
然后，根据您选择的值确定该选项的目标。然后根据选择提取这些数据属性值

当然，图像的路径取决于您，因为在您的问题中找不到PHP代码，这只是一个示例

下面是一个工作演示：

谢谢

当选择框被更改时会发生什么？它将填充整行，然后显示图像。PHP与此有什么关系？这没关系，但是源代码是由mysql使用phpI动态提供的，已经更正了一些变量，但是，我在控制台上有以下错误：GET 500 Internal Server error accntVisaPhotoPath:1 GET 500 Internal Server error。我在找里面的东西。HmmmI已删除.attr'src'，passportPath上的一些“”；这是我的错。但是，@Jong没有src这就是我上次告诉你的，你需要正确地回显那些值，如果你仔细观察，你会发现数据属性值的格式不正确，没有值。正确地回显$row的值。您确定$row['accntVisaPhotoPath']中有值吗？我将其作为echo echo。$row['fName']$行['lName']。；但是statusapp被切断了。它只为..显示，而不是为选择：@Jong tsk我的天哪，这个bug怎么了，聊天室现在应该可以为你工作了，该死，不管怎样，使用数据statusapp='.$row['statusapp'.'注意引号 
<td><span class="visanumber"></span></td>
<td><span class="idnumber"></span></td>    
<td><span class="statusapp"></span></td>   
<td align="center"><img class="accntVisaPhotoPath" height="50" width="50"></td>    
<td align="center"><img class="passport" height="50" width="50"></td>
<td><span class="subdate"></span></td>

<script type="text/javascript">
$(document).ready(function(){
$('select').on('change', function(e){
    var selected_value = $(this).val();
    var option_data = $(this).children('option[value="'+selected_value+'"]');

    // get data values
    var visanumber = option_data.data('visanumber');
    var idnumber = option_data.data('idnumber');
    var statusapp = option_data.data('statusapp');
    var subdate = option_data.data('subdate');

    // the photo
    var accntVisaPhotoPath = option_data.data('accntvisaphotopath');
    $(this).closest('td').siblings().find('img.accntVisaPhotoPath').attr('src', accntVisaPhotoPath);

    var passportPath = option_data.data('passportpath');
    $(this).closest('td').siblings().find('img.passportPath').attr('src', passportPath);

    // set the values
    $(this).closest('td').siblings().find('span.visanumber').text(visanumber);
    $(this).closest('td').siblings().find('span.idnumber').text(idnumber);
    $(this).closest('td').siblings().find('span.statusapp').text(statusapp);
    $(this).closest('td').siblings().find('span.subdate').text(subdate);
    });
 });
 </script>