आप jQuery का उपयोग कर तालिका में पंक्तियों को कैसे जोड़ते हैं?

हाय मैं jQuery का उपयोग कर एक तालिका में एक पंक्ति जोड़ने की कोशिश कर रहा था, लेकिन यह काम नहीं कर रहा है।
कारण क्या हो सकता है?आप jQuery का उपयोग कर तालिका में पंक्तियों को कैसे जोड़ते हैं?

और, क्या मैं नई अतिरिक्त पंक्ति में कुछ मूल्य डाल सकता हूं ..?

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $('a').click(function() { 
      $('#myTable').childs('tr').append('<tr class="child"><td>blahblah<\/td></tr>'); 
     }); 
    </script> 
    <title></title> 
</head> 
<body> 
    <a href="">Link</a> 
    <table id="myTable"> 
     <tbody> 
      <tr> 
       <td> 
        test 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

स्रोत

2010-01-29 Amit

निम्नलिखित कोड काम करता है

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
function AddRow() 
{ 
    $('#myTable').append('<tr><td>test 2</td></tr>') 
} 
</script> 
<title></title> 
</head> 
<body> 
<input type="button" id="btnAdd" onclick="AddRow()"/> 
<a href="">test</a> 
<table id="myTable"> 
    <tbody > 
    <tr> 
     <td> 
     test 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

नोट this will work as of jQuery 1.4 भले ही मेज एक <tbody> तत्व शामिल हैं: (?)

jQuery के बाद से संस्करण 1.4 स्वचालित रूप से पता लगाता है तत्व आप सम्मिलित करने का प्रयास कर रहे हैं (संलग्न के किसी भी() का उपयोग कर, आगे जोड़ते() से पहले,(), या बाद() विधियों के बाद) <tr> है और इसे आपकी तालिका में पहले <tbody> में डाला गया है या यदि कोई अस्तित्व में नहीं है तो उसे <tbody> में लपेटें।

स्रोत

2010-01-29 10:17:14 Amit

और निम्नलिखित का भी उपयोग किया जा सकता है var value1 = 1; $ ('# myTable')। संलग्न करें ('' + value1 + '') – Amit

आप तालिका और नहीं पंक्तियों को संलग्न करना चाहिए:

यहाँ कोड है।

<script type="text/javascript"> 
$('a').click(function() { 
    $('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>'); 
}); 
</script>

स्रोत

2010-01-29 09:16:54 rsilva4

मैं अगर उपरोक्त कोशिश की, लेकिन काम नहीं किया .. :( – Amit

ठीक है, आप कुछ और गलत कर रहे हैं, कृपया यहां जांचें (http://secretgeek.net/rtjqe/realtimejqueryeditor.htm) अपने स्वयं के कोड के साथ अपने स्वयं के कोड आयन या प्रमुख समाधान आप देखेंगे कि काम करता है। – rsilva4

मैं तुम्हें <tbody> तत्व के लिए इस पंक्ति जोड़ना चाहते हैं यह सोचते कर रहा हूँ, और बस <table> पर append() का उपयोग कर <tbody> बाहर <tr> डाल देगा, शायद अवांछनीय परिणामों के साथ।

$('a').click(function() { 
    $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); 
});

संपादित करें: यहाँ पूरा स्रोत कोड है, और यह वास्तव में काम करता है:। (नोट $(document).ready(function(){}); है, जो पहले मौजूद नहीं थे

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('a').click(function() { 
     $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); 
    }); 
}); 
</script> 
<title></title> 
</head> 
<body> 
<a href="javascript:void(0);">Link</a> 
<table id="myTable"> 
    <tbody> 
    <tr> 
     <td>test</td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

स्रोत

2010-01-29 09:19:06

मेरे अनुभव में आप एक तालिका की HTML सामग्री को संशोधित नहीं कर सकते हैं। Document.createElement ("tr") का उपयोग करने का प्रयास करें, और document.appendElement() – mrwayne

मैंने आपके स्रोत को संशोधित किया ताकि इसे सही तरीके से काम करना चाहिए।(ऊपर दिए गए संपादन पर ध्यान दें) मैंने पहले यह नहीं देखा था, लेकिन आपके पास '$ (दस्तावेज़) नहीं था। पहले से ही()' शामिल है, जो मूल रूप से सब कुछ तोड़ देता है। जब तक आप 'तैयार()' ईवेंट को आग लगने की प्रतीक्षा न करें, तब तक डोम लोड नहीं होता है और आपके jQuery चयनकर्ता को वह नहीं मिलेगा जो वह ढूंढ रहा है। –

भूलें मत भूलें "tbody" स्रोत उदाहरण में शो के रूप में शामिल करें। –

प्रयास करें:

$("#myTable").append("<tr><%= escape_javascript(render :partial => name_of_partial) %></tr>");

और partial में, आप होना चाहिए:

<td>row1</td> 
<td>row2</td>

स्रोत

2010-01-29 12:25:13

हो सकता है कि इस उत्तर के लिए आप देख रहे है। यह <tr /> के अंतिम उदाहरण पाता है और इसके बाद नई पंक्ति संलग्न कर देता है:

<script type="text/javascript"> 
    $('a').click(function() { 
     $('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>'); 
    }); 
</script>

स्रोत

2013-06-28 08:59:25

मैं हमेशा अधिक पठनीय

$('table').append([ 
'<tr>', 
    '<td>My Item 1</td>', 
    '<td>My Item 2</td>', 
    '<td>My Item 3</td>', 
    '<td>My Item 4</td>', 
'</tr>' 
].join(''));

के लिए नीचे दिए गए इस कोड का उपयोग करें या इसे tbody

$('table').find('tbody').append([ 
'<tr>', 
    '<td>My Item 1</td>', 
    '<td>My Item 2</td>', 
    '<td>My Item 3</td>', 
    '<td>My Item 4</td>', 
'</tr>' 
].join(''));

स्रोत

2017-02-06 08:41:43

क्या यह वेनिला जेएस में किया जा सकता है? – PirateApp

आप jQuery का उपयोग कर तालिका में पंक्तियों को कैसे जोड़ते हैं?

उत्तर

संबंधित मुद्दे