तालिका पंक्ति और स्तंभ संख्या jQuery में

Question

मैं jQuery का उपयोग करके क्लिक की गई सेल की पंक्ति और स्तंभ संख्या कैसे प्राप्त करूं, अर्थात

$("td").onClick(function(event){
   var row = ...
   var col = ...
});

Answer 1

आप दिए गए संदर्भ में कोर / इंडेक्स फ़ंक्शन का उपयोग कर सकते हैं , उदाहरण के लिए आप कॉलम नंबर प्राप्त करने के लिए इसमें मूल टीआर के टीडी के सूचकांक की जांच कर सकते हैं, और आप पंक्ति संख्या प्राप्त करने के लिए टेबल पर टीआर इंडेक्स की जांच कर सकते हैं:

$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  alert('Row: ' + row + ', Column: ' + col);
});

यहां चल रहे उदाहरण की जाँच करें ।

Comments

यह स्तंभ स्पैन @ ग्रोम पर विफल क्यों होता है?

— अर्लीपोस्टर

@Forkrul Assail, @CMS इसके साथ विफल है ROWSPAN's jsbin.com/eyeyu/1099/edit#preview पाठ के साथ सेल पर क्लिक करें "12" । कॉलम इंडेक्स 4

— एंड्रयू डी।

मेरे पास चर "डेटा" में कुछ आंकड़े हैं ..... क्या इस "डेटा" को इस कॉल और पंक्ति मान के साथ तालिका में जोड़ना संभव है

— शैनिश

ROWSPAN और COLSPAN

— eddyparkinson

var row = $(this).closest('tr').index()

— SpYk3HH

Answer 2

$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});

Answer 3

क्लिक पर COLUMN INDEX प्राप्त करें:

$(this).closest("td").index();

क्लिक पर ROW INDEX प्राप्त करें:

$(this).closest("tr").index();

Answer 4

मेरे सिर के ऊपर से, एक तरीका यह होगा कि सभी पिछले तत्वों को पकड़ा जाए और उन्हें गिना जाए।

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});

Answer 5

क्या आप उस डेटा को आउटपुट कर सकते हैं जैसे आप टेबल बना रहे हैं?

तो आपकी तालिका इस तरह दिखाई देगी:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td data-row='1' data-column='1'>value</td>
      <td data-row='1' data-column='2'>value</td>
      <td data-row='1' data-column='3'>value</td></tr>

  <tbody>
</table>

तब यह एक साधारण बात होगी

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}

Comments

उन विशेषताओं का अनुपालन किस html युक्ति से किया जाता है? मैं उन्हें खोजने के लिए प्रतीत नहीं कर सकते।

— सामन्था ब्रांथम

HTML युक्ति 5, जो उपसर्ग 'डेटा-' से शुरू होने वाली कस्टम विशेषताओं के लिए अनुमति देता है।

— क्रिस ब्रांड्समा

भले ही वे अनुमान में नहीं हैं कि यह पुराने ब्राउज़रों को नहीं तोड़ेंगे <HTML5

— डैनियल पॉवेल

आप केवल कॉल करके "डेटा" फ़ील्ड एक्सेस कर सकते हैं: $ (यह) .डेटा ('पंक्ति');

— व्हाइटअंगेल

Answer 6

पूरी तालिका में एक क्लिक हैंडलर को बांधना बेहतर है और फिर क्लिक किए गए टीडी को प्राप्त करने के लिए event.target का उपयोग करें। Thats सभी मैं इसके 1:20 am के रूप में जोड़ सकते हैं

Comments

हालांकि यह समस्या को हल करने के लिए एक मूल्यवान संकेत हो सकता है, एक अच्छा जवाब भी समाधान को दर्शाता है। कृपया संपादित तुम क्या मतलब है दिखाने के लिए उदाहरण कोड प्रदान करने के लिए। वैकल्पिक रूप से, इसे टिप्पणी के बजाय लिखने पर विचार करें।

— टोबी स्पाइट

धन्यवाद, मैं एक और 10 वर्षों में इस उत्तर को संशोधित करने पर विचार

— करूंगा