एक HTML तालिका में सभी पंक्तियों को हटा दें

Question

मैं <th>जावास्क्रिप्ट का उपयोग करके HTML तालिका की सभी पंक्तियों को कैसे हटा सकता हूं , और तालिका में सभी पंक्तियों के माध्यम से लूपिंग के बिना? मेरे पास एक बहुत बड़ी तालिका है और मैं यूआई को फ्रीज नहीं करना चाहता, जबकि मैं उन्हें हटाने के लिए पंक्तियों के माध्यम से लूप कर रहा हूं

Comments

एक लूप होना चाहिए, कोई "डिलीट-मल्टीपल-एलिमेंट्स" कमांड नहीं है, विधि removeChildकेवल एक डोम तत्व लेती है।

— 07इमे विदास

@ एसएलके ने माना कि हेडर की पंक्तियों वाली पंक्ति का अर्थ है

— इयोनसदान

Answer 1

<th>पंक्ति को एक <thead>और दूसरी पंक्तियों में रखें <tbody>फिर <tbody>एक नए, खाली एक के साथ बदलें ।

अर्थात

var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)

Comments

आसानी से सबसे कुशल समाधान, बशर्ते कि जावास्क्रिप्ट डेवलपर को HTML को संशोधित करने की अनुमति हो।

— ब्लेज़ेमॉन्गर

खबरदार, अगर आप आंतरिक HTML संपत्ति का उपयोग करके tbody को प्रतिस्थापित करने जा रहे हैं, तो यह IE में काम नहीं करेगा, हालांकि एक वर्कअराउंड है।

— अजीज पुजानी 14

@ ईसनदासन - यह कुछ व्यक्तिपरक है। वहाँ बहुत सारे पुस्तकालय हैं (मेरी व्यक्तिगत प्राथमिकता इन दिनों YUI 3 का उपयोग करना होगा) किसी को इस समस्या को उनमें से किसी एक के साथ इस समस्या को हल करना चाहिए। सिद्धांत वही होने जा रहे हैं जो तीसरे पक्ष के कोड का बहुत बड़ा हिस्सा है, हालांकि आप इसे शामिल करना चाहते हैं।

— क्वेंटिन

इसे document.getElementById('tbody').innerHTML = '';

— उत्तेजित

@ Trees4theForest यह मेरे लिए ठीक काम करता है। संभवतः यह ओपी के समय संभव नहीं था।

— माबु

Answer 2

यह सभी पंक्तियों को हटा देगा:

$("#table_of_items tr").remove(); 

Comments

यदि आप शीर्ष लेख को हटाना नहीं चाहते हैं: $ ("# table_of_items tbody tr"); हटाएं ();

— TTT

बहुत अच्छा सरल उत्तर। मैंने अपने कॉफीस्क्रिप्ट में इस्तेमाल किया - मुझे $("tbody#id tr").remove()

— एन

मुझे लगता है कि यह स्वीकार किए जाते हैं की तुलना में बेहतर उत्तर है, हालांकि यह इस बात पर निर्भर करता है कि आप JQuery का उपयोग करना चाहते हैं या नहीं। लेकिन किसी तरह .remove क्रोम पर काम नहीं किया।

— मिलिंद ठक्कर

TTT, तालिका के लिए सिर बनाने के लिए <thead> <th> </ th> </ thead> टैग का उपयोग करें। तब $ ("# table_of_items tr")। remove (); आपके लिए ठीक काम करता है, क्योंकि यह केवल <tr> टैग हटाता है।

— केट

TTT, कृपया अपनी टिप्पणी उत्तर में जोड़ें। आपका जवाब एकदम सही है!

— खोरशीद

Answer 3

बहुत क्रूड, लेकिन यह भी काम करता है:

var Table = document.getElementById("mytable");
Table.innerHTML = "";

Comments

दुर्भाग्य से यह हेडर <th> नहीं रखता है जैसा कि ओपी पूछता है।

— JoSeTe4ever

ऐसा होता है अगर वे अपने हेडर <th> नेस्टेड में डाल दिया <thead>। टेबल एनीवेज बनाने के लिए यह संभवतः सबसे सही ढंग से सही तरीका है।

