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表格获取表格内容