जावास्क्रिप्ट में एक HTML टेबल बॉडी में एक पंक्ति कैसे डालें

133

मेरे पास एक हेडर और एक पाद लेख के साथ एक HTML तालिका है:

<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करूं?

— जेरोम वर्स्ट्रिनेज
स्रोत

ट्यूटोरियल w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow

— पांडियान कूल

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

मेरा कोड टूट गया क्योंकि: null की संपत्ति 'insertRow' नहीं पढ़ सकता। कोई सुझाव?

— वंकेला

1

@Vrankela: संभवतः आपका चयनकर्ता गलत है (उदाहरण में पहली पंक्ति)।

— क्रिश्चियन स्ट्रेम्फर

2

ऊपर पहली बार विफल होगा। इसके बजाय जाँच करें कि क्या कोई पंक्तियाँ नहीं हैं: var row = tableRef.rows; var rowSoFar = (पंक्तियाँ == अशक्त)? 0: row.length; var newRow = tableRef.insertRow (rowSoFar);

— Inor

धन्यवाद जोनाथन, पाठ शैली में सीएसएस शैली कैसे जोड़ें?

— गुयेन

2

इसके बजाय tableRef.insertRow(tableRef.rows.length);आप tableRef.insertRow(-1);तालिका के अंत में पंक्ति सम्मिलित करने के लिए सरल उपयोग कर सकते हैं ।

— jeanggi90

32

आप jQuery का उपयोग करके निम्नलिखित स्निपेट आज़मा सकते हैं :

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

— शशिधरन
स्रोत

22

हो सकता है कि आप सही हों, लेकिन कभी-कभी आपको वास्तविक सामान को जानने की आवश्यकता होती है :) और जैसा कि मैं कहता हूं कि किसी भी पुस्तकालय का उपयोग करने से पहले जावास्क्रिप्ट को हमेशा पता रखें कोई कठिन शरीर नहीं;)

— मारवान

हाँ 'tbody' में अल्पविराम को मत भूलना !! $(table).find('tbody').append( "<tr><td>aaaa</td></tr>" );

— हेक्टर

मैं आपके उत्तर को अपने मामले में लागू करने की कोशिश कर रहा हूं, लेकिन मैं ऐसा नहीं कर सका, इसलिए मैंने एक नया प्रश्न पोस्ट किया, क्या आपको लगता है कि आप इसका जवाब दे सकते हैं और मुझे बचा सकते हैं? ► stackoverflow.com/q/63194846/3298930 ।

— जोस मैनुअल अबर्का रॉड्रिग्ज

13

मूल दृष्टिकोण:

इसमें HTML-स्वरूपित सामग्री को जोड़ना चाहिए और नई जोड़ी गई पंक्ति को दिखाना चाहिए।

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

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

— Kurkula
स्रोत

2

मेरा पसंदीदा समाधान: आंतरिक HTML जोड़ने के लिए बहुत ही सुरुचिपूर्ण और अतिरिक्त लचीलेपन के साथ।

— जिमेयलर

9

तुम पास हो। tbodyइसके बजाय केवल पंक्ति जोड़ें table:

myTbody.insertRow();

उपयोग करने से पहले बस tBody( myTbody) का संदर्भ लें । ध्यान दें कि आपको किसी तालिका में अंतिम स्थान पास करने की आवश्यकता नहीं है; तर्क को छोड़ते समय यह स्वचालित रूप से अंत में स्थित होता है।

एक लाइव डेमो jsFiddle पर है ।

— तीमू
स्रोत

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

ओके सिंपल इसे var row = table.insertRow (0) के रूप में बनाएं; यह शीर्ष पर पंक्ति जोड़ देगा

— पांडियन कूल

@JVerstry tbody: यह ठीक वैसा ही है जैसा मोज़िला

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

स्निपेट का विस्तार करें

— सिद्धार्थ महतो
स्रोत