求助！拖拽之后怎么获取新表格数据！

想问大家怎么获取新的表格数据，我用getelementbytagname提取不出来，请大家帮忙！
<!-- 欢迎转载,请保留作者及其出处,谢谢 -->
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>attributes-B</TITLE>
<STYLE>
td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
table{border:1px solid black;font-size:13px;}
</STYLE>
<script language="javascript">
/************************************ dragedTableData.js *******************************/
/************************************ dragedTableData.js *******************************/
/*
* created by LxcJie 2004.4.12
* 可以实现表格内容的内部拖动
* 确保中间过度层的存在，id为指定
*//*--------全局变量-----------*/
var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1;
var dragedTable_movable = false;
var dragedTable_preCell = null;
var dragedTable_normalColor = null;
//起始单元格的颜色
var dragedTable_preColor = "lavender";
//目标单元格的颜色
var dragedTable_endColor = "#FFCCFF";
var dragedTable_movedDiv = "dragedTable_movedDiv";
var dragedTable_tableId = "";
/*--------全局变量-----------*/function DragedTable(tableId)
{
dragedTable_tableId = tableId;
var oTempDiv = document.createElement("div");
oTempDiv.id = dragedTable_movedDiv;
oTempDiv.onselectstart = function(){return false};
oTempDiv.style.cursor = "hand"; 
oTempDiv.style.position = "absolute";
oTempDiv.style.border = "1px solid black";
oTempDiv.style.backgroundColor = dragedTable_endColor;
oTempDiv.style.display = "none";
document.body.appendChild(oTempDiv);
document.all(tableId).onmousedown = showDiv;
}//得到控件的绝对位置
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}//显示图层
function showDiv()
{
var obj = event.srcElement; 
var pos = new Array(); 
//获取过度图层
var oDiv = document.all(dragedTable_movedDiv);
if(obj.tagName.toLowerCase() == "td")
{
obj.style.cursor = "hand";
pos = getPos(obj);
//计算中间过度层位置，赋值
oDiv.style.width = obj.offsetWidth;
oDiv.style.height = obj.offsetHeight; 
oDiv.style.top = pos[0];
oDiv.style.left = pos[1];
oDiv.innerHTML = obj.innerHTML;
oDiv.style.display = "";
dragedTable_x0 = pos[1];
dragedTable_y0 = pos[0];
dragedTable_x1 = event.clientX;
dragedTable_y1 = event.clientY;
//记住原td
dragedTable_normalColor = obj.style.backgroundColor;
obj.style.backgroundColor = dragedTable_preColor;
dragedTable_preCell = obj;dragedTable_movable = true;
}
}
function dragDiv()
{
if(dragedTable_movable)
{
var oDiv = document.all(dragedTable_movedDiv);
var pos = new Array();
oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
var oTable = document.all(dragedTable_tableId); 
for(var i=0; i<oTable.cells.length; i++)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
pos = getPos(oTable.cells[i]);
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth 
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_endColor; 
}
else
{
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}
}
} 
}
}function hideDiv()
{
if(dragedTable_movable)
{
var oTable = document.all(dragedTable_tableId);
var pos = new Array(); 
if(dragedTable_preCell != null)
{
for(var i=0; i<oTable.cells.length; i++)
{ 
pos = getPos(oTable.cells[i]);
//计算鼠标位置，是否在某个单元格的范围之内
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth 
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
//交换文本
dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
//清除原单元格和目标单元格的样式
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.cursor = "";
dragedTable_preCell.style.cursor = "";
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
}
}
}
}
dragedTable_movable = false;
//清除提示图层
document.all(dragedTable_movedDiv).style.display = "none"; 
}
}document.onmouseup = function()
{ 
hideDiv();
var oTable = document.all(dragedTable_tableId);
for(var i=0; i<oTable.cells.length; i++)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}document.onmousemove = function()
{
dragDiv();
}/************************************ dragedTableData.js 结束 *******************************/
/************************************ dragedTableData.js 结束 *******************************/
</script>
<script language="javascript">
function init()
{
//注册可拖拽表格
new DragedTable("tableId");
}</script>
</HEAD>
<BODY oncontextmenu="return false;" onLoad="init()">
<TABLE id="tableId" width="200" border="1">
<tr>
    <td>&nbsp;</td>
    <td>PARISH_CODE</td>
    <td>DATED</td>
    <td>FORENAME</td>
    <td>SEX</td>
    <td>FATHER_FORENAME</td>
    <td>MOTHER_FORENAME</td>
    <td>SURNAME</td>
    <td>OCCUPATION</td>
    <td>RESIDENCE</td>
    <td>DATE_OF_BIRTH</td>
    <td>ALTERNATE_SNAME</td>
  </tr>
  <tr>
    <td>1st attribute </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>2nd attribute </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3rd attribute </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table><script language="javascript">
