কীভাবে জাভাস্ক্রিপ্টে এইচটিএমএল টেবিলের বডিতে একটি সারি সন্নিবেশ করা যায়


133

আমার একটি শিরোনাম এবং ফুটার সহ একটি এইচটিএমএল টেবিল রয়েছে:

<table id="myTable">
    <thead>
        <tr>
            <th>My Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaaa</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>My footer</td>
        </tr>
    <tfoot>
</table>

আমি tbodyনিম্নলিখিতগুলির সাথে একটি সারি যুক্ত করার চেষ্টা করছি :

myTable.insertRow(myTable.rows.length - 1);

তবে সারিটি যুক্ত করা হয়েছে tfoot বিভাগে ।

আমি কীভাবে tbody? োকান ?


উত্তর:


215

আপনি যদি একটি সারি যুক্ত করতে চান tbodyতবে এটির একটি রেফারেন্স পান এবং এটি সেখানে যুক্ত করুন।

var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

// Insert a row in the table at the last row
var newRow   = tableRef.insertRow();

// Insert a cell in the row at index 0
var newCell  = newRow.insertCell(0);

// Append a text node to the cell
var newText  = document.createTextNode('New row');
newCell.appendChild(newText);

একটি ওয়ার্কিং ডেমো এখানে । এছাড়াও, আপনি insertRow এখানে ডকুমেন্টেশন চেক করতে পারেন ।


3
আমার কোডটি বিরল কারণ: নালীর সম্পত্তি 'সন্নিবেশকরণ' পড়তে পারে না। কোনও পরামর্শ?
বৃঙ্কেলা

1
@ বৃঙ্কেলা: সম্ভবত আপনার নির্বাচকটি ভুল (উদাহরণের মধ্যে প্রথম লাইন)।
খ্রিস্টান স্ট্র্যাম্পার 21

2
উপরেরটি প্রথমবার ব্যর্থ হবে। পরিবর্তে সেখানে কোনও সারি নেই কিনা তা পরীক্ষা করুন: var সারি = টেবিলআরফ.রোজ; var rowsSoFar = (সারি == নাল)? 0: rows.length; var newRow = tableRef.insertRow (rowsSoFar);
inor

ধন্যবাদ জোনাথন, পাঠ্য নোটে কীভাবে CSS স্টাইল যুক্ত করবেন?
Nguyễn Thắng

2
আপনি পরিবর্তে টেবিলের শেষে সারিটি সন্নিবেশ করানোর জন্য tableRef.insertRow(tableRef.rows.length);সাধারণ ব্যবহার করতে পারেন tableRef.insertRow(-1);
jeanggi90

32

আপনি jQuery ব্যবহার করে নিম্নলিখিত স্নিপেট চেষ্টা করতে পারেন :

$(table).find('tbody').append("<tr><td>aaaa</td></tr>");

22
হতে পারে আপনি ঠিক বলেছেন তবে কখনও কখনও আপনাকে আসল জিনিসগুলি জানতে হবে :) এবং আমি যেমন বলেছি যে কোনও লাইব্রেরি ব্যবহার করার আগে জাভাস্ক্রিপ্টটি সর্বদা জেনে রাখুন কোনও অনুভূতিযুক্ত শরীর নয়;)
মারওয়ান

হ্যাঁ 'টিডি' তে কমাগুলি ভুলে যাবেন না !! $(table).find('tbody').append( "<tr><td>aaaa</td></tr>" );
হিটার

আমি আপনার মামলায় আপনার উত্তরটি প্রয়োগ করার চেষ্টা করছি কিন্তু আমি পারলাম না, তাই আমি একটি নতুন প্রশ্ন পোস্ট করলাম, আপনি কি মনে করেন যে আপনি এর উত্তর দিতে পারেন এবং আমাকে বাঁচাতে পারেন? ► স্ট্যাকওভারফ্লো . com/q/63194846/3298930
হোসে ম্যানুয়েল অ্যাবারকা রদ্রিগেজ

13

বেসিক পদ্ধতির:

এটিতে এইচটিএমএল-ফর্ম্যাট করা সামগ্রী যুক্ত করা উচিত এবং সদ্য যুক্ত হওয়া সারিটি দেখানো উচিত।

var myHtmlContent = "<h3>hello</h3>"
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;

2
আমার প্রিয় সমাধান: খুব মার্জিত এবং অভ্যন্তরীণ এইচটিএমএল যুক্ত করার জন্য নমনীয়তা সহ।
jimiayler

9

আপনি কাছাকাছি। এর tbodyপরিবর্তে সারিটি যুক্ত করুন table:

myTbody.insertRow();

কেবলমাত্র একটি রেফারেন্স পান tBody(myTbodyব্যবহারের আগে কেবল ) এর । লক্ষ্য করুন যে কোনও টেবিলে আপনাকে শেষ অবস্থানটি পাস করার দরকার নেই; যুক্তি বাদ দিলে এটি স্বয়ংক্রিয়ভাবে শেষে থাকে।

একটি লাইভ ডেমো জেএসফিডেলে রয়েছে


6

আমি মনে করি এই লিপিটি হ'ল আপনার যা প্রয়োজন

var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)

অবশ্যই আপনাকে আপনার নতুন সারিটি পরিবর্তন করতে হবে তবে আমি কেবল উত্তরে ধারণাটি
মারওয়ান

4

সারি যুক্ত করুন:

