为什么我的html结构无法通过jquery找到

时间：2013-04-10 04:56:04

标签： 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/

中进行检查

但在我用我的所有代码实现它之后。我的浏览器说这个值（i）未定义.. 真是个头疼......不知道问题是什么......？

2 个答案:

答案 0 :(得分：0)

当页面加载并读取/解析您的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);
});

答案 1 :(得分：0)

我的建议是，您可以尝试这种方式：

<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，这可能不起作用。

相关问题
最新问题