— जॉन ब्लैक

बहुत अच्छा काम करता है। मुझे लगता है कि यह केवल मेरे जैसे लोगों के लिए उपयुक्त है, जिन्होंने JQuery में टेबल हैडर, पंक्ति, सेल, सब कुछ बनाया है।

— शम्सुल आरिफिन साजिब

इसने अच्छी तरह से html को एक tbody के अंदर साफ करने के लिए अच्छा काम किया :)

— RudyOnRails

मैंने इसके लिए थोड़े से संशोधन के साथ सिर्फ शरीर को साफ किया var bodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0]; bodyRef.innerHTML = '';

— azyth

Answer 4

यह एक पुराना प्रश्न है, हालाँकि हाल ही में मेरा भी इसी तरह का मुद्दा था।
मैंने इसे हल करने के लिए यह कोड लिखा था:

var elmtTable = document.getElementById('TABLE_ID_HERE');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;

for (var x=rowCount-1; x>0; x--) {
   elmtTable.removeChild(tableRows[x]);
}

पहली को छोड़कर, सभी पंक्तियों को हटा देगा।

चीयर्स!

Comments

छोटा (और तेज़): var rowCount = myTable.rows.length; जबकि (- rowCount) myTable.deleteRow (rowCount);

— पेटर

ऊपर टिप्पणी में कोड पहली पंक्ति को नहीं हटाता है

— PrfctByDsgn

Answer 5

सामान्य गलतियों के लिए वॉच आउट पर ध्यान देने योग्य बातें :

यदि आपका स्टार्ट इंडेक्स 0 है (या स्टार्ट से कुछ इंडेक्स), तो, सही कोड है:

var tableHeaderRowCount = 1;
var table = document.getElementById('WRITE_YOUR_HTML_TABLE_NAME_HERE');
var rowCount = table.rows.length;
for (var i = tableHeaderRowCount; i < rowCount; i++) {
    table.deleteRow(tableHeaderRowCount);
}

टिप्पणियाँ

1. डिलीट के लिए तर्क तय है
यह आवश्यक है क्योंकि हम एक पंक्ति को हटाते हैं, पंक्तियों की संख्या घट जाती है।
अर्थात; जब तक मैं पहुँचता हूँ (पंक्तियाँ .length - 1), या इससे पहले कि पंक्ति पहले ही हटाई जा चुकी है, तो आपके पास कुछ त्रुटि / अपवाद (या एक मौन) होगा।

2. लूप शुरू होने से पहले पंक्ति को लिया जाता है क्योंकि जब तक हम हटाते हैं "table.rows.length" बदलती रहेगी, तो फिर से आपके पास कुछ समस्या है, केवल विषम या यहां तक ​​कि पंक्तियां केवल हटा दी जाती हैं।

उम्मीद है की वो मदद करदे।

Answer 6

मान लें कि आपके पास सिर्फ एक तालिका है, तो आप इसे केवल प्रकार के साथ संदर्भित कर सकते हैं। यदि आप शीर्षलेख हटाना नहीं चाहते हैं:

$("tbody").children().remove()

अन्यथा:

$("table").children().remove()

आशा करता हूँ की ये काम करेगा!

Answer 7

मुझे @strat द्वारा पोस्ट किए गए पहले और समाधान को छोड़कर सभी पंक्तियों को हटाने की आवश्यकता थी, लेकिन इसके परिणामस्वरूप अनकहा अपवाद (संदर्भ में नोड का संदर्भ देता है जहां यह मौजूद नहीं है)। निम्नलिखित ने मेरे लिए काम किया।

var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
   myTable.deleteRow(x);
}

Answer 8

आप एक घोषणा कर सकते हैं, तो IDके लिए tbodyआप बस इस समारोह चला सकते हैं:

var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

Answer 9

यह मूल में HTML तालिका में पुनरावृत्ति विलोपन का काम करेगा

document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})

Answer 10

नीचे दिया गया कोड बहुत अच्छा काम करता है। यह शीर्ष लेख पंक्ति को छोड़कर सभी पंक्तियों को हटा देता है। तो यह कोड वास्तव में टी

