现在有这样的需求:
该表格只有一列,行是动态变化的.
这个变化有两个意思,其实就是互逆. 例如:你现在生成一个3行的该表格.当向上或者向下拖动<tr> 的时候,达到一定高度(长宽)就会变成2行.行数如果想增加 是通过外面的数据变化变化决定的.
该表格只有一列,行是动态变化的.
这个变化有两个意思,其实就是互逆. 例如:你现在生成一个3行的该表格.当向上或者向下拖动<tr> 的时候,达到一定高度(长宽)就会变成2行.行数如果想增加 是通过外面的数据变化变化决定的.
我就纳闷了, 写的清清楚楚 通过拖拽 <tr> 将行变大.不知道<tr>就不要说了.
这个表格的面积是一定的 拖拽表格的行高 行宽是固定的
举个例: 有个3行的表格, 当你拖拽行<tr>的时候 行高 到达一定值的时候 就会可能变为两行了.
简单点说就是 3行表格通过拖拽任意一行的<tr> 变成 2行了
增加我们是通过外面配置增加的.这个就不用考虑了.只要减少行数的
<head>
<script type="text/javascript" >
function fun1(){
row.innerHTML = '<tr><td>可以看见把<td><td>是可以做到的</td><tr><tr><td>不过不能<td><td>达到他的要求</td><tr>'
}
function fun2(){
row.innerHTML = ''
}
</script>
</head>
<body>
<spen onclick='fun1()'>点这表格出现</spen>
<table id = 'row' border = '1'></table>
<spen onclick='fun2()>点这表格消失</spen>
</body>
</html>
<HEAD>
<TITLE>拖动</TITLE>
<script language="javascript">
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"){
oTable.cells[i].innerHTML+=dragedTable_preCell.innerHTML;
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.cursor = "";
oTable.deleteRow(dragedTable_preCell.parentElement.rowIndex);
}
}
}
}
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();
}
</script>
<script language="javascript">
function init(){
//注册可拖拽表格
new DragedTable("tableId");
}
</script>
</HEAD>
<BODY onload="init()">
<TABLE id="tableId" border="1" width="50" style="table-layout: fixed" style="word-break:break-all">
<TR>
<TD>aaaaa</TD>
</TR>
<TR>
<TD>bbbbb</TD>
</TR>
<TR>
<TD>ccccc</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<head>
<script type="text/javascript" >var str1 = "<tr id='list'><td>可以看见把<td><td>是可以做到的</td><tr>";
var str2 = "<tr><td>可以看见把<td><td>是可以做到的</td><tr>";
var str3="<td>固定的</td>"function fun1(){
row.innerHTML = str1;
str1 =str1+str2;
}function fun2(){
list.innerHTML=str3;
str3 += str3;
}</script>
</head>
<body> <spen onclick='fun1()'>行数增加</spen>
<table id = 'row' border = '1'></table>
<spen onclick='fun2()'>列数增加</spen>
</body>
</html>上面写的 <spen onclick='fun2()>点这表格消失</spen> 少了个 '
我写的只能在firefox浏览器 上才看见 ie的我不会写 我写的有很多bug希望有人能
够完成楼主想要的效果