js 遍歷html表格獲取表格內容

php js jquery功能片段#

唯一需求：表格id。

注意：因提交數據不能包含\n，所以要替換。呈現時可以替換回換行符。

/**

* 遍歷表格內容后返回數組

* @param string id 表格id

* @return Array 或者JSON

function getTableContent(id) {

var mytable = document.getElementById(id);

var data = [];

var tmpTxt;

for(var i = 0, rows = mytable.rows.length; i < rows; i++) {

for(var j = 0, cells = mytable.rows[i].cells.length; j < cells; j++) {

if(!data[i]) {

data[i] = new Array();

}

tmpTxt = mytable.rows[i].cells[j].innerHTML;

//tmpTxt = tmpTxt.replace(/<[^>]+>/gi,'');//過濾全部的html標簽，不包括內容

//tmpTxt =tmpTxt.replace(/\s/gi,'');

tmpTxt =tmpTxt.replace(/\n/gi,'<br>');

//data[i][j] = tmpTxt;

data[i][j] = tmpTxt.replace(/　/g, ""); //替換全角空格

}

//var JSONdata=data;

var JSONdata = JSON.stringify(data); //序列化數組JSON.stringify(data) 反序列化數組JSON.parse(data)

return JSONdata;

//return data;//返回數組

}

</script>

. Qt使用類

1. QWebChannel

2. QWebEngineView

二. Qt JS文件

1. qwebchannel.js 一般在安裝目錄下 \webchannel\shared\qwebchannel.js

三. Qt代碼

1. 定義交互類

#include <QWebEnginePage>

class JsClass: public QObject

{

Q_OBJECT

public:

explicit JsClass(QObject *parent = nullptr);

// qt 調用 js 函數

void qt_exec_js(QWebEnginePage* page, const QString& param) {

page->runJavaScript(QString("print_info(\"%1\")").arg(param)); //調用函數帶字符串類型參數一定需要加雙引號

//page->runJavaScript(QString("print_info(%1)").arg(12)); //調用函數參數類型為數字類型

//page->runJavaScript(QString("print_info()")); //調用函數無參

}

public slots:

// js 調用 qt 函數

void js_exec_qt(const QString& param) {

qDebug() << param;

}

};

2. 主函數代碼片段

QString url = "file:///E:/login.html";

QWebEngineView webView

webView.load(QUrl(url));

webView.show();

JsClass jsClass;

QWebChannel webChannel;

webChannel.registerObject("jsClass", &jsClass);

webView.page()->setWebChannel(&webChannel);

connect(&webView, &QWebEngineView::loadFinished, this, [](){ jsClass.qt_exec_js(webView.page(), "Hello word");});

//重要, 必須要等到 QWebEngineView 類把html加載完畢才能執行調用js的函數, 不然會出現找不到js函數的錯誤

四. HTML 和 JS 代碼

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

var jsClassIns;

// 獲取qt中 JsClass 類的實例

function initObj(){

if (typeof qt != 'undefined'){

new QWebChannel(qt.webChannelTransport, function(channel){

jsClassIns= channel.objects.jsClass; //名字和 webChannel.registerObject("jsClass", &jsClass); 第一個參數保持一致

});

}

// 調用Qt函數

function exec_qt(param){

if(typeof jsClassIns != 'undefined'){

jsClassIns.js_exec_qt(param);

}

//Qt 調用 js

function print_info(param) {

document.getElementById("demo").innerHTML = param;

exec_qt("Hello China"); //當Qt調用了 js, Js 也調用Qt函數

}

initObj();

</script>

我們以往看到的頁面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我將介紹如何使用純HTML打造屬于自己的實用效果。

1. 折疊手風琴

使用Details和Summary標簽可以創建沒有JavaScript代碼的可折疊手風琴。

效果：

HTML

<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details>

<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>

CSS

* {
 font-size: 1rem;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
details {
 border: 1px solid #aaa;
 border-radius: 4px;
 padding: .5em .5em 0;
}
summary {
 font-weight: bold;
 margin: -.5em -.5em 0;
 padding: .5em;
}
details[open] {
 padding: .5em;
}
details[open] summary {
 border-bottom: 1px solid #aaa;
 margin-bottom: .5em;
}

瀏覽器支持：

2. 進度條

該Meter和Progress 的元素標簽的基礎上，你可以調整屬性呈現在屏幕上的進度條。進步有兩個屬性：max和value校準進度條，而Meter標簽提供了更多的定制屬性。

效果：

HTML:

<label for="upload">Upload progress:</label>
<meter id="upload" name="upload"
 min="0" max="100"
 low="33" high="66" optimum="80"
 value="50">
 at 50/100
</meter>
<hr/>
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>

CSS:

body {
 margin: 50px;
}
label {
 padding-right: 10px;
 font-size: 1rem;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

瀏覽器支持：

3. 更多輸入類型

在定義輸入元素時，您要知道現代瀏覽器已經允許您指定足夠多的輸入類型了。除了你應該已經知道text，email，password，number這些類型外，還有下面的這些。

date 將顯示本機日期選擇器
datetime-local 更豐富的日期和時間選擇器
month 友好的月份選擇器
tel會讓你輸入一個電話號碼。在移動瀏覽器上打開它，彈出的鍵盤將發生變化，同樣的email也是如此。
search 將輸入文本框設置為友好的搜索樣式。

效果：

HTML:

<label for="date">Enter date:</label>
<input type="date" id="date"/>
<label for="datetime">Enter date & time:</label>
<input type="datetime-local" id="datetime"/>
<label for="month">Enter month:</label>
<input type="month" id="month"/>
<label for="search">Search for:</label>
<input type="search" id="search"/>
<label for="tel">Enter Phone:</label>
<input type="tel" id="tel">

CSS:

input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}

各種新輸入類型的MDN文檔非常廣泛且信息量很大。此外，檢查移動輸入類型以了解用戶在移動瀏覽器上時這些輸入元素的鍵盤行為。

4. 視頻和音頻

video和audio元素雖然現在已經成為HTML規范的一部分，但是你一樣會驚訝于你可以使用video標簽在屏幕上渲染出一個體面的視頻播放器。

<video controls>
 <source src="https://addpipe.com/sample_vid/short.mp4" 
 poster="https://addpipe.com/sample_vid/poster.png">
 Sorry, your browser doesn't support embedded videos.
</video

視頻標記中值得注意的一些屬性包括：

poster 下載視頻時要顯示封面的URL
preload 是否在頁面加載時預加載整個視頻
autoplay 視頻是否應該在頁面加載后自動播放

瀏覽器支持：

5. 校對文本

當你想顯示歷史編輯及校對的情況時，blockquote，del和ins元素標簽可以派上用場了。

示例：

HTML：

<blockquote>
 There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

CSS：

del {
 text-decoration: line-through;
 background-color: #fbb;
 color: #555;
}
ins {
 text-decoration: none;
 background-color: #d4fcbc;
}
blockquote {
 padding-left: 15px;
 line-height: 30px;
 border-left: 3px solid #d7d7db;
 font-size: 1rem;
 background: #eee;
 width: 200px;
}

6.更統一的引號

由于中英文引號的不同，使用<q>標記可以讓您很好的解決這個問題，它可使你的內容在大多數瀏覽器上更一致地呈現引號。

HTML：

Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p>
<hr/>
Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>

CSS：

body {
 margin: 50px;
}
q {
 font-style: italic;
 color: #000000bf;
}

7. 鍵盤標簽

<kbd>標簽應該是一個少為人知的冷門標簽，但這個能使用更好的方式來說明組合鍵的樣式。

HTML：

<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>

CSS：

body {
 margin: 50px;
}
kbd {
 display: inline-block;
 margin: 0 .1em;
 padding: .1em .6em;
 font-size: 11px;
 line-height: 1.4;
 color: #242729;
 text-shadow: 0 1px 0 #FFF;
 background-color: #e1e3e5;
 border: 1px solid #adb3b9;
 border-radius: 3px;
 box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
 white-space: nowrap;
}

8.使用HTML共享代碼

使用figcaption pre code標簽，您可以使用純HTML和CSS呈現出不錯的代碼片段。

HTML：

<figure>
 <figcaption>
 Defining a css <code>color</code> property for a class called 'golden'
 </figcaption>
 
 <pre>
 <code>
 .golden {
 color: golden;
 }
 </code>
 </pre>
</figure>

CSS：

pre {
 background-color: #ffbdbd;
}

這篇文章也只是拋磚引玉，也許您也有更多私藏的使用技巧，不妨也貼出來分享給大家。

另外，如果您不僅僅限于以上的效率，希望有更完整的動態功能。

例如：您希望在您的頁面中加入Excel功能，可以嘗試葡萄城的 純前端表格控件SpreadJS，再或者您希望為用戶提供更完備、更高效的前端UI控件，您也不妨可以試試 WijmoJS，相信它們都能為您的應用增色不少。

關于葡萄城
賦能開發者！葡萄城公司成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。

在線咨詢

上一篇：表單設計中“星號（*）”的使用分析
下一篇：HTML + CSS 為何得不到編程界的認可？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

js 遍歷html表格 獲取表格內容

1. 折疊手風琴

2. 進度條

3. 更多輸入類型

4. 視頻和音頻

5. 校對文本

6.更統一的引號

7. 鍵盤標簽

8.使用HTML共享代碼

您的項目需求

js 遍歷html表格獲取表格內容