js如何动态操作table

Question

用ajax取到了后台的值                var stuName=xmlHttpRequest.responseXML.getElementsByTagName("name");
          var num=xmlHttpRequest.responseXML.getElementsByTagName("num"); 
          var photo=xmlHttpRequest.responseXML.getElementsByTagName("photo");                 
                var className=xmlHttpRequest.responseXML.getElementsByTagName("class"); //返回的结果字符串     
                var majorName=xmlHttpRequest.responseXML.getElementsByTagName("major");
                var collegeName=xmlHttpRequest.responseXML.getElementsByTagName("college");
现在想把这些数据放在一个table里显示
table的形式如下                    <table width="273" border="0">
                      <tbody id="resultsBody">
   <tr>
     <td width="96" rowspan="5" style="padding:0px; margin:0px;"><img src="" width="101"  height="115"/></td>
     <td width="161">&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   </tbody>
</table>请问用js如何操作啊~

Answer 1

<table width="273" border="0" id="d">
 <tbody id="resultsBody">
              <tr>
                <td width="96" rowspan="5" style="padding:0px; margin:0px;"><img src="" width="101"  height="115"/></td>
                <td width="161">&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              </tbody>
            </table><script>
t = document.getElementById("d")
t.rows[0].cells[0].innerHTML="<img src='http://www.google.com.hk/intl/zh-CN/images/logo_cn.png'>"
t.rows[0].cells[1].innerHTML="xsss"t.rows[1].cells[0].innerHTML=stuName
t.rows[2].cells[0].innerHTML=stuName 
</script>等等

Answer 2

我最外面还套了个div   而且是隐藏的style="display: none"
是不是因为这样 ？
 document.getElementById("d") 还取得到里面的table吗？
如果我直接在最外面的div下  div.innerHTML=stuName
这样是取得到值的

Answer 3

var stuName=xmlHttpRequest.responseXML.getElementsByTagName("name");
var num=xmlHttpRequest.responseXML.getElementsByTagName("num");
这些得到的是数组,即使你现在只传回一个记录，也得用[0]来取对象。<script>
tb = document.getElementById("resultsBody")
tb.rows[0].cells[0].innerHTML="<img src='"+photo[0]+"'>"
tb.rows[0].cells[1].innerHTML=stuName[0];
tb.rows[1].cells[0].innerHTML=className[0];
tb.rows[2].cells[0].innerHTML=collegeName[0];
tb.rows[3].cells[0].innerHTML=majorName[0];
tb.rows[4].cells[0].innerHTML=collegeName[0];
</script>

Answer 4

通过HTML里的<tbody id="resultsBody">
用tb = document.getElementById("resultsBody");可直接取到。

Answer 5

 //Ajax实现鼠标经过显示信息 
    var showInfo = new function ()
{ this.showLayer = function (e, id,studentID) 
{ var p = window.event ? [event.clientX, event.clientY] : [e.pageX, e.pageY];
with (document.getElementById(id + "").style) 
{ display = "block"; left = p[0] + 10 + "px"; top = p[1] + 10 + "px"; }
if (window.event) { window.event.cancelBubble = true; }
else { if (e) { e.preventDefault(); } } 
showStudentInfo(studentID)  
}; 
this.hideLayer = function (e, id) 
{ with (document.getElementById(id + "").style) { display = "none"; } 
if (window.event) { window.event.cancelBubble = true; } 
else { if (e) { e.preventDefault(); } } 
}; 
}; 
    
  
   //根据浏览器的类型，创建xmlHttpRequest对象  
      function createXmlHttpRequest()  
    {  
        if(window.ActiveXObject)  
        { 
            return new ActiveXObject("Microsoft.XMLHTTP");  
        }  
        else if( window.XMLHttpRequest)  
        {  
            return new XMLHttpRequest();  
        }      
    }  
    var xmlHttpRequest;  
         
     
   //回调函数  
    function callback()  
    {       
         //clearTable();

         //请求被成功响应，已接收到结果  
         if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)  
         {   
          var stuName=xmlHttpRequest.responseXML.getElementsByTagName("name");
          var num=xmlHttpRequest.responseXML.getElementsByTagName("num"); 
          var photo=xmlHttpRequest.responseXML.getElementsByTagName("photo");                 
            var className=xmlHttpRequest.responseXML.getElementsByTagName("class"); //返回的结果字符串     
            var majorName=xmlHttpRequest.responseXML.getElementsByTagName("major");
            var collegeName=xmlHttpRequest.responseXML.getElementsByTagName("college");                   
         
          //var table= document.getElementById("resultsTable");
          //table.rows[0].cells[0].innerHTML="<img src=\""+photo[0].firstChild.nodeValue+"\" width=\"101\"  height=\"115\"/>";
          //table.rows[0].cells[1].innerHTML="姓名:"+stuName[0].firstChild.nodeValue;
          //table.rows[1].cells[0].innerHTML="学号:"+num[0].firstChild.nodeValue;
          //table.rows[2].cells[0].innerHTML="班级:"+className[0].firstChild.nodeValue;
          //table.rows[3].cells[0].innerHTML="专业:"+majorName[0].firstChild.nodeValue;
          //table.rows[4].cells[0].innerHTML="学院:"+collegeName[0].firstChild.nodeValue;
         
          document.getElementById("detailInfo").innerHTML="姓名:"+stuName[0].firstChild.nodeValue+"<br>"+
          "学号:"+num[0].firstChild.nodeValue+"<br>"+
          "班级:"+className[0].firstChild.nodeValue+"<br>"+
          "专业:"+majorName[0].firstChild.nodeValue+"<br>"+
          "学院:"+collegeName[0].firstChild.nodeValue;
         }  
         else  
         {  
             document.getElementById("detailInfo").innerHTML="请稍候.."; 
         }          
    }  
      
 //异步响应函数
 function showStudentInfo(studentID)  
{ 
        var url="iframeCl?type=ajaxShowInfo&pageNow=0&studentID="+studentID+"&time=" + new Date().getTime();    //后台请求的路径  
        
        xmlHttpRequest=createXmlHttpRequest();  
        
        xmlHttpRequest.onreadystatechange=callback;   //将回调函数注册给状态改变事件  
        
        xmlHttpRequest.open("GET",url,true);  
        
        xmlHttpRequest.send(null);     
 } 
