为什么我的HTML结构不能被jQuery的
问题描述:
发现我所有的网页源代码这样为什么我的HTML结构不能被jQuery的
<?php
include 'config/koneksi.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lay Out Penempatan Produk UHT Area Gudang Rak A-F</title>
<link rel="icon" href="http://localhost/wifi/images/RSUP.png">
<link rel="stylesheet" type="text/css" href="css/popup-window.css" media="screen">
<script type="text/javascript" src="js/popup-window.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
function setvalue(values) {
document.getElementById('posisi').value = values;
}
</script>
<script type="text/javascript">
var htmlobjek;
$(document).ready(function(){
//apabila terjadi event onchange terhadap object <select id=pid>
$("#pid").change(function(){
var pid = $("#pid").val();
$.ajax({
url: "ambilnamaproduk.php",
data: "pid="+pid,
cache: false,
success: function(data){
$("#pname").val(data);
}
});
});
});
</script>
<script>
var i = $("#data").attr('value');
alert(i);
</script>
<script type="text/javascript">
var htmlobjek;
$(document).ready(function() {
var i = $("#myTD").val();
$.ajax({
url: "cek.php",
type:'POST'
data: "i="+i,
cache: false,
success: function (data) {
$("#cek").val(data);
}
});
});
var k = $("#cek").val();
if(k = "0"){
$(document).ready(function() {
$(".data").css("background-color", "#00CC00");//green
});
}
else{
$(document).ready(function() {
$(".data").css("background-color", "#FF0000");//red
});
}
</script>
</head>
<body>
<div>
<input id="cek" name="cek" type="text" />
<table width="1023" border="1">
<tr>
<th colspan="2">A1</th>
<th colspan="2">A2</th>
<th colspan="2">A3</th>
<th colspan="2">A4</th>
<th colspan="2">A5</th>
<th colspan="2">A6</th>
<th colspan="2">A7</th>
<th colspan="2">A8</th>
<th colspan="2">A9</th>
</tr>
<tr>
<td id="data" value="A1.4"> <div align="center"> <input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down', parent : this, width : '270px' });setvalue(this.value);" value="A1.4" /></div></td>
<td class="data"><div align="center"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down', parent : this, width : '270px' });setvalue(this.value);" value="A1.8" /></div></td>
<td><div align="center"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down', parent : this, width : '270px' });setvalue(this.value);" value="A2.4" /></div></td>
<td><div align="center"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down', parent : this, width : '270px' });setvalue(this.value);" value="A2.8" /></div></td>
<td><div align="center"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down', parent : this, width : '270px' });setvalue(this.value);" value="A3.4" /></div></td>
<td><div align="center"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down', parent : this, width : '270px' });setvalue(this.value);" value="A3.8" /></div></td>
<td><div align="center">A4.4</div></td>
<td><div align="center">A4.8</div></td>
<td><div align="center">A5.4</div></td>
<td><div align="center">A5.8</div></td>
<td><div align="center">A6.4</div></td>
<td><div align="center">A6.8</div></td>
<td><div align="center">A7.4</div></td>
<td><div align="center">A7.8</div></td>
<td><div align="center">A8.4</div></td>
<td><div align="center">A8.8</div></td>
<td><div align="center">A9.4</div></td>
<td><div align="center">A9.8</div></td>
</tr>
<tr>
<td><div align="center">A1.3</div></td>
<td><div align="center">A1.7</div></td>
<td><div align="center">A2.3</div></td>
<td><div align="center">A2.7</div></td>
<td><div align="center">A3.3</div></td>
<td><div align="center">A3.7</div></td>
<td><div align="center">A4.3</div></td>
<td><div align="center">A4.7</div></td>
<td><div align="center">A5.3</div></td>
<td><div align="center">A5.7</div></td>
<td><div align="center">A6.3</div></td>
<td><div align="center">A6.7</div></td>
<td><div align="center">A7.3</div></td>
<td><div align="center">A7.7</div></td>
<td><div align="center">A8.3</div></td>
<td><div align="center">A8.7</div></td>
<td><div align="center">A9.3</div></td>
<td><div align="center">A9.7</div></td>
</tr>
<tr>
<td><div align="center">A1.2</div></td>
<td><div align="center">A1.6</div></td>
<td><div align="center">A2.2</div></td>
<td><div align="center">A2.6</div></td>
<td><div align="center">A3.2</div></td>
<td><div align="center">A3.6</div></td>
<td><div align="center">A4.2</div></td>
<td><div align="center">A4.6</div></td>
<td><div align="center">A5.2</div></td>
<td><div align="center">A5.6</div></td>
<td><div align="center">A6.2</div></td>
<td><div align="center">A6.6</div></td>
<td><div align="center">A7.2</div></td>
<td><div align="center">A7.6</div></td>
<td><div align="center">A8.2</div></td>
<td><div align="center">A8.6</div></td>
<td><div align="center">A9.2</div></td>
<td><div align="center">A9.6</div></td>
</tr>
<tr>
<td><div align="center">A1.1</div></td>
<td><div align="center">A1.5</div></td>
<td><div align="center">A2.1</div></td>
<td><div align="center">A2.5</div></td>
<td><div align="center">A3.1</div></td>
<td><div align="center">A3.5</div></td>
<td><div align="center">A4.1</div></td>
<td><div align="center">A4.5</div></td>
<td><div align="center">A5.1</div></td>
<td><div align="center">A5.5</div></td>
<td><div align="center">A6.1</div></td>
<td><div align="center">A6.5</div></td>
<td><div align="center">A7.1</div></td>
<td><div align="center">A7.5</div></td>
<td><div align="center">A8.1</div></td>
<td><div align="center">A8.5</div></td>
<td><div align="center">A9.1</div></td>
<td><div align="center">A9.5</div></td>
</tr>
</table>
</div>
<div class="popup_window_css" id="sample">
<table class="popup_window_css">
<tr class="popup_window_css">
<td class="popup_window_css">
<div class="popup_window_css_head"><img src="images/close.gif" alt="" width="9" height="9" />Aksi</div>
<div class="popup_window_css_body"><div style="border: 1px solid #808080; padding: 6px; background: #FFFFFF;">
<form method="post" action="aksi.php"/>
<table>
<tr>
<td> Werehouse Product </td>
<td><select name="wp">
<option selected>- Jenis Werehouse -</option>
<?php
$q = mssql_query("select WHSName from tblSPDMstWarehouseProduct Order by WHSID");
while ($r = mssql_fetch_array($q)){
echo "<option value=$r[WHSName]>$r[WHSName]</option>";
}
?>
</select>
</td>
<tr>
<td> Posisi</td>
<td> <input type='text' name='posisi' id='posisi' readonly/></td>
</tr>
<tr>
<td> Product ID</td>
<td> <select name="pid" id="pid">
<option selected = "selected" >- Produk ID -</option>
<?php
$q = mssql_query("select ProductID from tblMstProduct Order by ProductID");
while ($r = mssql_fetch_array($q)){
echo "<option value=$r[ProductID]>$r[ProductID]</option>";
}?>
</select>
</td>
</tr>
<tr>
<td> Product Name</td>
<td ><input type="text" id="pname" name="pname" size="65" readonly/>
</td>
</tr>
<tr>
<td> Production Date</td>
<td > <input type='text' name="tgl" /></td>
</tr>
<tr>
<td colspan='2' align='center'>
<input type='submit' value= 'Save'>
<input type='button' value='view' onclick="javascript:ajax_post();"/>
</td>
</tr>
</table>
<div class="popup_window_css_foot"></div></td></tr></table>
</div>
</body>
</html>
我们专注于
<td id="data" value="A1.4"> <div align="center"> <input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down', parent : this, width : '270px' });setvalue(this.value);" value="A1.4" /></div></td>
当我在单独使用这个jQuery
<script>
var i = $("#data").attr('value');
alert(i);
</script>
它的工作内容检查它在http://jsfiddle.net/6qxQW/119/
但我用我所有的代码实现。我的浏览器说这个值(我)undefined .. 什么是头痛..什么想法是什么问题...?
答
随着页面加载并读取/解析JavaScript,您的代码正在执行。把它看作是从头到尾阅读。它会在页面的其余部分完成加载之前立即开始执行代码(包括ID为“data”的元素)。它可能会在你的本地机器上工作,因为少了没有延迟,一切都瞬间加载,但在服务器上它稍微慢一些,所以你可能会也可能不会看到问题,但通常会。
你应该能够解决你的问题,将它包装在jquery文档就绪事件处理程序中,以便在文档加载完成之前不会执行代码。 http://api.jquery.com/ready/
$(document).ready(function() {
// Handler for .ready() called.
//AT THIS POINT #data should now be loaded in the DOM and be available to access.
var i = $("#data").attr('value');
alert(i);
});
答
我的建议是,你可以试试这个方法:
<table>
<tr>
<td id="data" data-value="A1.4" >
<div align="center">
<input type="button" value="A1.4" />
</div>
</td>
</tr>
</table>
而且使用得到它:
var i = $("#data").data('value');
alert(i);
顺便说一句,如果你正在使用AJAX,这可能无法工作。
我得到'A1.4'。你使用的是什么浏览器? – 2013-04-10 04:57:03
所有浏览器Chrome浏览器,IE浏览器,firefork,羊群等总是说相同 – Andriansyah 2013-04-10 04:58:22
伙计,我在谷歌浏览器26检查。:)它的作品... – 2013-04-10 04:59:09