I have a table that looks something like this:
<table><tbody>
<tr><td>a</td><td>1</td></tr>
<tr><td>b</td><td>2</td></tr>
<tr><td>c</td><td>3</td></tr>
<tr><td>d</td><td>4</td></tr>
<tr><td>e</td><td>5</td></tr>
<tr><td>f</td><td>6</td></tr>
<tr><td>g</td><td>7</td></tr>
</tbody></table>
I need it to get to something like this:
<table><tbody>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
<td>e</td><td>f</td><td>g</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
<td>5</td><td>6</td><td>7</td>
</tr>
</tbody></table>
example
I'm thinking something like this should work, but I'm kinda lost, how would I go about this: Here's what I started
I'm open to Javascript, jQuery or even CSS for this.
I have a table that looks something like this:
<table><tbody>
<tr><td>a</td><td>1</td></tr>
<tr><td>b</td><td>2</td></tr>
<tr><td>c</td><td>3</td></tr>
<tr><td>d</td><td>4</td></tr>
<tr><td>e</td><td>5</td></tr>
<tr><td>f</td><td>6</td></tr>
<tr><td>g</td><td>7</td></tr>
</tbody></table>
I need it to get to something like this:
<table><tbody>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
<td>e</td><td>f</td><td>g</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
<td>5</td><td>6</td><td>7</td>
</tr>
</tbody></table>
example
I'm thinking something like this should work, but I'm kinda lost, how would I go about this: Here's what I started
I'm open to Javascript, jQuery or even CSS for this.
Share Improve this question edited Dec 6, 2017 at 20:43 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jun 29, 2011 at 3:33 qwertymkqwertymk 35.4k30 gold badges124 silver badges184 bronze badges 4- you want to manipulate the existing table? – rrapuya Commented Jun 29, 2011 at 3:39
- What exactly is this for? Will it always be 2 columns to two rows or do you need it to be more dynamic than that? – beatgammit Commented Jun 29, 2011 at 3:41
- @tjameson: always two, it's basically a legend that needs to be shown vertically – qwertymk Commented Jun 29, 2011 at 3:49
- This may also give you an idea of what you can do stackoverflow./questions/2754752/…, you can pletely recreate the table. create a new table maybe and then override html replacing the old table. So you would create a string that is the new table and then set the html to that string. – Matt Commented Jun 29, 2011 at 3:55
3 Answers
Reset to default 2This will swap the rows and columns of any size tbody, as long as rows all have the same number of cells.
<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title> Small Test Page</title>
</head>
<body>
<script>
function tableSwap(){
var t= document.getElementsByTagName('tbody')[0],
r= t.getElementsByTagName('tr'),
cols= r.length, rows= r[0].getElementsByTagName('td').length,
cell, next, tem, i= 0, tbod= document.createElement('tbody');
while(i<rows){
cell= 0;
tem= document.createElement('tr');
while(cell<cols){
next= r[cell++].getElementsByTagName('td')[0];
tem.appendChild(next);
}
tbod.appendChild(tem);
++i;
}
t.parentNode.replaceChild(tbod, t);
}
</script>
<h1> Small Test Page</h1>
<p> <button type= "button" id= "tableSwapBtn" onclick= "tableSwap()">
Swap rows and columns</button> </p>
<table style="width:300px;border:1px" rules="all">
<tbody>
<tr> <td> a</td> <td> 1</td> </tr>
<tr> <td> b</td> <td> 2</td> </tr>
<tr> <td> c</td> <td> 3</td> </tr>
<tr> <td> d</td> <td> 4</td> </tr>
<tr> <td> e</td> <td> 5</td> </tr>
<tr> <td> f</td> <td> 6</td> </tr>
<tr> <td> g</td> <td> 7</td> </tr>
</tbody>
</table>
</body>
</html>
Here is my solution: http://jsfiddle/mtrwk/19/
$('table').each(function() {
$(this).after("<table><tbody></tbody></table>");
var newTable = $(this).next("table").children("tbody");
$(this).children("tbody").children("tr").each(function(rIndex, rItem){
$(this).children("td").each(function(dIndex, dItem){
if(newTable.children("tr:eq("+dIndex+")").html() == null){
newTable.append("<tr></tr>");
}
newTable.children("tr:eq("+dIndex+")").append($(this)[0].outerHTML);
});
});
});
I have a jquery class that acplish this task. This class supports rowspan and colspan in the table as well.
Usage is really simple:
$('#newtable').tableflip($('#sourcetable'));
Here is the code of the class and sample usage: https://jsfiddle/adyhu78/9b1q4ys0/
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744894114a4599590.html
评论列表（0条）