iT邦幫忙

0

HTML新增字串在某個元素之前

假設我有一串HTML如下

<table border="1">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr id="add">
    <td>在元素之前新增"字串"</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

因特殊需求
我想在#add之前加入字串</table><table border="1" class="class1">
如下所示:

<table border="1">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>

</table>
<table border="1" class="class1">
  
  <tr id="add">
    <td>在元素之前新增"字串"</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

沒有排版無所謂~
重點是要能夠加入

目前我找到有兩個類似的javascript語法
試過後都無法使用(其實不用事也知道無法使用,因為有GOOGLE一些相關範例,基本上不是我所需求的)
1.innerHTML -> 可以加字串~但只能加在元素裡面
2.insertBefore -> 雖可以加在元素之前~但是必須創建子元素~如div~不能直接加入字串~不符我的需求

請問還有其他方法可以嘗試嗎?

PS:我程式目的是為了將組好的table或HTML當成字串傳到別的地方使用

fillano iT邦超人 1 級 ‧ 2017-04-07 09:02:24 檢舉
用outerHTML。
#add::before { content:"</table><table border='1' class="class1'>"; }>CSS 元素指向器用過了嗎?
before方法是用過不行唷~

1 個回答

0
海綿寶寶
iT邦超人 1 級 ‧ 2017-04-07 12:31:11
最佳解答

最笨的方法如下

<html>
<head>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
String.prototype.splice = function(idx, rem, str) {
    return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};

var strHTML = document.documentElement.outerHTML;
var strFind = document.getElementById('add').outerHTML;
var strInsert = "</table><table border=\"1\" class=\"class1\">";
var idx = strHTML.indexOf(strFind);

alert(strHTML);

var strResult = strHTML.splice(idx, 0, strInsert);

alert(strResult);

}//]]> 

</script>

  
</head>

<body>
  <table border="1">
  <tbody><tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr id="add">
    <td>在元素之前新增"字串"</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</tbody></table>
  
</body>
</html>
看更多先前的回應...收起先前的回應...

我直接使用您的CODE
並且開debugger下去觀察
alert出來的值確實是我要的結果
可是他還是印出原本的HTML
沒有改變
但strResult確實有結果

您的方法是用搜尋的方式

那如果加上偵測高度呢?

我是打算設定table在一定的高度
然後用foreach去讀取每一個tr的高度
並且累計高度數值
當讀取到某一個tr累計的結果超過我設定的高度
就從那一個tr前面加上
</table><table border="1" class="class1">
目的是想分割成兩個table

其實做這個是要將對方給我的HTML字串轉成PDF
轉PDF的方法有
但是遇到表格內容多一點
就會出現跨頁的問題
表格會被切成一半
影響美觀

使用nobr="true"會使前一個表個拉長外框
所以想到乾脆切兩個table
並在該table加上style="page-break-before:always;"
來實現跨頁

我那個只是最笨的字串處理(搜尋、插入)
你現在想做的已經有點跨到Browser的領域了
遠超出我能力所及
就不奉陪了
期待別的高手出手

喔喔~~
原來如此~~
謝謝你~^^

我要發表回答

立即登入回答