दिलचस्प पोस्ट
स्पिनर आईआईटीम सेलेक्टेड () अयोग्य तरीके से निष्पादित करता है कैसे jquery chaining काम करता है? स्टार्टअप पर लॉन्च करने के लिए मैं एक प्रोग्राम कैसे सेट करूं? आर में हर एन अंक संक्षेप करें क्या पर्ल के WWW :: मैकेनाइजेट के एक PHP समकक्ष है? Haskell का उपयोग करके सूची में समान आइटम कैसे समूहित करें? मैं PHP में त्रुटि 404 कैसे बना सकता हूं? <Head> में गतिशील रूप से एक लिंक स्टाइलशीट जोड़ें वर्चुअल डिस्ट्रक्टर्स का उपयोग कब करना है? एक सूची में लगातार डुप्लिकेट की पहचान करने के लिए सबसे पायथनिक तरीका क्या है? क्लास विधि के MethodInfo को कार्यान्वित करते हुए, इंटरफ़ेस पद्धति के MethodInfo कैसे प्राप्त करें? एंड्रॉइड ग्रैडल में बहु स्वाद लाइब्रेरी पर आधारित बहु स्वाद ऐप मैक ओएस पर IntelliJ IDEA JDK कॉन्फ़िगरेशन कैसे asp.net MVC 5 और वेब एपीआई 2 में oauth2 सर्वर को लागू करने के लिए एप्लिकेशन को अनइंस्टॉल करने से पहले पासवर्ड मांगें

एचटीएमएल तालिका की पंक्तियों और स्तंभों को कैसे उलटा (स्थानांतरित) करना है?

मैं एक HTML तालिका में पंक्तियों और स्तंभों को स्थानांतरित करना चाहता हूं, जैसे स्तंभ पंक्तियों के रूप में स्तंभ, पंक्तियों के रूप में स्तंभ

मैं इसे कैसे कर सकता हूं?

उदाहरण :

1 4 7 2 5 8 3 6 9 

जैसा

 1 2 3 4 5 6 7 8 9 

Solutions Collecting From Web of "एचटीएमएल तालिका की पंक्तियों और स्तंभों को कैसे उलटा (स्थानांतरित) करना है?"

http://jsfiddle.net/CsgK9/2/

एचटीएमएल:

 <table> <tr> <td>1</td> <td>4</td> <td>7</td> </tr> <tr> <td>2</td> <td>5</td> <td>8</td> </tr> <tr> <td>3</td> <td>6</td> <td>9</td> </tr> </table> <p><a href="#">Do it.</a></p> 

js:

 $("a").click(function(){ $("table").each(function() { var $this = $(this); var newrows = []; $this.find("tr").each(function(){ var i = 0; $(this).find("td").each(function(){ i++; if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); } newrows[i].append($(this)); }); }); $this.find("tr").remove(); $.each(newrows, function(){ $this.append(this); }); }); return false; }); 

यह मनमाने HTML के लिए काम करना चाहिए:

 function swap( cells, x, y ){ if( x != y ){ var $cell1 = cells[y][x]; var $cell2 = cells[x][y]; $cell1.replaceWith( $cell2.clone() ); $cell2.replaceWith( $cell1.clone() ); } } var cells = []; $('table').find('tr').each(function(){ var row = []; $(this).find('td').each(function(){ row.push( $(this) ); }); cells.push( row ); }); for( var y = 0; y <= cells.length/2; y++ ){ for( var x = 0; x < cells[y].length; x++ ){ swap( cells, x, y ); } } 

कार्य बेला:

http://jsfiddle.net/Hskke/1/

डेविड बुशेल (फ्लेक्सबॉक्स का उपयोग करके) यह एक सीएसएस समाधान है: http://dbushell.com/2016/03/04/css-only-responsive-tables/

और यह सीएसएस समाधान भी है (फ्लोट का प्रयोग करके)

 tr { display: block; float: left; } th, td { display: block; } 

http://jsfiddle.net/XKnKL/3/

(वे दोनों इस उत्तर में उल्लिखित हैं: ऊर्ध्वाधर पंक्तियों के साथ HTML तालिका )

आप इसे किस भाषा में करना चाहते हैं? जैसा कि आपने jQuery को कहा, मैं जावास्क्रिप्ट ग्रहण करता हूं। (jQuery एक भाषा नहीं है, यह एक भाषा के लिए लाइब्रेरी है)

आपको डेटा संरचना के रूप में तालिका का प्रतिनिधित्व करने का एक तरीका खोजने की आवश्यकता है। यह सादगी के लिए ओओपी के माध्यम से किया जाना चाहिए। मैं आपको कॉलम और पंक्तियों की संख्या प्राप्त करने और 1 एकल, सपाट सरणी में डेटा डाल करने की सलाह देता हूं।

आपको कुछ भी डिजाइन करना होगा जो एचटीएमएल के माध्यम से पार्स करता है और तालिका प्राप्त करता है, इसे आपके संरचना में परिवर्तित कर देता है, जिससे कि कम्प्यूटेशन आसानी से किए जा सकते हैं। यह jQuery के विधि के माध्यम से किया जा सकता है।

फिर आपको एक प्रकार की फ़ंक्शन खोजने की आवश्यकता है जो फ्लैट सरणी को बदलती है।

अंत में, आपको सरणी को उपयुक्त स्तंभों और पंक्तियों में तोड़ने और HTML को पुनः प्रस्तुत करने की आवश्यकता है

देख! इतना मुश्किल नहीं है डिजाइनिंग आपके लिए काफी अधिक है, आपको इसकी आवश्यकता है इसे लागू करना। (शायद मुझे आपके लिए इतना काम नहीं करना चाहिए ..)

मुझे इसी तरह की समस्या है, लेकिन मैं तालिका को स्थानांतरित करना चाहता हूं

 $("table.cennik").each(function() { var $this = $(this); var newrows = []; $('#summaryProductName, #pcalPricelistName').remove(); $(this).find('th').removeAttr('rowspan').removeAttr('colspan'); $this.find('th').eq(1).attr('rowspan','2'); $this.find("tr").each(function(){ var i = 0; $(this).find("td,th").each(function(){ i++; if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); } newrows[i].append($(this)); }); }); $this.find("tr").remove(); $.each(newrows, function(){ $this.append(this); }); }); 
 td { border: 1px solid #929292;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <table id="1_1" class="cennik ui-table" style="float:left; margin-right: 20px;" cellspacing="0"> <tbody> <tr> <th rowspan="2">Quantity </th> <th colspan="2">Price</th> </tr> <tr> <td id="spCalPricelistName"> First price </td> <td id="spCalPricelistName"> Second price </td> </tr> <tr> <td>1 - 2</td> <td>15 zł</td> <td>20 zł</td> </tr> <tr> <td>3 - 9</td> <td>12 zł</td> <td>17,50 zł</td> </tr> <tr> <td>10+</td> <td>10 zł</td> <td>15 zł</td> </tr> </tbody> </table>