Heim  >  Artikel  >  Web-Frontend  >  js fügt mithilfe der Javascript-Fähigkeiten insertRow und insertCell_javascript dynamisch Tabellendaten hinzu

js fügt mithilfe der Javascript-Fähigkeiten insertRow und insertCell_javascript dynamisch Tabellendaten hinzu

WBOY
WBOYOriginal
2016-05-16 16:47:201482Durchsuche

Rendering:
js fügt mithilfe der Javascript-Fähigkeiten insertRow und insertCell_javascript dynamisch Tabellendaten hinzu

Code:

js fügt Tabelle data_2.html dynamisch hinzu

Code kopieren Der Code lautet wie folgt:

;

js dynamisch hinzufügen Data_2 verwendet die Methoden insertRow und insertCell, um <br><br><script type="text/javascript"> zu implementieren; Eine C#-Frage", "name": "Zhang San", "date": "21.03.2014" }, <br>{ "title": "Eine Javascript-Frage", "name": "李思" , „Datum“: „21.03.2014“ }, <br>{ „Titel“: „Eine c-Frage“, „Name“: „五五“, „Datum“: „21.03.2014“ }, <br>{ „title“: „A c questions“, „name“: „Zhao Liu“, „date“: „2014-03-21“ } <br>]; window.onload = function () { <br>loadTab(); <br>//Alle auswählen<br>document.getElementById("selA").onclick = function() { <br>if (document.getElementById( " selA").checked == true) { <br>seleAll(tab, true); <br>} else { <br>seleAll(tab, false); <br>} <br>}; <br>/ / Alle ausgewählten löschen <br>document.getElementById("delSel").onclick = function() { <br>//Alle Eingabesteuerelemente durchlaufen (außer dem letzten Kontrollkästchen, das alle ausgewählt ist) <br><br>var chks = document.getElementsByTagName('input'); <br><br>for (var i = chks.length - 2; i >=0; i--) { <br>var chk = chks[i ]; 🎜>if (chk.checked==true) { <br>//Ausgewählte Zeilenlöschungsverarbeitung<br>var rowNow = chk.parentNode.parentNode; <br>rowNow.parentNode.removeChild(rowNow); <br>} else { <br>alert("wirklich"); <br>} <br>}; <br><br>function loadTab() { <br>tab = document. getElementById("tb"); <br>//Fügen Sie die mailArr-Schleifendurchlaufmethode zur Tabelle in Form von tr hinzu <br>for (var rowindex = 0; rowindex < mailArr.length; rowindex ) { <BR> / /var tr = tab.insertRow(-1); //-1 bezieht sich auf die letzte Zeile <BR><BR>var tr = tab.insertRow(tab.rows.length - 1); //In die letzten beiden einfügen rows, Die letzte Zeile sollte für die Zeile reserviert sein, die alle auswählt. <br>var td1 = tr.insertCell(-1); <br>var td2 = tr.insertCell(-1); <br>td2.innerHTML = mailArr[rowindex].title; <br>var td3 = tr.insertCell(-1); <BR>td3.innerHTML = mailArr [rowindex].name ; <BR>var td4 = tr.insertCell(-1); <BR>td4.innerHTML = mailArr[rowindex].date} <BR>//Um die Die Schaltfläche „Alle auswählen“ ist wirksam, nur um alle Tabellenzeilen zu durchlaufen <br><br>function seleAll(mailTab, isSel) { <BR>for (var i = 0; i < mailTab.rows.length; i ) { <BR> var tr = mailTab .rows[i]; <BR>tr.cells[0].childNodes[0].checked = isSel; ></ head> <br><body><table id="tb" border="1" style="border-collapse;"> ><th>Sequenz</th> <br><th>Titel</th> </tr> <br><!-- Schleife erhöhen--> ;td colspan="4"> <br><input id="selA" type="checkbox" /><label for="selA">select all</label> href="#" id="delSel">Delete</a></td> <br></table> ;/html> <br><br> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="JS erhält vollständig IE-Browserinformationen, einschließlich Typ, Version, Sprache usw._Javascript-Kenntnisse" href="http://m.php.cn/de/faq/12895.html">JS erhält vollständig IE-Browserinformationen, einschließlich Typ, Version, Sprache usw._Javascript-Kenntnisse</a></span><span>Nächster Artikel:<a class="dBlack" title="JS erhält vollständig IE-Browserinformationen, einschließlich Typ, Version, Sprache usw._Javascript-Kenntnisse" href="http://m.php.cn/de/faq/12897.html">JS erhält vollständig IE-Browserinformationen, einschließlich Typ, Version, Sprache usw._Javascript-Kenntnisse</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>