<div style="display: none;" id="detailInfo" class="helplay">
        <table width="273" border="0" style="z-index: 4" id="resultsBody">
   <tr>
     <td width="96" rowspan="5" style="padding:0px; margin:0px;"><img src="" width="101"  height="115"/></td>
     <td width="161">&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
</table>
            </div>
CSS        .helplay { 
z-index: 3; 
position: absolute; 
border: 1px solid #FFC30E; 
padding: 5px; 
background-color: #FFFBB8; 
text-align: left; 
color: #9C7600; 
width: 130px; 
font-size: 12px; 
font-family: arial, sans-serif; 
} 

Answer 6

我说同志，你应该明确措施是在什么地方啊。你的关于表格的代码没有问题的，。  <title></title>
  <style>
  .helplay { 
    z-index: 3; 
    position: absolute; 
    border: 1px solid #FFC30E; 
    padding: 5px; 
    background-color: #FFFBB8; 
    text-align: left; 
    color: #9C7600; 
    width: 130px; 
    font-size: 12px; 
    font-family: arial, sans-serif; 
    } 
  </style>
  <script type="text/javascript">
    function callback() {
      var stuName = "名称1"
      var num = "名称2"
      var photo = "xxxx"
      var className = "eeeee"
      var majorName = "33"
      var collegeName ="55"      //var table= document.getElementById("resultsTable");
      //table.rows[0].cells[0].innerHTML="<img src=\""+photo[0].firstChild.nodeValue+"\" width=\"101\"  height=\"115\"/>";
      //table.rows[0].cells[1].innerHTML="姓名:"+stuName[0].firstChild.nodeValue;
      //table.rows[1].cells[0].innerHTML="学号:"+num[0].firstChild.nodeValue;
      //table.rows[2].cells[0].innerHTML="班级:"+className[0].firstChild.nodeValue;
      //table.rows[3].cells[0].innerHTML="专业:"+majorName[0].firstChild.nodeValue;
      //table.rows[4].cells[0].innerHTML="学院:"+collegeName[0].firstChild.nodeValue;      document.getElementById("detailInfo").innerHTML = "姓名:" + stuName+ "<br>" +
             "学号:" + num + "<br>" +
             "班级:" + className + "<br>" +
             "专业:" + majorName + "<br>" +
             "学院:" + collegeName;      document.getElementById("detailInfo").style.display = "";    }
  </script></head>
<body>
  <div style="display: none;" id="detailInfo" class="helplay">
    <table width="273" border="0" style="z-index: 4" id="resultsBody">
      <tr>
        <td width="96" rowspan="5" style="padding: 0px; margin: 0px;">
          <img src="" width="101" height="115" />
        </td>
        <td width="161">
          &nbsp;
        </td>
      </tr>
      <tr>
        <td>
          &nbsp;
        </td>
      </tr>
      <tr>
        <td>
          &nbsp;
        </td>
      </tr>
      <tr>
        <td>
          &nbsp;
        </td>
      </tr>
      <tr>
        <td>
          &nbsp;
        </td>
      </tr>
    </table>
  </div>
  <input type="button" value="Get" onclick="callback()" />