function getAttributes()
{
//记录attributes
var attribute1 = document.getElementById("tableId")getElementByTagName("td");
var attribute2 = document.getElementByTagName("td")[2];
var attribute3 = document.getElementByTagName("td")[3];alert(attribute1); 
}
</script><p><input type="submit" onClick="getAttributes()" value="submit" />
</p>
<label></label>
</BODY>
</HTML>

解决方案 »

  1.   

    不知道你要取那些数据？function getAttributes()
    {
    //记录attributes
    var attribute1 = document.getElementById("tableId").getElementsByTagName("td");
    var attribute2 = document.getElementsByTagName("td")[2].innerHTML;
    //getElementsByTagName("td") 你的少了一个s
    var attribute3 = document.getElementsByTagName("td")[3].innerHTML;alert(attribute2); 
    }//getElementsByTagName("td") 你的少了一个s
      

  2.   

    谢谢楼上两位！
    其实我是想记录下拖拽完的表格数据，然后把它们传给php。
    我用alert（attribute1）实验一下，希望能够得到这些数据，不过没有用。或者有什么别的办法能够取得拖拽完的表格里的第二行，第三行，第四行的数据？
    大家可以看一下我的代码，我实际上就是想一个第一行列出很多attribute的表格，然后我进行拖拽，拖拽到第二行第三行第四行，也就是1st,2nd,3rd attribute（每一行只允许拖拽一个attribute）。然后得到这三个attribute，把这三个attribute传给php再进行数据库查询。请大家帮忙！谢谢！
      

  3.   

    看一下是不是你想要的效果？<!-- 欢迎转载,请保留作者及其出处,谢谢 -->
    <HTML>
    <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE>attributes-B</TITLE>
    <STYLE>
    td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
    div{font-size:13px;}
    th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
    table{border:1px solid black;font-size:13px;}
    </STYLE>
    <script language="javascript">
    /************************************ dragedTableData.js *******************************/
    /************************************ dragedTableData.js *******************************/
    /*
    * created by LxcJie 2004.4.12
    * 可以实现表格内容的内部拖动
    * 确保中间过度层的存在，id为指定
    *//*--------全局变量-----------*/
    var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1;
    var dragedTable_movable = false;
    var dragedTable_preCell = null;
    var dragedTable_normalColor = null;
    //起始单元格的颜色
    var dragedTable_preColor = "lavender";
    //目标单元格的颜色
    var dragedTable_endColor = "#FFCCFF";
    var dragedTable_movedDiv = "dragedTable_movedDiv";
    var dragedTable_tableId = "";
    /*--------全局变量-----------*/function DragedTable(tableId)
    {
    dragedTable_tableId = tableId;
    var oTempDiv = document.createElement("div");
    oTempDiv.id = dragedTable_movedDiv;
    oTempDiv.onselectstart = function(){return false};
    oTempDiv.style.cursor = "hand"; 
    oTempDiv.style.position = "absolute";
    oTempDiv.style.border = "1px solid black";
    oTempDiv.style.backgroundColor = dragedTable_endColor;
    oTempDiv.style.display = "none";
    document.body.appendChild(oTempDiv);
    document.all(tableId).onmousedown = showDiv;
    }//得到控件的绝对位置
    function getPos(cell)
    {
    var pos = new Array();
    var t=cell.offsetTop;
    var l=cell.offsetLeft;
    while(cell=cell.offsetParent)
    {
    t+=cell.offsetTop;
    l+=cell.offsetLeft;
    }
    pos[0] = t;
    pos[1] = l;
    return pos;
    }//显示图层
    function showDiv()
    {
    var obj = event.srcElement; 
    var pos = new Array(); 
    //获取过度图层
    var oDiv = document.all(dragedTable_movedDiv);
    if(obj.tagName.toLowerCase() == "td")
    {
    obj.style.cursor = "hand";
    pos = getPos(obj);
    //计算中间过度层位置，赋值
    oDiv.style.width = obj.offsetWidth;
    oDiv.style.height = obj.offsetHeight; 
    oDiv.style.top = pos[0];
    oDiv.style.left = pos[1];
    oDiv.innerHTML = obj.innerHTML;
    oDiv.style.display = "";
    dragedTable_x0 = pos[1];
    dragedTable_y0 = pos[0];
    dragedTable_x1 = event.clientX;
    dragedTable_y1 = event.clientY;
    //记住原td
    dragedTable_normalColor = obj.style.backgroundColor;
    obj.style.backgroundColor = dragedTable_preColor;
    dragedTable_preCell = obj;dragedTable_movable = true;
    }
    }
    function dragDiv()
    {
    if(dragedTable_movable)
    {
    var oDiv = document.all(dragedTable_movedDiv);
    var pos = new Array();
    oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
    oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
    var oTable = document.all(dragedTable_tableId); 
    for(var i=0; i<oTable.cells.length; i++)
    {
    if(oTable.cells[i].tagName.toLowerCase() == "td")
    {
    pos = getPos(oTable.cells[i]);
    if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth 
    && event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
    {
    if(oTable.cells[i] != dragedTable_preCell)
    oTable.cells[i].style.backgroundColor = dragedTable_endColor; 
    }
    else
    {
    if(oTable.cells[i] != dragedTable_preCell)
    oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
    }
    }
    } 
    }
    }function hideDiv()
    {
    if(dragedTable_movable)
    {
    var oTable = document.all(dragedTable_tableId);
    var pos = new Array(); 
    if(dragedTable_preCell != null)
    {
    for(var i=0; i<oTable.cells.length; i++)
    { 
    pos = getPos(oTable.cells[i]);
    //计算鼠标位置，是否在某个单元格的范围之内
    if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth 
    && event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
    {
    if(oTable.cells[i].tagName.toLowerCase() == "td")
    {
    //交换文本
    dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
    oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
    //清除原单元格和目标单元格的样式
    dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
    oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
    oTable.cells[i].style.cursor = "";
    dragedTable_preCell.style.cursor = "";
    dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
    }
    }
    }
    }
    dragedTable_movable = false;
    //清除提示图层
    document.all(dragedTable_movedDiv).style.display = "none"; 
    }
    }document.onmouseup = function()
    { 
    hideDiv();
    var oTable = document.all(dragedTable_tableId);
    for(var i=0; i<oTable.cells.length; i++)
    oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
    }document.onmousemove = function()
    {
    dragDiv();
    }/************************************ dragedTableData.js 结束 *******************************/
    /************************************ dragedTableData.js 结束 *******************************/
    </script>
    <script language="javascript">
    function init()
    {
    //注册可拖拽表格
    new DragedTable("tableId");
    }</script>
    </HEAD>
    <BODY oncontextmenu="return false;" onLoad="init()">
    <TABLE id="tableId" width="200" border="1">
    <tr>
        <td>&nbsp;</td>
        <td>PARISH_CODE</td>
        <td>DATED</td>
        <td>FORENAME</td>
        <td>SEX</td>
        <td>FATHER_FORENAME</td>
        <td>MOTHER_FORENAME</td>
        <td>SURNAME</td>
        <td>OCCUPATION</td>
        <td>RESIDENCE</td>
        <td>DATE_OF_BIRTH</td>
        <td>ALTERNATE_SNAME</td>
      </tr>
      <tr>
        <td>1st attribute </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>2nd attribute </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>3rd attribute </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <script language="javascript">
     String.prototype.trim=function(){
    　　    return this.replace(/(^\s*)|(\s*$)/g, "");
    }
    function getAttributes()
    {
    //记录attributes
    //var attribute1 = document.getElementById("tableId").getElementsByTagName("td");
    //var attribute2 = document.getElementsByTagName("td")[2].innerHTML;
    //var attribute3 = document.getElementsByTagName("td")[3].innerHTML;var trs=document.getElementById("tableId").getElementsByTagName("tr");
    var attributes=[];
    for(var i=0;i<trs.length;i++)
    {
    var tds=trs[i].getElementsByTagName("td");
    for(var j=1;j<tds.length;j++)
    {
    if(tds[j].innerHTML.trim()!="&nbsp;")
    {
    attributes[i]=tds[j].innerHTML;
    }
    }
    }alert(attributes[1]); 
    alert(attributes[2]);
    alert(attributes[3]);
    }
    </script><p><input type="submit" onClick="getAttributes()" value="submit" />
    </p>
    <label></label>
    </BODY>
    </HTML>
      

  4.   

    取得了，谢谢！
    不过我有新的疑问，麻烦帮忙解答，感激不尽！
    我是想把新的table里的值取出以后送给php文件，让php按照相应的变量读取数据库。
    于是有如下问题，
    1.我在这个html文件里加了
    <input type="submit" onClick="return getAttributes();" value="submit" action="count.php"/>
    目的是想把值传给count.php文件，但是貌似count.php文件里用$_POST['attributes[1]']并不能得到想要的值。请问为什么？是html传值出错还是php接受值出问题？麻烦给我例子，谢谢！
    若上述方法不对，该怎么把用javscript取得的值传给php？2. 关于php文件的查询问题，我也有点困难。
    我的目的是html文件里取得的值是字段名，取得的是什么字段，我就连接数据库查询这个字段。
    比如：$a1='parish_code';
    $a2='dated';
    $string =oci_parse($connect, "select '$a1',count('$a2') from cprdb.baptism group by '$a1' order by '$a1'");
    这样只能得到的结果一行结果；
    而原始的$string =oci_parse($connect, 'select parish_code,count(dated) from cprdb.baptism group by parish_code order by parish_code');
    就可以得到我想要的结果，就是查询每一个parish_code的dated个数。
    而我不知道这两个的区别在哪里，因为我需要根据不同变量做不同的sql语句，所以字段名必须是可变的。
    请问怎样修改才能得到我想要的结果？