<html>
    <script>
        function addRow() {
            var table = document.getElementById('myTable');
            //var row = document.getElementById("myTable");
            var x = table.insertRow(0);
            var e = table.rows.length-1;
            var l = table.rows[e].cells.length;
            //x.innerHTML = "&nbsp;";

            for (var c=0, m=l; c < m; c++) {
                table.rows[0].insertCell(c);
                table.rows[0].cells[c].innerHTML = "&nbsp;&nbsp;";
            }
        }

        function addColumn() {
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].insertCell(0);
                table.rows[r].cells[0].innerHTML = "&nbsp;&nbsp;";
            }
        }

        function deleteRow() {
            document.getElementById("myTable").deleteRow(0);
        }

        function deleteColumn() {
            // var row = document.getElementById("myRow");
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].deleteCell(0); // var table handle
            }
        }
    </script>

    <body>
        <input type="button" value="row +" onClick="addRow()" border=0 style='cursor:hand'>
        <input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'>
        <input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'>
        <input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'>

        <table  id='myTable' border=1 cellpadding=0 cellspacing=0>
            <tr id='myRow'>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

এবং কোষ।


7
আমি মনে করি একটি উদাহরণ তৈরি করার সময় আপনার আরও বুদ্ধিমান ভেরিয়েবলগুলি ব্যবহার করা উচিত।
উরিয়াহস ভিক্টর

2

আমি এটি চেষ্টা করেছি এবং এটি আমার জন্য কাজ করছে:

var table = document.getElementById("myTable");
var row = table.insertRow(myTable.rows.length-2);
var cell1 = row.insertCell(0);

2
এবং যদি ফুটারের 2 সারি থাকে?
জেরুমে ভার্সট্রিঞ্জ

1
ওকে সরল করে এটিকে ভার সারি = টেবিল.িনেট্রো রো (0) হিসাবে তৈরি করুন; এটি শীর্ষে সারি যুক্ত করবে
পান্ডিয়ান কুল

@ জেয়ারস্ট্রি টডি: মোজিলা
e2-e4

1

আপনি নিম্নলিখিত উদাহরণটি ব্যবহার করতে পারেন:

<table id="purches">
    <thead>
        <tr>
            <th>ID</th>
            <th>Transaction Date</th>
            <th>Category</th>
            <th>Transaction Amount</th>
            <th>Offer</th>
        </tr>
    </thead>

    <!--  <tr th:each="person: ${list}"    >
            <td><li th:each="person: ${list}" th:text="|${person.description}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.price}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.available}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.from}|"></li></td>
            </tr>
    -->

    <tbody id="feedback">
    </tbody>
</table>

জাভাস্ক্রিপ্ট ফাইল:

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: "/search",
    data: JSON.stringify(search),
    dataType: 'json',
    cache: false,
    timeout: 600000,
    success: function (data) {
        //  var json = "<h4>Ajax Response</h4><pre>"  + JSON.stringify(data, null, 4) + "</pre>";
        // $('#feedback').html(json);
        //
        console.log("SUCCESS: ", data);
        //$("#btn-search").prop("disabled", false);

        for (var i = 0; i < data.length; i++) {
            //$("#feedback").append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td></tr>');
            $('#feedback').append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td></tr>');

            alert(data[i].accountNumber)
        }
    },
    error: function (e) {
        var json = "<h4>Ajax Response</h4><pre>" + e.responseText + "</pre>";
        $('#feedback').html(json);

        console.log("ERROR: ", e);
        $("#btn-search").prop("disabled", false);
    }
});

1

কলাম যুক্ত করুন, সারি যুক্ত করুন, কলাম মুছুন এবং সারি মুছুন।

সবচেয়ে সহজ উপায়

function addColumn(myTable) {
    var table = document.getElementById(myTable);
    var row = table.getElementsByTagName('tr');
    for (i=0; i<row.length; i++) {
        row[i].innerHTML = row[i].innerHTML + '<td></td>';
    }
}

function deleterow(tblId)
{
      var table = document.getElementById(tblId);
      var row = table.getElementsByTagName('tr');
      if (row.length != '1') {
          row[row.length - 1].outerHTML = '';
      }
}

function deleteColumn(tblId)
{
    var allRows = document.getElementById(tblId).rows;
    for (var i=0; i<allRows.length; i++) {
        if (allRows[i].cells.length > 1) {
            allRows[i].deleteCell(-1);
        }
    }
}

function myFunction(myTable) {
    var table = document.getElementById(myTable);
    var row = table.getElementsByTagName('tr');
    var row = row[row.length-1].outerHTML;
    table.innerHTML = table.innerHTML + row;
    var row = table.getElementsByTagName('tr');
    var row = row[row.length-1].getElementsByTagName('td');
    for(i=0; i<row.length; i++) {
        row[i].innerHTML = '';
    }
}
table, td {
    border: 1px solid black;
    border-collapse: collapse;
}
td {
    cursor: text;
    padding: 10px;
}
td:empty:after {
    content: "Type here...";
    color: #CCCCCC;
}
<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <form>
            <p>
            <input type="button" value="+Column" onclick="addColumn('tblSample')">
            <input type="button" value="-Column" onclick="deleteColumn('tblSample')">
            <input type="button" value="+Row" onclick="myFunction('tblSample')">
            <input type="button" value="-Row" onclick="deleterow('tblSample')">
            </p>
            <table><tbody id="tblSample" contenteditable><tr><td></td></tr></tbody></table>
        </form>
    </body>

</html>

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