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

html javascript css3

king742171 2017-04-07 08:34:13 ‧ 8801 瀏覽

分享至

假設我有一串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。

窮嘶發發發 iT邦高手 1 級 ‧ 2017-04-07 09:54:36 檢舉

#add::before { content:"</table><table border='1' class="class1'>"; }>CSS 元素指向器用過了嗎?

king742171 iT邦新手 2 級 ‧ 2017-04-07 13:51:20 檢舉

before方法是用過不行唷~

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

海綿寶寶

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>

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

king742171 iT邦新手 2 級 ‧ 2017-04-07 13:43:29 檢舉

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

king742171 iT邦新手 2 級 ‧ 2017-04-07 13:48:50 檢舉

您的方法是用搜尋的方式

那如果加上偵測高度呢？

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

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

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

海綿寶寶 iT邦大神 1 級 ‧ 2017-04-07 17:30:10 檢舉

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

king742171 iT邦新手 2 級 ‧ 2017-04-10 08:07:22 檢舉

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

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