$("#Your_Table tr>td").remove();

Comments

रुको, यह jQuery का उत्तर है, मूल प्रश्न विशेष रूप से jQuery समाधान के लिए नहीं पूछा था!

— ०२ पर

Answer 11

टैग करने के लिए कुछ आईडी का आश्वासन दे रहा है। अर्थात । इसके बाद, निम्न पंक्ति को तालिका शीर्ष लेख / पाद लेख को बनाए रखना चाहिए और सभी पंक्तियों को हटा देना चाहिए।

document.getElementById("yourID").innerHTML="";

और, यदि आप पूरी तालिका (हैडर / पंक्तियों / पाद) को मिटा देना चाहते हैं, तो आईडी को टेबल स्तर पर सेट करें

Answer 12

यदि आप निकालना नहीं चाहते हैं thऔर केवल पंक्तियों को अंदर निकालना चाहते हैं, तो यह पूरी तरह से काम कर रहा है।

var tb = document.getElementById('tableId');
  while(tb.rows.length > 1) {
  tb.deleteRow(1);
}

Answer 13

इस बारे में कैसा है:

जब पृष्ठ पहले लोड होता है, तो यह करें:

var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;

फिर जब आप तालिका को खाली करना चाहते हैं:

myTable.innerHTML=myTable.oldHTML;

परिणाम आपकी हेडर पंक्ति (रों) होगी यदि आप सभी के साथ शुरू करते हैं, तो प्रदर्शन नाटकीय रूप से लूपिंग से तेज है।

Comments

बहुत ही सुंदर समाधान

— रहस्योद्घाटन

Answer 14

यदि आपके पास <th>गैर-पंक्तियों की तुलना में बहुत कम पंक्तियाँ <th>हैं, तो आप सभी <th>पंक्तियों को एक स्ट्रिंग में एकत्र कर सकते हैं , पूरी तालिका को हटा सकते हैं, और फिर लिख सकते हैं<table>thstring</table> कि तालिका कहाँ हुआ करती थी।

संपादित करें: जहां, स्पष्ट रूप से, "थ्रस्ट्रिंग" सभी पंक्तियों के लिए html है <th>।

Comments

इसके बजाय, <th>डोम तत्वों के रूप में एस को इकट्ठा करें , तालिका के इनर HTML को साफ़ करें, फिर <th>एस को फिर से जोड़ें ।

— एंटोनियो

खबरदार, अगर आप इनरएचटीएमएल प्रॉपर्टी का उपयोग करके स्पष्ट tbody को प्रतिस्थापित करने जा रहे हैं, तो यह IE में काम नहीं करेगा, हालांकि एक वर्कअराउंड है।

— aziz punjani

Answer 15

IE में यह तालिका के लिए एक संस्करण घोषित किए बिना भी काम करता है और सभी पंक्तियों को हटा देगा:

for(var i = 0; i < resultsTable.rows.length;)
{   
   resultsTable.deleteRow(i);
}

Answer 16

यह एक सरल कोड है जिसे मैंने हेडर पंक्ति (पहले एक) को हटाए बिना इसे हल करने के लिए लिखा था।

var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}

आशा है कि यह आप के लिए काम करता है!!।

Answer 17

अपने टीओबी के लिए एक आईडी या एक क्लास असाइन करें।

document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();

आप अपनी आईडी या क्लास का नाम बता सकते हैं कि आप कैसे चाहते हैं, जरूरी नहीं #tbodyIdया .tbodyClass।

Answer 18

बस टेबल बॉडी को क्लियर करें।

$("#tblbody").html("");

Comments

html () वास्तव में एक jQuery विधि है।

— कार्लोडुरसो

Answer 19

const table = document.querySelector ('table'); table.innerHTML === ''? null: table.innerHTML = ''; उपरोक्त जावास्क्रिप्ट ने मेरे लिए ठीक काम किया। यह देखने के लिए जांचता है कि क्या तालिका में कोई डेटा है और फिर हेडर सहित सब कुछ साफ कर देता है।