第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

具有主從關(guān)系的數(shù)據(jù)表 ajax xml 顯示

具有主從關(guān)系的數(shù)據(jù)表 ajax xml 顯示

烙印99 2022-06-09 17:27:23
通過那個(gè) jQ bootstrap 4 數(shù)據(jù)表網(wǎng)格（datatable.net），我希望以表格形式顯示以下 xml 文件：<?xml version="1.0" encoding="UTF-8"?> <persns>   <prsn>   <fname>Smith</fname>  <!-- first name-->  <lname>Milton</lname> <!-- last name -->   <age>44</age>   <e-mail>smilt@gmail.com</e-mail>   <phnmbr>3568236712</phnmbr>  <addrss>5th summer st, mntb</addrss>  <city>Portland</city> </prsn> <prsn>   <fname>Ken</fname>   <lname>Jackson</lname>   <age>37</age>  <e-mail>ken.jackson@yahoo.com</e-mail>   <phnmbr>2638762076</phnmbr>   <addrss>19th Penfield ave, brtcl</addrss>  <city>Kelowna</city> </prsn> <prsn>   <fname>Susan</fname>  <lname>Arkland</lname>   <age>48</age>  <e-mail>s.arklnd@hotmail.com</e-mail>  <phnmbr>50834219704</phnmbr>  <addrss>34th Mansfield st, sgtp</addrss>  <city>Raleigh</city> </prsn> <prsn>  <fname>Patsy</fname>   <lname>Brighton</lname>  <age>38</age>  <e-mail>patsy.brghton@gmail.com</e-mail>   <phnmbr>814522096358</phnmbr>   <addrss>12th Peel st, pnslv</addrss>  <city>Philadelphia</city> </prsn> <prsn>  <fname>John</fname>  <lname>Torg</lname>  <age>54</age>  <e-mail>john.torg@tzeus.com</e-mail>   <phnmbr>042197327784</phnmbr>  <addrss>27th north st, cnda</addrss>  <city>Penticton</city></prsn>但具有主詳細(xì)信息功能，如以下小提琴鏈接所示：https://jsfiddle.net/nnb97rh9/3/只有到那個(gè)小提琴才有.json數(shù)據(jù)！（我需要 .xml 顯示）相應(yīng)的（幾乎是功能性的）.js （通過主表我只想顯示以下表標(biāo)題：fname、lname、age、city 而其余部分將被隱藏
查看完整描述

1 回答

?
絕地?zé)o雙

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個(gè)贊

代碼存在多個(gè)問題，無法描述。以下是更正后的代碼。


請(qǐng)注意我使用 jsFiddle 機(jī)制來檢索 XML 文件，替換為您自己的。


(function () {

   function format(d) {

      return '<table cellpadding="3" cellspacing="0" border="0" style="padding-left: 40 px ">' +

         '<tr>' + '<td>e-mail addrss</td>' +

         '<td>' + d['e-mail'] + '</td>' + '</tr>' +

         '<tr>' + '<td>phn nmber</td>' +

         '<td>' + d['phnmbr'] + '</td>' + '</tr>' +

         '<tr>' + '<td>address</td>' +

         '<td>' + d['addrss'] + '</td>' + '</tr>' +

         '</table>';

   }


   var prstbl = $("#prsns").DataTable({

      columns: [

         {

            "class": 'details-control',

            "orderable": false,

            "data": null,

            "defaultContent": ''

         },

         {

            data: "fname"

         },

         {

            data: "lname"

         },

         {

            data: "age"

         },

         {

            data: "city"

         },

         {

            data: "e-mail",

            "visible": false

         },

         {

            data: "phnmbr",

            "visible": false

         },

         {

            data: "addrss",

            "visible": false

         }

      ]

   });


   $.ajax({

      type: "POST",

      url: "/echo/xml",

      data: {

            xml: '<?xml version="1.0" encoding="UTF-8" ?><persns>'

            + '<prsn><fname>Smith</fname><lname>Milton</lname><age>44</age><e-mail>smilt@gmail.com</e-mail><phnmbr>3568236712</phnmbr><addrss>5th summer st, mntb</addrss><city>Portland</city></prsn>'

            + '<prsn><fname>Ken</fname><lname>Jackson</lname><age>37</age><e-mail>ken.jackson@yahoo.com</e-mail><phnmbr>2638762076</phnmbr><addrss>19th Penfield ave, brtcl</addrss><city>Kelowna</city></prsn>'

            + '<prsn><fname>Susan</fname><lname>Arkland</lname><age>48</age><e-mail>s.arklnd@hotmail.com</e-mail><phnmbr>50834219704</phnmbr><addrss>34th Mansfield st, sgtp</addrss><city>Raleigh</city></prsn>'

            + '<prsn><fname>Patsy</fname><lname>Brighton</lname><age>38</age><e-mail>patsy.brghton@gmail.com</e-mail><phnmbr>814522096358</phnmbr><addrss>12th Peel st, pnslv</addrss><city>Philadelphia</city></prsn>'

            + '<prsn><fname>John</fname><lname>Torg</lname><age>54</age><e-mail>john.torg@tzeus.com</e-mail><phnmbr>042197327784</phnmbr><addrss>27th north st, cnda</addrss><city>Penticton</city></prsn>'

        + '</persns>',

      },

      dataType: 'xml',

      success: function (xml) {

         var prsns = $(xml).find("prsn");

         prsns.each(function (idx, prs) {

            var rowData = [];

            $(prs).children().each(function (j, chdnd) {

               rowData[$(chdnd).get(0).tagName] = $(chdnd).text();

            });

                prstbl.row.add(rowData);

        });


        prstbl.draw();       

      }

   });


    $('#prsns tbody').on('click', 'td.details-control', function () {

      var tr = $(this).closest('tr');

      var row = prstbl.row(tr);


      // if the row is already expanded, collapse it

      if (row.child.isShown())  {

            row.child.hide();

            tr.removeClass('shown');

        // if collapsed row, expand it             

      } else {

         row.child(format(row.data())).show();

         tr.addClass('shown');

      }

   });

})();

有關(guān)代碼和演示，請(qǐng)參閱更新的示例。


查看完整回答
反對(duì) 回復(fù) 2022-06-09
  • 1 回答
  • 0 關(guān)注
  • 101 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)