</body>
</html>
你应该去看，xmlHttpRequest.responseXML 返回的内容是不是正确 ，stuName[0].firstChild.nodeValue 是否正确，你应该学会调试啊。由于不知道你的xml格式，所以只能自己去看了
alert(stuName[0])
alert(stuName[0].firstChild)
看分别都是什么

Answer 7

你最好安装个Firefox浏览器和firebug插件，可可以方便调试。

Answer 8

关键的问题是
 document.getElementById("detailInfo").innerHTML="姓名:"+stuName[0].firstChild.nodeValue+"<br>"+
             "学号:"+num[0].firstChild.nodeValue+"<br>"+
             "班级:"+className[0].firstChild.nodeValue+"<br>"+
             "专业:"+majorName[0].firstChild.nodeValue+"<br>"+
             "学院:"+collegeName[0].firstChild.nodeValue;这样是可以显示内容的
我之前也早alert过的  都取到值的

Answer 9

 <div style="display: none;" id="detailInfo" class="helplay">detailInfo是最外面的div
我想把取到的数据赋值在table里 

Answer 10

放table也没有关系 a
<style>
    .helplay
    {
      z-index: 3;
      position: absolute;
      border: 1px solid #FFC30E;
      padding: 5px;
      background-color: #FFFBB8;
      text-align: left;
      color: #9C7600;
      width: 130px;
      font-size: 12px;
      font-family: arial, sans-serif;
    }
  </style>  <script type="text/javascript">
    function callback() {
      var stuName = "名称1"
      var num = "名称2"
      var photo = "xxxx"
      var className = "eeeee"
      var majorName = "33"
      var collegeName = "55"      var table = document.getElementById("resultsBody");
      table.rows[0].cells[0].innerHTML = "<img src=\"" + photo + "\" width=\"101\"  height=\"115\"/>";
      table.rows[0].cells[1].innerHTML = "姓名:" + stuName;
      table.rows[1].cells[0].innerHTML = "学号:" + num;
      table.rows[2].cells[0].innerHTML = "班级:" + className;
      table.rows[3].cells[0].innerHTML = "专业:" + majorName;
      table.rows[4].cells[0].innerHTML = "学院:" + collegeName;
      document.getElementById("detailInfo").style.display = "";    }
  </script></head>
<body>
  <div style="display: none;" id="detailInfo" class="helplay">
    <table width="273" border="0" style="z-index: 4" id="resultsBody">
      <tr>
        <td width="96" rowspan="5" style="padding: 0px; margin: 0px;">
          <img src="" width="101" height="115" />
        </td>
        <td width="161">
          &nbsp;
        </td>
      </tr>
      <tr>
        <td>
          &nbsp;
        </td>
      </tr>
      <tr>
        <td>
          &nbsp;
        </td>
      </tr>
      <tr>
        <td>
          &nbsp;
        </td>
      </tr>
      <tr>
        <td>
          &nbsp;
        </td>
      </tr>
    </table>
  </div>
  <input type="button" value="Get" onclick="callback()" />
</body>
</html>

Answer 11

1，你必须显示出来才能看到啊document.getElementById("detailInfo").style.display = "";
2.你的的id =resultsBody
document.getElementById("resultsBody");
也应该是 resultsBody

Answer 12

再次提醒你，你必须先保证你的返回的xml正确，为了测试简单，你可以像上面那样用变量代替就知道错误是不是xml的问题了

Answer 13

  else  
         {  
          //   document.getElementById("detailInfo").innerHTML="请稍候.."; 
         }         
我把这段注释掉他就出来了 这是什么道理啊 
为何之前document.getElementById("detailInfo").innerHTML="姓名:"+stuName[0].firstChild.nodeValue+"<br>"+
  "学号:"+num[0].firstChild.nodeValue+"<br>"+
  "班级:"+className[0].firstChild.nodeValue+"<br>"+
  "专业:"+majorName[0].firstChild.nodeValue+"<br>"+
  "学院:"+collegeName[0].firstChild.nodeValue;
这样没注释却也可以显示

Answer 14

麻烦net lover了
z-index的问题
还想问一下  像新浪http://t.sina.com.cn/setting/medal
这种鼠标移上去在固定位置显示的是怎么弄的？
还有弹框的动画怎么实现？jquery？

Answer 15

document.getElementById("detailInfo").innerHTML="xxx"这句话你已经把表格清空啊了，都没有表格了。当然是不显示了

Answer 16

var tbody=document.getElementById("resultsBody");
var rows=tbody.children;
rows[0] .firstChild.appendChild(document.createTextNode(stuName[0]));
//其它的你就自己依葫芦画瓢吧！！！

Answer 17

推荐你一款控件jmesa，应该能满足lz的要求