img通过更改它的src,并由动态提供的源代码(MySQL和PHP)使用Javascript绘制
img by changing it's src and is drawn by a dynamically provided source (mysql and php) with a Javascript
我有这些脚本:
<?
/*//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"> Applicant Name </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"> Visa </div></th>
<th> <div align="center"> Passport </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">
<input name="submit" type="submit" value="Send" height="14">
<br><br>
</form>
</body>
</html>
可能的目标是改变它的 SRC
<td align="center"><img class="accntVisaPhotoPath" height="50" width="50"></img></td>
<td align="center"><img class="passportPath" height="50" width="50"></img></td>
我试图在这里搜索,但似乎我在修改我发现的内容时太愚蠢了。我知道,这很简单,但我是处理自定义数据属性的新手,然后让 Javascript 填充它,但图像让我措手不及。
我的L A B在这里。
我建议在这种情况下使用类,不要使用 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>
然后,只需根据您选择的值定位该选项。然后根据选择提取这些数据属性值。
<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>
当然,图像的路径取决于您,因为您的问题中找不到PHP代码,这只是一个例子。
这是一个工作演示:
http://codepad.viper-7.com/GhH6Yh
谢谢
您的获取图像路径应该返回一个图像以显示,请尝试以下操作:
function getImagePath(){
return "https://www.google.com/images/srpr/logo11w.png";
}
现在,您需要将参数添加到getImagePath函数,并且这些函数应返回适当的图像URL。
相关文章:
- 使用jquery将mysql数据获取到新的表行中
- 活动选项卡's源代码-获取变量s值
- 将地理编码结果转换为php变量以发布到mysql数据库
- 如何使用JS禁用表行,并在MYSQL中插入所选选项
- 从MySQL数据库中获取输入数据需要两次页面刷新
- 将一个表的id与另一个表中的user_id进行匹配,以获取mysql中的记录
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- 如何使用PHP将javascript变量添加到mysql数据库中
- 将phonegap图像发布到php/mysql-图像字段从发布请求中消失
- 在node.js-mysql中执行UPDATE查询不起作用
- 更新从Mysql查询检索到的数据?Node.js节点mysql
- 单击鼠标,用MySQL数据填充html表单输入字段
- 无法更改源代码的网站的自动填充功能
- 浓缩一系列mySQL查询
- 如何翻译MySQL查询's ResultSet转换为整数
- 使用 AJAX 将加载的数据插入页面源代码以将它们插入到 MySQL 中
- Google Maps API:如何替换源代码,从Google Spreadsheet API到MySQL/PHP
- img通过更改它的src,并由动态提供的源代码(MySQL和PHP)使用Javascript绘制
- 如何将.PNG文件转换为可以存储在mysql中并通过CSS调用的源代码;png”;
- 如何使用PHP在mysql数据库中插入图像和数据的源代码