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




html (5)

आपको तालिका में जोड़ना चाहिए और पंक्तियों को नहीं।

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

नमस्ते मैं 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>

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

<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>

ध्यान दें कि यह jQuery 1.4 के रूप में काम करेगा भले ही तालिका में एक <tbody> तत्व शामिल हो:

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


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

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

संपादित करें: यहां पूर्ण स्रोत कोड है, और यह वास्तव में काम करता है: ( $(document).ready(function(){}); नोट करें। पहले से ही $(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>

मैं हमेशा अधिक पठनीय के लिए नीचे इस कोड का उपयोग करता हूं

$('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(''));

परीक्षण और कार्य करना

तालिका में पहली पंक्ति के रूप में जोड़ने के लिए

$(".table tbody").append("<tr><td>New row</td></tr>");

तालिका में अंतिम पंक्ति के रूप में जोड़ने के लिए

$(".table tbody").prepend("<tr><td>New row</td></tr>");






html