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

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

使用 Javascript 在 textarea 中顯示表格代碼

使用 Javascript 在 textarea 中顯示表格代碼

慕妹3242003 2023-02-17 17:57:00
我想在頁(yè)面加載時(shí)在 textarea 中顯示表格代碼。我的以下代碼為我執(zhí)行此操作，但我希望我顯示的代碼必須具有開(kāi)始和結(jié)束表格標(biāo)記。請(qǐng)告訴我該怎么做！var elem = document.getElementById("myTable");            var targetId = "_hiddenCopyText_";            var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";            var origSelectionStart, origSelectionEnd;                            target = elem;                origSelectionStart = elem.selectionStart;                origSelectionEnd = elem.selectionEnd;                     document.getElementById("showTableCode").value=elem.innerHTML.replaceAll("<tbody>", '').replaceAll("</tbody>", '').replace(/(\r\n|\r|\n){2,}/g, '\n');table, th, td {  border: 1px solid black;  border-collapse: collapse;}<html><head></head><body onload="myFunction()"><center><table id="myTable">  <tr>    <th>Company</th>    <th>Contact</th>    <th>Country</th>  </tr>  <tr>    <td>Alfreds Futterkiste</td>    <td>Maria Anders</td>    <td>Germany</td>  </tr>  <tr>    <td>Centro comercial Moctezuma</td>    <td>Francisco Chang</td>    <td>Mexico</td>  </tr></table></center><br><center><b>Your Table Code:</b><br><textarea cols="50" id="showTableCode" rows="10"></textarea></center></body></html>
查看完整描述

3 回答

?
largeQ

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

您可以parentNode像這樣簡(jiǎn)單地獲取表的：

elem.parentNode

然后它將為您提供整個(gè)表格 HTML 代碼，因?yàn)槟赶蛩母讣?jí)并獲取它的innerHTML.

所以你的最終代碼應(yīng)該是這樣的：

var elem = document.getElementById("myTable");


var targetId = "_hiddenCopyText_";

var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";

var origSelectionStart, origSelectionEnd;

target = elem;

origSelectionStart = elem.selectionStart;

origSelectionEnd = elem.selectionEnd;


document.getElementById("showTableCode").value = elem.parentNode.innerHTML.replaceAll("<tbody>", '').replaceAll("</tbody>", '').replace(/(\r\n|\r|\n){2,}/g, '\n');

table,

th,

td {

  border: 1px solid black;

  border-collapse: collapse;

}

<html>


<head>

</head>


<body>


  <center>

    <table id="myTable">

      <tr>

        <th>Company</th>

        <th>Contact</th>

        <th>Country</th>

      </tr>

      <tr>

        <td>Alfreds Futterkiste</td>

        <td>Maria Anders</td>

        <td>Germany</td>

      </tr>

      <tr>

        <td>Centro comercial Moctezuma</td>

        <td>Francisco Chang</td>

        <td>Mexico</td>

      </tr>

    </table>

  </center>


  <br>


  <center>

    <b>Your Table Code:</b><br>

    <textarea cols="50" id="showTableCode" rows="10"></textarea>

  </center>



</body>


</html>

或者通過(guò)一種更簡(jiǎn)單的方法，您可以使用outerHTML而不是來(lái)執(zhí)行此操作innerHTML。它也提供了你想要的塊的父包裝元素。

所以整個(gè)事情將是這樣的：

var elem = document.getElementById("myTable");


var targetId = "_hiddenCopyText_";

var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";

var origSelectionStart, origSelectionEnd;

target = elem;

origSelectionStart = elem.selectionStart;

origSelectionEnd = elem.selectionEnd;


document.getElementById("showTableCode").value = elem.outerHTML.replaceAll("<tbody>", '').replaceAll("</tbody>", '').replace(/(\r\n|\r|\n){2,}/g, '\n');

table,

th,

td {

  border: 1px solid black;

  border-collapse: collapse;

}

<html>


<head>

</head>


<body>


  <center>

    <table id="myTable">

      <tr>

        <th>Company</th>

        <th>Contact</th>

        <th>Country</th>

      </tr>

      <tr>

        <td>Alfreds Futterkiste</td>

        <td>Maria Anders</td>

        <td>Germany</td>

      </tr>

      <tr>

        <td>Centro comercial Moctezuma</td>

        <td>Francisco Chang</td>

        <td>Mexico</td>

      </tr>

    </table>

  </center>


  <br>


  <center>

    <b>Your Table Code:</b><br>

    <textarea cols="50" id="showTableCode" rows="10"></textarea>

  </center>



</body>


</html>


查看完整回答
反對(duì) 回復(fù) 2023-02-17
?
四季花海

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

您可以使用outerHTML而不是innerHTML：


elem = document.getElementById("myTable");


            var targetId = "_hiddenCopyText_";

            var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";

            var origSelectionStart, origSelectionEnd;

                            target = elem;

                origSelectionStart = elem.selectionStart;

                origSelectionEnd = elem.selectionEnd;

            

         document.getElementById("showTableCode").value=elem.outerHTML.replaceAll("<tbody>", '').replaceAll("</tbody>", '').replace(/(\r\n|\r|\n){2,}/g, '\n');



查看完整回答
反對(duì) 回復(fù) 2023-02-17
?
慕仙森

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

你的意思是這樣的：


var table = document.getElementById("myTable");

let area = document.getElementById("showTableCode");

// For the origins of the format function please check this SO question https://stackoverflow.com/questions/3913355/how-to-format-tidy-beautify-in-javascript/3966736 

function format(html) {

  var tab = '  ';

  var result = '';

  var indent = '';


  html.split(/>\s*</).forEach(function(element) {

    if (element !== "tbody") {

      if (element.match(/^\/\w/)) {

        indent = indent.substring(tab.length);

      }


      result += indent + '<' + element + '>\r\n';


      if (element.match(/^<?\w[^>]*[^\/]$/)) {

        indent += tab;

      }

    }


  });


  return result.substring(1, result.length - 3);

}


area.value = format(table.outerHTML);

table,

th,

td {

  border: 1px solid black;

  border-collapse: collapse;

}

<html>


<head>

</head>


<body>


  <center>

    <table id="myTable">

      <tr>

        <th>Company</th>

        <th>Contact</th>

        <th>Country</th>

      </tr>

      <tr>

        <td>Alfreds Futterkiste</td>

        <td>Maria Anders</td>

        <td>Germany</td>

      </tr>

      <tr>

        <td>Centro comercial Moctezuma</td>

        <td>Francisco Chang</td>

        <td>Mexico</td>

      </tr>

    </table>

  </center>


  <br>


  <center><b>Your Table Code:</b><br>

    <textarea cols="50" id="showTableCode" rows="10">

</textarea></center>



</body>


</html>


查看完整回答
反對(duì) 回復(fù) 2023-02-17
  • 3 回答
  • 0 關(guān)注
  • 223 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(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)