javascript - 制表符/以编程方式正确的表格数据(从 HTML 加载)是Tabulator
从未知 HTML <table>
(具有 TH 标头,因此所有列都有名称)创建的。
因此,没有办法触发任何mutator
or callback
... except htmlImported:function()
。
问题描述
是Tabulator
从未知 HTML <table>
(具有 TH 标头,因此所有列都有名称)创建的。
因此,没有办法触发任何mutator
or callback
... except htmlImported:function()
。
因为HTML <table>
包含格式错误的 DATE 值,所以我需要访问所有fields
内容rows
以发现并更正这些值。
整个代码是:
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.3.0/dist/css/">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>
</head><body>
<table id="tablexxx">
<tr>
<th>Name</th><th>Favorite Color</th><th>date</th></tr>
<tr><td>Bob</td><td>Yellow</td><td>1/1/2001</td>
</tr>
<tr><td>Michelle</td><td>Purple</td><td>2/1/2000</td>
</tr>
</table>
<div id="tablexxx"></div>
<script>
var tablexxx = new Tabulator("#tablexxx", {});
var rows = tablexxx.getRows();
rows.forEach(function(row)
{ var rowData = row.getData();
rowData.forEach(function(cell) // <<< HOW TO DO IT RIGHT???
{
// get row field NAME
var field = cell.name; // <<< HOW TO DO IT RIGHT???
if(field.indexOf("date") >= 0)
{
// get colum field VALUE
var date = cell.value; // <<< HOW TO DO IT RIGHT???
// make new value using proper format
var ndate = date[0] + date[1] + date[2]; // TODO
// update row with {"date":"01/02/2000"}
row.update("{" + field + ":" + ndate + "}");
}
});
});
</script></body></html>
有人可以告诉我如何处理上述滞后"DO IT RIGHT"
的指定<script>
部分吗?
如何在 React 中将字符串呈现为 HTML
我正在使用 axios 在 ReactJS 中调用 API。调用成功,但输出如下所示:
Bitcoin has inspired other alternative currencies such as
<a href="https://www.coingecko.com/en/coins/litecoin">Litecoin</a>,
<a href="https://www.coingecko.com/en/coins/peercoin">Peercoin</a>
如何将其呈现为HTML而不是字符串?这是我的代码
import React from 'react';
import axios from 'axios';
class API extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
data: []
}
}
componentDidMount() {
axios.get('https://api.coingecko.com/api/v3/coins/bitcoin?localization=false')
.then(res => {
const data = res.data;
console.log(res.data);
this.setState({ data, loading: false })
})
}
render() {
return (
<div>
{this.state.loading ? <p>Loading..</p> :
<p>{this.state.data.description.en}</p>
}
</div>
);
}
}
export default API;
解决方案
我希望我明白你想要完成什么......
如果 < 10,则用 0 填充日期和月份。
首先获取包含数据字段的列,然后遍历该列中的每个单元格,拆分日期并更新单元格。我实际上不知道为什么表中有一个空行(这就是if (value)
目的)。它是由制表符插入的东西。
function pad(num, size) {
var s = num + "";
while (s.length < size) s = "0" + s;
return s;
}
var tablexxx = new Tabulator("#tablexxx", {});
var dateColumn = tablexxx.getColumn("date");
for (var cell of dateColumn.getCells()) {
var value = cell.getValue();
if (value) {
value = value.split("/")
cell.setValue(pad(value[0], 2) + "/" + pad(value[1], 2) + "/" + value[2]);
}
}
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.3.0/dist/css/">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>
<table id="tablexxx">
<tr>
<th>Name</th><th>Favorite Color</th><th>date</th></tr>
<tr><td>Bob</td><td>Yellow</td><td>1/1/2001</td>
</tr>
<tr><td>Michelle</td><td>Purple</td><td>2/1/2000</td>
</tr>
</table>
推荐阅读
- assembly - 我无法弄清楚为什么这段代码会导致分段错误
- firebase - 按值长度查询 Firestore
- python - 使用 python 抓取目标搜索结果
- ruby-on-rails - what does default_scope -> { kept } in rails means?
- javascript - 每次点击都会删除我的文本内容,我如何保持每次点击的价值?
- python - 每次在同一运行期间打开屏幕时如何触发 on_pre_enter 事件?
- raku - Raku mixin 如何与运算符重载一起工作?
- python - 如果变量没有,我们可以使用变量调用方法吗?
- r - 使用 JuliaCall 将 NA 从 R 传递给 Julia 函数
- ckeditor - ckeditor 在 text 前后添加 text 类型的 unwantdd 标签
是Tabulator
从未知 HTML <table>
(具有 TH 标头,因此所有列都有名称)创建的。
因此,没有办法触发任何mutator
or callback
... except htmlImported:function()
。
问题描述
是Tabulator
从未知 HTML <table>
(具有 TH 标头,因此所有列都有名称)创建的。
因此,没有办法触发任何mutator
or callback
... except htmlImported:function()
。
因为HTML <table>
包含格式错误的 DATE 值,所以我需要访问所有fields
内容rows
以发现并更正这些值。
整个代码是:
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.3.0/dist/css/">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>
</head><body>
<table id="tablexxx">
<tr>
<th>Name</th><th>Favorite Color</th><th>date</th></tr>
<tr><td>Bob</td><td>Yellow</td><td>1/1/2001</td>
</tr>
<tr><td>Michelle</td><td>Purple</td><td>2/1/2000</td>
</tr>
</table>
<div id="tablexxx"></div>
<script>
var tablexxx = new Tabulator("#tablexxx", {});
var rows = tablexxx.getRows();
rows.forEach(function(row)
{ var rowData = row.getData();
rowData.forEach(function(cell) // <<< HOW TO DO IT RIGHT???
{
// get row field NAME
var field = cell.name; // <<< HOW TO DO IT RIGHT???
if(field.indexOf("date") >= 0)
{
// get colum field VALUE
var date = cell.value; // <<< HOW TO DO IT RIGHT???
// make new value using proper format
var ndate = date[0] + date[1] + date[2]; // TODO
// update row with {"date":"01/02/2000"}
row.update("{" + field + ":" + ndate + "}");
}
});
});
</script></body></html>
有人可以告诉我如何处理上述滞后"DO IT RIGHT"
的指定<script>
部分吗?
我正在使用 axios 在 ReactJS 中调用 API。调用成功,但输出如下所示:
Bitcoin has inspired other alternative currencies such as
<a href="https://www.coingecko.com/en/coins/litecoin">Litecoin</a>,
<a href="https://www.coingecko.com/en/coins/peercoin">Peercoin</a>
如何将其呈现为HTML而不是字符串?这是我的代码
import React from 'react';
import axios from 'axios';
class API extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
data: []
}
}
componentDidMount() {
axios.get('https://api.coingecko.com/api/v3/coins/bitcoin?localization=false')
.then(res => {
const data = res.data;
console.log(res.data);
this.setState({ data, loading: false })
})
}
render() {
return (
<div>
{this.state.loading ? <p>Loading..</p> :
<p>{this.state.data.description.en}</p>
}
</div>
);
}
}
export default API;
我希望我明白你想要完成什么......
如果 < 10,则用 0 填充日期和月份。
首先获取包含数据字段的列,然后遍历该列中的每个单元格,拆分日期并更新单元格。我实际上不知道为什么表中有一个空行(这就是if (value)
目的)。它是由制表符插入的东西。
function pad(num, size) {
var s = num + "";
while (s.length < size) s = "0" + s;
return s;
}
var tablexxx = new Tabulator("#tablexxx", {});
var dateColumn = tablexxx.getColumn("date");
for (var cell of dateColumn.getCells()) {
var value = cell.getValue();
if (value) {
value = value.split("/")
cell.setValue(pad(value[0], 2) + "/" + pad(value[1], 2) + "/" + value[2]);
}
}
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.3.0/dist/css/">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>
<table id="tablexxx">
<tr>
<th>Name</th><th>Favorite Color</th><th>date</th></tr>
<tr><td>Bob</td><td>Yellow</td><td>1/1/2001</td>
</tr>
<tr><td>Michelle</td><td>Purple</td><td>2/1/2000</td>
</tr>
</table>