我正在寻找可以帮助我操作 HTML 网格的脚本或 JavaScript 框架插件。在某些事件调用中，列和行应该互换。
问问题
193 次
3 回答
0
像这样的东西？
var arr = [];
//Convert to multi array.
$("tr").each(function() {
var r = arr.push([]);
$(this).children("td").each(function() {
arr[r - 1].push($(this).text())
})
});
//Flip array.
var table = "<table>";
for(r=0;r<arr.length;r++) {
table += "<tr>";
for(c=0;c<arr[r].length;c++) {
table += "<td>" + arr[r][c] + "</td>"; //Flipped indexes.
}
table += "</tr>";
}
table += "</table>";
于 2012-07-17T10:44:17.807 回答
0
这是一个简单的函数，假设恰好有 n*m 个单元格（没有 colspans/rowspans，没有变化的行宽）：
function translate(tableel) {
var rows = tableel.rows,
m = rows.length,
n = rows[0].cells.length;
for (var i=0; i<n; i++) {
var r = tableel.insertRow(-1);
for (var j=0; j<m; j++)
r.appendChild(rows[j].cells[0]);
}
for (var i=0; i<m; i++)
tableel.deleteRow(0);
}
使用 jQuery 会复杂得多:-)
于 2012-07-17T10:59:14.103 回答
0
<script src="./mootools-core-1.4.5-full-compat.js" ></script>
<script src="./mootools-more-1.4.0.1.js" ></script>
<style>
#container{
background-color: #330;
min-height: 100px;
min-width: 100px;
position:relative;
top:10px;
left:15px;
}
#container .elerc {
border: 1px solid black;
overflow: hidden;
}
.inncell {
display: inline-block;
height: auto;
width: auto;
}
</style>
<script>
window.addEvent('domready',function(){
var r= $$('.c1').length;
var c=$$('.r1').length;
var mx_last_w = 0, mx_last_h = 0;
for(var i=1; i<=r; i++){
var mx_h = 0;
$$('.r'+i+' .inncell').each(function(el){
var cur_h = el.getComputedSize();
if(cur_h.totalHeight > mx_h){
mx_h = cur_h.totalHeight;
}
});
console.log(mx_h);
$$('.r'+i).each(function(el){
//el.set('tween', {transition: Fx.Transitions.Elastic.easeOut});
//el.tween('height', mx_h);
//el.tween('top', mx_last_h);
el.setStyle('height', mx_h);
el.setStyle('top', mx_last_h);
el.setStyle('position', 'absolute');
});
mx_last_h += mx_h;
}
for(var j=1; j<=c; j++){
var mx_w = 0;
$$('.c'+j+' .inncell').each(function(el){
var cur_w = el.getComputedSize();
if(cur_w.totalWidth > mx_w){
mx_w = cur_w.totalWidth;
}
});
console.log(mx_w);
$$('.c'+j).each(function(el){
el.set('tween', {transition: Fx.Transitions.Elastic.easeOut});
//el.tween('width', mx_w);
el.tween('left', mx_last_w);
el.setStyle('width', mx_w);
//el.setStyle('left', mx_last_w);
el.setStyle('position', 'absolute');
});
mx_last_w += mx_w;
}
document.id('container').addEvent('click',function(){
$$('elerc').each(function(el){
el.setStyle('height','auto');
el.setStyle('width','auto');
el.setStyle('display','inline-block');
});
var r= $$('.c1').length;
var c=$$('.r1').length;
var mx_last_w = 0, mx_last_h = 0;
for(var i = 1; i<=r; i++){
$$('.r'+i).each(function(el){
el.addClass('tr'+i);
el.removeClass('r'+i);
});
}
for(var j=1; j<=c; j++){
$$('.c'+j).each(function(el){
el.addClass('r'+j);
el.removeClass('c'+j);
});
}
for(var k = 1; k<=r; k++){
$$('.tr'+k).each(function(el){
el.addClass('c'+k);
el.removeClass('tr'+k);
});
}
for(var i=1; i<=c; i++){
var mx_h = 0;
$$('.r'+i+' .inncell').each(function(el){
var cur_h = el.getComputedSize();
if(cur_h.totalHeight > mx_h){
mx_h = cur_h.totalHeight;
}
});
console.log(mx_h);
$$('.r'+i).each(function(el){
//el.set('tween', {transition: Fx.Transitions.Elastic.easeOut});
//el.tween('height', mx_h);
//el.tween('top', mx_last_h);
el.setStyle('height', mx_h);
el.setStyle('top', mx_last_h);
el.setStyle('position', 'absolute');
});
mx_last_h += mx_h;
}
for(var j=1; j<=r; j++){
var mx_w = 0;
$$('.c'+j+' .inncell').each(function(el){
var cur_w = el.getComputedSize();
if(cur_w.totalWidth > mx_w){
mx_w = cur_w.totalWidth;
}
});
console.log(mx_w);
$$('.c'+j).each(function(el){
el.set('tween', {transition: Fx.Transitions.Elastic.easeOut});
//el.tween('width', mx_w);
el.tween('left', mx_last_w);
el.setStyle('width', mx_w);
//el.setStyle('left', mx_last_w);
el.setStyle('position', 'absolute');
});
mx_last_w += mx_w;
}
});
});
</script>
<div id="container">
<div class="elerc r1 c1"><div class="inncell">name1</div></div> <div class="elerc r1 c2"><div class="inncell"><div style="">12<br/>34</div></div></div> <div class="elerc r1 c3"><div class="inncell"><img src="img02-hover.jpg" style="height: 100px;width: 100px;"/></div></div>
<div class="elerc r2 c1"><div class="inncell">name2</div></div> <div class="elerc r2 c2"><div class="inncell">22</div></div> <div class="elerc r2 c3"><div class="inncell"><img src="img01-hover.jpg" style="height: 50px;width: 70px;" /></div></div>
</div>
于 2012-07-21T12:17:12.737 回答