JQuery - সংযোজন দিয়ে টেবিল তৈরি করুন

98

পৃষ্ঠা পৃষ্ঠাতে আমার আছে:

<div id="here_table"></div>

এবং jquery মধ্যে:

for(i=0;i<3;i++){
    $('#here_table').append( 'result' +  i );
}

এটি আমার জন্য উত্পন্ন:

<div id="here_table">
    result1 result2 result3 etc
</div>

আমি এই টেবিল এ গ্রহণ করতে চাই:

<div id="here_table">
    <table>
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
    </table>
</div>

আমি করছি:

$('#here_table').append(  '<table>' );

 for(i=0;i<3;i++){
    $('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

 $('#here_table').append(  '</table>' );

তবে এটি আমার জন্য উত্পন্ন:

<div id="here_table">
    <table> </table> !!!!!!!!!!
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
</div>

কেন? আমি কীভাবে এটি সঠিকভাবে তৈরি করতে পারি?

লাইভ: http://jsfiddle.net/n7cyE/

javascript  jquery  html 
— মার্ক ফন্ডি
সূত্র

উত্তর:

190

এই লাইন:

$('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );

থেকে আপনার স্বাক্ষরে div#here_tableনতুন নয় table।

বেশ কয়েকটি পন্থা রয়েছে:

/* Note that the whole content variable is just a string */
var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#here_table').append(content);

তবে, উপরোক্ত পদ্ধতির সাহায্যে শৈলী যুক্ত করা এবং গতিসম্পন্ন স্টাফগুলি করা কম পরিচালনাযোগ্য <table>।

তবে এটি কীভাবে আপনি প্রায় দুর্দান্ত প্রত্যাশা করেন তা করে:

var table = $('<table>').addClass('foo');
for(i=0; i<3; i++){
    var row = $('<tr>').addClass('bar').text('result ' + i);
    table.append(row);
}

$('#here_table').append(table);

আশা করি এটি সাহায্য করবে।

— শ্রানসর
সূত্র
4
দ্বিতীয় উদাহরণের জন্য, আপনার টিআর এর ভিতরে আপনার একটি টিডি দরকার এবং তারপরে টিডি তে টেক্সট করুন। এছাড়াও jquery দিয়ে এইচটিএমএল উপাদান তৈরি করার সময় আপনার কেবল খোলার ট্যাগ দরকার। $ ('<table>') দুর্দান্ত কাজ করে।
— m4tt1mus
Jquery উদাহরণস্বরূপ, আপনি ছোট ট্যাগ নাম ব্যবহার করতে পারেন, $('<table/>')পরিবর্তে $('<table></table>)এবং এর $('<tr/>')পরিবর্তে $('<tr></tr>), ইত্যাদি।
— ফায়াট
38

আপনার trঅভ্যন্তরটি সংযোজন করা দরকার tableতাই আমি আপনার লুপের ভিতরে আপনার নির্বাচককে আপডেট করেছি এবং বন্ধকরণটি সরিয়েছি tableকারণ এটি প্রয়োজনীয় নয়।

$('#here_table').append(  '<table />' );

 for(i=0;i<3;i++){
    $('#here_table table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

প্রধান সমস্যা যে আপনি সংযোজন ছিল trথেকে divhere_table।

সম্পাদনা: পারফরম্যান্স যদি উদ্বেগজনক হয় তবে এখানে একটি জাভাস্ক্রিপ্ট সংস্করণ রয়েছে। ডকুমেন্ট টুকরোটি ব্যবহার করা লুপের প্রতিটি পুনরাবৃত্তির জন্য একটি রিফ্লো সৃষ্টি করবে না

var doc = document;

var fragment = doc.createDocumentFragment();

for (i = 0; i < 3; i++) {
    var tr = doc.createElement("tr");

    var td = doc.createElement("td");
    td.innerHTML = "content";

    tr.appendChild(td);

    //does not trigger reflow
    fragment.appendChild(tr);
}

var table = doc.createElement("table");

table.appendChild(fragment);

doc.getElementById("here_table").appendChild(table);
— ক্রেগ
সূত্র
4
দুর্দান্ত উত্তর! ধন্যবাদ! আমি তোমার জাভাস্ক্রিপ্ট সংস্করণ অ্যাপ আবিষ্কারক একটি গতিশীল টেবিল প্রদর্শন করতে ব্যবহৃত puravidaapps.com/table.php
— Taifun
4
InnerHTML ব্যবহার করা উচিত নয় প্লেইন টেক্সট পাস
— cela
20

আপনি যখন ব্যবহার করবেন append, jQuery আশা করে এটি এটি সু-গঠনযুক্ত এইচটিএমএল (সাধারণ পাঠ্য গণনা) করবে। appendকরার মতো নয় +=।

আপনাকে প্রথমে টেবিল তৈরি করতে হবে, তারপরে এটি যুক্ত করুন।

var $table = $('<table/>');
for(var i=0; i<3; i++){
    $table.append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}
$('#here_table').append($table);
— রকেট হাজমত
সূত্র
4
+1 এখানে সেরা পন্থা - দেখায় যে jQuery আসলে কাঁচা এইচটিএমএল নয়, ডোম উপাদানগুলিতে কাজ করে।
— টেডেক
13

বা সমস্ত jQuery ব্যবহার করার জন্য এটি করুন। এটি প্রতিটি ডিওএম উপাদান বা কোনও অ্যারে / অবজেক্ট হতে পারে কোনও ডেটা দিয়ে লুপ করতে পারে।

var data = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
var numCols = 1;           


$.each(data, function(i) {
  if(!(i%numCols)) tRow = $('<tr>');

  tCell = $('<td>').html(data[i]);

  $('table').append(tRow.append(tCell));
});
​

http://jsfiddle.net/n7cyE/93/

— থার জেসন ফ্রানসেন
সূত্র
জেএসফিডেলের বাইরে কাজ করার জন্য কি কোনও নির্দিষ্ট সেটিং দরকার? ফাঁকা জেএস ফাইলটিতে এটি চেষ্টা করে "আনকাটড টাইপ এরিয়ার: অপরিবর্তিত প্রত্যেকটির সম্পত্তি 'পড়া যায় না"
— কানাডিয়ান
4
আপনি কি নিশ্চিত যে jQuery লোড হয়েছে?
— হেনরিডভ
আমি এইচটিএমএল না ব্যবহার করার পরিবর্তে লাইনটি পরিবর্তন করব এবং পরিবর্তে পাঠ্য ব্যবহার করব (যেহেতু এই উদাহরণে আমরা কেবল টেবিলের ঘরে পাঠ্য সন্নিবেশ করছি) tCell = $ ('<td>')। পাঠ্য (ডেটা [i]);
— পেরিসিএসস
4

একাধিক কলাম এবং সারি যুক্ত করতে, আমরা একটি স্ট্রিং সংক্ষিপ্তকরণও করতে পারি। সেরা উপায় নয়, তবে এটি নিশ্চিতভাবে কাজ করে।

             var resultstring='<table>';
      for(var j=0;j<arr.length;j++){
              //array arr contains the field names in this case
          resultstring+= '<th>'+ arr[j] + '</th>';
      }
      $(resultset).each(function(i, result) {
          // resultset is in json format
          resultstring+='<tr>';
          for(var j=0;j<arr.length;j++){
              resultstring+='<td>'+ result[arr[j]]+ '</td>';
          }
          resultstring+='</tr>';
      });
      resultstring+='</table>';
          $('#resultdisplay').html(resultstring);

এটি আপনাকে ক্ষেত্রের নামগুলি হার্ডকড না করে সারণীতে সারণী এবং কলামগুলিকে গতিশীলভাবে যুক্ত করতে দেয়।

— অপর্ণা
সূত্র
2

Jquery ব্যবহার করে একাধিক ফাইল আপলোডের জন্য নিম্নলিখিতটি করা হয়:

ফাইল ইনপুট বোতাম:

<div>
 <input type="file" name="uploadFiles" id="uploadFiles" multiple="multiple" class="input-xlarge" onchange="getFileSizeandName(this);"/> 
</div>

একটি সারণীতে ফাইলের নাম এবং ফাইলের আকার প্রদর্শন করা হচ্ছে:

<div id="uploadMultipleFilediv">
<table id="uploadTable" class="table table-striped table-bordered table-condensed"></table></div>

ফাইলের নাম এবং ফাইলের আকার পাওয়ার জন্য জাভাস্ক্রিপ্ট:

function getFileSizeandName(input)
{
    var select = $('#uploadTable');
    //select.empty();
    var totalsizeOfUploadFiles = "";
    for(var i =0; i<input.files.length; i++)
    {
        var filesizeInBytes = input.files[i].size; // file size in bytes
        var filesizeInMB = (filesizeInBytes / (1024*1024)).toFixed(2); // convert the file size from bytes to mb
        var filename = input.files[i].name;
        select.append($('<tr><td>'+filename+'</td><td>'+filesizeInMB+'</td></tr>'));
        totalsizeOfUploadFiles = totalsizeOfUploadFiles+filesizeInMB;
        //alert("File name is : "+filename+" || size : "+filesizeInMB+" MB || size : "+filesizeInBytes+" Bytes");               
    }           
}
— lk.annamalai
সূত্র
2

অথবা কিছু লিঙ্ক তৈরি করার জন্য লুপ ছাড়াই স্থির এইচটিএমএল (বা যাই হোক না কেন)। <div id="menu">এইচটিএমএল পুনরুত্পাদন করতে যে কোনও পৃষ্ঠায় রাখুন ।

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>HTML Masterpage</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

        <script type="text/javascript">
            function nav() {
                var menuHTML= '<ul><li><a href="#">link 1</a></li></ul><ul><li><a href="#">link 2</a></li></ul>';
                $('#menu').append(menuHTML);
            }
        </script>

        <style type="text/css">
        </style>
    </head>
    <body onload="nav()">
        <div id="menu"></div>
    </body>
    </html>
— এইচটিএমএল জেডি
সূত্র
2

আমি বরং ভাল ফাংশন লিখেছি যা উল্লম্ব এবং অনুভূমিক টেবিল তৈরি করতে পারে:

function generateTable(rowsData, titles, type, _class) {
    var $table = $("<table>").addClass(_class);
    var $tbody = $("<tbody>").appendTo($table);


    if (type == 2) {//vertical table
        if (rowsData.length !== titles.length) {
            console.error('rows and data rows count doesent match');
            return false;
        }
        titles.forEach(function (title, index) {
            var $tr = $("<tr>");
            $("<th>").html(title).appendTo($tr);
            var rows = rowsData[index];
            rows.forEach(function (html) {
                $("<td>").html(html).appendTo($tr);
            });
            $tr.appendTo($tbody);
        });

    } else if (type == 1) {//horsantal table 
        var valid = true;
        rowsData.forEach(function (row) {
            if (!row) {
                valid = false;
                return;
            }

            if (row.length !== titles.length) {
                valid = false;
                return;
            }
        });

        if (!valid) {
            console.error('rows and data rows count doesent match');
            return false;
        }

        var $tr = $("<tr>");
        titles.forEach(function (title, index) {
            $("<th>").html(title).appendTo($tr);
        });
        $tr.appendTo($tbody);

        rowsData.forEach(function (row, index) {
            var $tr = $("<tr>");
            row.forEach(function (html) {
                $("<td>").html(html).appendTo($tr);
            });
            $tr.appendTo($tbody);
        });
    }

    return $table;
}

ব্যবহারের উদাহরণ:

var title = [
    'مساحت موجود',
    'مساحت باقیمانده',
    'مساحت در طرح'
];

var rows = [
    [number_format(data.source.area,2)],
    [number_format(data.intersection.area,2)],
    [number_format(data.deference.area,2)]
];

var $ft = generateTable(rows, title, 2,"table table-striped table-hover table-bordered");

$ft.appendTo( GroupAnalyse.$results );

var title = [
    'جهت',
    'اندازه قبلی',
    'اندازه فعلی',
    'وضعیت',
    'میزان عقب نشینی',
];

var rows = data.edgesData.map(function (r) {
    return [
        r.directionText,
        r.lineLength,
        r.newLineLength,
        r.stateText,
        r.lineLengthDifference
    ];
});


var $et = generateTable(rows, title, 1,"table table-striped table-hover table-bordered");

$et.appendTo( GroupAnalyse.$results );

$('<hr/>').appendTo( GroupAnalyse.$results );

উদাহরণস্বরূপ ফলাফল:

উদাহরণস্বরূপ ফলাফল

— এমএসএস
সূত্র
1

উপরে বর্ণিত পদ্ধতিটি ব্যবহার করে এবং উপাত্ত উপস্থাপনের জন্য জেএসএন ব্যবহার করে একটি কার্যকারী উদাহরণ। এটি সার্ভার থেকে ডেটা আনার এজ্যাক্স কল নিয়ে কাজ করার জন্য আমার প্রকল্পে ব্যবহৃত হয়।

http://jsfiddle.net/vinocui/22mX6/1/

আপনার এইচটিএমএলে: <টেবিল আইডি = 'এখানে_ টেবিল'> </ টেবিল>

জেএস কোড:

function feed_table(tableobj){
    // data is a JSON object with
    //{'id': 'table id',
    // 'header':[{'a': 'Asset Tpe', 'b' : 'Description', 'c' : 'Assets Value', 'd':'Action'}], 
    // 'data': [{'a': 'Non Real Estate',  'b' :'Credit card',  'c' :'$5000' , 'd': 'Edit/Delete' },...   ]}

    $('#' + tableobj.id).html( '' );

    $.each([tableobj.header, tableobj.data], function(_index, _obj){
    $.each(_obj, function(index, row){
        var line = "";
        $.each(row, function(key, value){
            if(0 === _index){
                line += '<th>' + value + '</th>';    
            }else{
                line += '<td>' + value + '</td>';
            }
        });
        line = '<tr>' + line + '</tr>';
        $('#' + tableobj.id).append(line);
    });


    });    
}

// testing
$(function(){
    var t = {
    'id': 'here_table',
    'header':[{'a': 'Asset Tpe', 'b' : 'Description', 'c' : 'Assets Value', 'd':'Action'}], 
    'data': [{'a': 'Non Real Estate',  'b' :'Credit card',  'c' :'$5000' , 'd': 'Edit/Delete' },
         {'a': 'Real Estate',  'b' :'Property',  'c' :'$500000' , 'd': 'Edit/Delete' }
        ]};

    feed_table(t);
});
— জ্যাকব সিইআই
সূত্র
1

আমার হিসাবে, এই পদ্ধতির সুন্দর: 

String.prototype.embraceWith = function(tag) {
    return "<" + tag + ">" + this + "</" + tag + ">";
};

var results = [
  {type:"Fiat", model:500, color:"white"}, 
  {type:"Mercedes", model: "Benz", color:"black"},
  {type:"BMV", model: "X6", color:"black"}
];

var tableHeader = ("Type".embraceWith("th") + "Model".embraceWith("th") + "Color".embraceWith("th")).embraceWith("tr");
var tableBody = results.map(function(item) {
    return (item.type.embraceWith("td") + item.model.toString().embraceWith("td") + item.color.embraceWith("td")).embraceWith("tr")
}).join("");

var table = (tableHeader + tableBody).embraceWith("table");

$("#result-holder").append(table);
— ভ্যাসিল কোভালচুক
সূত্র
0


আমি jquery ব্যবহার করে সবচেয়ে পঠনযোগ্য এবং এক্সটেনসিবল উপায় পছন্দ করি।
এছাড়াও, আপনি ফ্লাইতে সম্পূর্ণ গতিশীল সামগ্রী তৈরি করতে পারেন।
Jquery সংস্করণ 1.4 যেহেতু আপনি উপাদানগুলির বৈশিষ্ট্যগুলি যা
ইমো, একটি হত্যাকারী বৈশিষ্ট্যটি পাস করতে পারেন । এছাড়াও কোডটি পরিষ্কার রাখা যেতে পারে।

$(function(){

        var tablerows = new Array();

        $.each(['result1', 'result2', 'result3'], function( index, value ) {
            tablerows.push('<tr><td>' + value + '</td></tr>');
        });

        var table =  $('<table/>', {
           html:  tablerows
       });

        var div = $('<div/>', {
            id: 'here_table',
            html: table
        });

        $('body').append(div);

    });

অ্যাডন: আপনি অ্যারে স্বরলিপি ব্যবহার করতে হবে এমন একাধিক "এইচটিএমএল" ট্যাগ পাস করে: যেমন

var div = $('<div/>', {
            id: 'here_table',
            html: [ div1, div2, table ]
        });

সেরা আরজিডিএস
ফ্রাঞ্জ

— ফ্র্যাঞ্জসিসি
সূত্র
0 
<table id="game_table" border="1">

এবং Jquery

var i;
for (i = 0; ii < 10; i++) 
{

        var tr = $("<tr></tr>")
        var ii;
        for (ii = 0; ii < 10; ii++) 
        {
        tr.append(`<th>Firstname</th>`)
        }

$('#game_table').append(tr)
}
— রাইসুক-হুজিসওয়া
সূত্র
স্ট্যাকওভারফ্লোতে স্বাগতম! আপনি যে উত্তরটির জন্য এই উত্তরটি লিখছেন তা খুব পুরানো (6 বছর) এবং ইতিমধ্যে অন্যান্য ব্যবহারকারীদের দ্বারা এর ব্যাপক উত্তর দেওয়া হয়েছে। আপনি লেখকের বাক্সের উপরে একটি প্রশ্নের বয়স দেখতে পারেন। হতে পারে আপনি আজ আপনার দুর্দান্ত জ্ঞানটি ব্যবহার করে চলমান অনুत्तरযুক্ত প্রশ্নযুক্ত ব্যবহারকারীদের সমর্থন করতে চান! আপনি সার্চবারে ট্যাগের নামটি লিখে নতুন প্রশ্নগুলি খুঁজে পেতে পারেন এবং আপনি কেবল যে প্রযুক্তিটির জন্য প্রশ্নের উত্তর দিতে চান তার জন্য কেবলমাত্র প্রশ্নগুলিই দেখতে পাবেন। JQuery জন্য আপনি এই পৃষ্ঠাটি এখানে পেতে পারেন ।
— হার্কু
0

এটি সবচেয়ে ভাল

এইচটিএমএল

<div id="here_table"> </div>

jQuery

$('#here_table').append( '<table>' );

for(i=0;i<3;i++)
{
$('#here_table').append( '<tr>' + 'result' +  i + '</tr>' );

    for(ii=0;ii<3;ii++)
    {
    $('#here_table').append( '<td>' + 'result' +  i + '</tr>' );
    }
}

$('#here_table').append(  '</table>' );
— রাইসুক হুজিসওয়া
সূত্র
0

এটি লক্ষ্য করা গুরুত্বপূর্ণ যে আপনি একই ফলাফল অর্জন করতে এমমেট ব্যবহার করতে পারেন। প্রথমে, https://emmet.io/ এ এমমেট আপনার জন্য কি করতে পারে তা পরীক্ষা করুন

সংক্ষেপে, এমমেটের সাহায্যে, আপনি নীচের উদাহরণগুলিতে দেখানো একটি জটিল HTML চিহ্নগুলিতে একটি স্ট্রিং প্রসারিত করতে পারেন:

উদাহরণ # 1

ul>li*5

... উত্পাদন করবে

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

উদাহরণ # 2

div#header+div.page+div#footer.class1.class2.class3

... উত্পাদন করবে

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

এবং তালিকা চলছে। Https://docs.emmet.io/abbreviations/syntax/ এ আরও উদাহরণ রয়েছে

এবং jQuery ব্যবহার করে এটি করার জন্য একটি গ্রন্থাগার রয়েছে। এটিকে Emmet.js বলা হয় এবং https://github.com/christiansandor/Emmet.js এ উপলব্ধ

— asiby
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.