我正在建立一个网站,可以将MS.Excel或MS.Word的粘贴表复制到文本区域。
15.00 1.35 3.58
12.0s5o9 123.56 5.15
我想从带有ID的每个单元中获取价值。例如:Id11 = 15.00,Id12 = 1.35,Id21 = 12.0s5o9 ...
然后检查数字是否包含字母,然后突出显示该单元格。例如:Id21 = 12.0s5o9,应突出显示。
我自己尝试了一些代码之后,我更改为尝试使用“ tinymce”文本编辑器,如下所示。
我写的HTML代码:
<form id="converted_form">
<textarea id="content" name="content"></textarea>
<input type="button" id="btn" value="Submit" />
</form>
<script language="javascript" src="check.js"></script>
我在Javascript中写道:
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){ var content =
tinymce.activeEditor.getContent()
我得到的是:
<table border="0" width="156" cellspacing="0" cellpadding="0"><colgroup><col width="72" /> <col width="49" /> <col width="35" /></colgroup>
<tbody>
<tr>
<td align="right" width="72" height="20">15</td>
<td align="right" width="49">1.35</td>
<td align="right" width="35">3.58</td>
</tr>
<tr>
<td height="20"> 12.0s5o9</td>
<td align="right">123.56</td>
<td align="right">5.15</td>
</tr>
</tbody>
</table>
这不包含每个单元格的ID,我可以检查并突出显示包含字母的单元格。
任何人都可以分享想法以获得单元格值和ID;或除tinymce以外的其他方式?
答案 0 :(得分:0)
这是一个3 x 3的表,该表检查每个输入是否带有字母e
。如果每个单元格都有字母e
,则会提醒单词“ Common Letter!”,您可以将其替换为所需的任何字母。
var checked = [];
function check(elem) {
var elemArr = elem.value.split("");
if (elemArr.includes("e") {
if (!(checked.includes(elem.id))) {
checked.push(elem.id);
}
}
if (checked.length >= 9) {
//Do your thing here
alert("Common Letter!");
}
}
<table>
<tr>
<td>
<input id="input-1-1" type="text" oninput="check(this")/>
</td>
<td>
<input id="input-1-2" type="text" oninput="check(this") />
</td>
<td>
<input id="input-1-3" type="text" oninput="check(this") />
</td>
</tr>
<tr>
<td>
<input id="input-2-1" type="text" oninput="check(this") />
</td>
<td>
<input id="input-2-2" type="text" oninput="check(this") />
</td>
<td>
<input id="input-2-3" type="text" oninput="check(this") />
</td>
</tr>
<tr>
<td>
<input id="input-3-1" type="text" oninput="check(this") />
</td>
<td>
<input id="input-3-2" type="text" oninput="check(this") />
</td>
<td>
<input id="input-3-3" type="text" oninput="check(this") />
</td>
</tr>
</table>
答案 1 :(得分:0)
您将没有ID,因为该信息不会从粘贴中传递出来。不过,我们可以处理您从tinyMCE获得的表。
您的要求尚不完全清楚,但以下几点可以使您朝正确的方向前进
//From tinymce.activeEditor.getContent()
var tableString ='<table border="0" width="156" cellspacing="0" cellpadding="0"><colgroup><col width="72" /> <col width="49" /> <col width="35" /></colgroup><tbody><tr><td align="right" width="72" height="20">15</td><td align="right" width="49">1.35</td><td align="right" width="35">3.58</td></tr><tr><td height="20"> 12.0s5o9</td><td align="right">123.56</td><td align="right">5.15</td></tr></tbody></table>';
//we could add the table straight to the DOM, but as
//we aren't sure as to what you wnat to do lets create a
//"virtual" DOM node
var dv = document.createElement('div');
//Add Table string to out holder node
dv.innerHTML = tableString;
//Get the actual table
var tableDOM = dv.firstChild;
//get table cells
var tds = tableDOM.querySelectorAll("td");
var total = 0.0;
//Loop through the cells.
for(var i = 0; i < tds.length; i++)
{
var val = tds[i].innerText.trim();
//numeric check
if(isNaN(val) || isNaN(parseFloat(val))) {
//Highlite non numeric cell -you could add a class here instead
tds[i].style.color = "#F00";
}else{
//Add numeric cells to total
total += parseFloat(val);
}
}
//Log the toal
console.log(total);
//Add the Table to the visible DOM
document.getElementById("result").appendChild(tableDOM);
//Or if you want to replace the contents of your editor:
//tinymce.activeEditor.setContent(tableDOM.outerHTML);
<div id="result"></div>
答案 2 :(得分:0)
<td>
如果我正确理解,您的目标是突出显示内容中包含字母的任何<td>
。以下演示中有3个功能:
processTable(
<table>
的字符串或对象)
#id
<tr>
分配一个+increment_of_row
#id
+'-'<td>
+increment_of_row
分配一个+incrment_of_cell
<td>s'
内容,如果找到一个字母,它将突出显示该<td>
金色的背景。它通过使用第二个函数来确定内容是否为数字:
xNaN(
<TD>
内容)
object = {id: "#ID_of_<TD>", content: "String" or Number}
最后2个列表项不是真正必需的,最后一个功能也是如此:
getCellData(对象数组,CellID)
该功能超出了问题的范围,为了完整起见而包含在内。
详细信息在演示中被评论
/*
Pass a string that represents the targeted <table>
ex. "table" for the tag, "#tableID" or ".tableClass"
or create a reference to targeted <table>
ex. var table = document.querySelector("table');
*/
function processTable(node) {
var table = typeof node === 'string' ? document.querySelector(node) : node;
// Collect all rows of table
var Rows = table.rows;
// Get the total number of rows in table
var rowQty = Rows.length;
// Get the total number of cells in a row
var rowOfCells = table.rows[0].cells.length;
// Declare an empty Array
var data = [];
/*
This for loop generates and assigns an #ID for each <tr>
*/
for (let r = 0; r < rowQty; r++) {
var tr = Rows[r];
tr.id = 'row' + r;
/*
This for loop...
*/
for (let c = 0; c < rowOfCells; c++) {
// Declare an empty Object
var obj = {};
// Declare nfo
var nfo;
// Get cell
var td = Rows[r].cells[c];
// Assign <td> a unique #ID
td.id = 'cel' + r + '-' + c;
// Create a property on Object called "id"
obj.id = td.id;
// Extract text from <td>
var txt = td.textContent;
// if content is not a number...
if (xNaN(txt)) {
// Set the <td> background to gold
td.style.background = 'gold';
// Copy the content and trim the whitespace
nfo = txt.trim();
// But if it is a number...
} else {
// ...copy the content and convert it into a real Number
nfo = parseFloat(txt);
}
// Create a property on Object called "content"
obj.content = nfo;
// Add the Object to the Array called "data"
data.push(obj);
}
}
// The Array will be the result
return data;
}
// This is a utility function that determines if an object is a number
function xNaN(x) {
var n = Number(x);
return n !== n;
};
/*
Assign a variable to the result of processTable() passing 'table' string
*/
var tableData = processTable('table');
console.log(tableData);
/*
tableData is an Array of Objects with the following pattern:
var tableData = [{id: "#ID of <TD>", content: "string or number"}, {...}, {...}];
*/
// Example: To access the data in #cel1-1:
function getCellData(arrayObj, cellID) {
var obj = arrayObj.find(prop => prop.id === cellID);
var idx = arrayObj.indexOf(obj);
var val = arrayObj[idx].content;
return `The content of td#${cellID} is: ${val}`;
}
var content = getCellData(tableData, 'cel1-1');
console.log(content);
table,
td {
border: 1px solid grey;
}
/* This is for demo purposes */
.as-console-wrapper {
width: 350px;
min-height: 100%;
margin-left: 45%;
background: #000;
color: lime;
}
.as-console-row.as-console-row {
background: #000;
}
.as-console-row.as-console-row::after {
content: '';
padding: 0;
margin: 0;
border: 0;
width: 0;
}
<table border="0" width="156" cellspacing="0" cellpadding="0">
<colgroup>
<col width="72" />
<col width="49" />
<col width="35" />
</colgroup>
<tbody>
<tr>
<td align="right" width="72" height="20">15</td>
<td align="right" width="49">1.35</td>
<td align="right" width="35">3.58</td>
</tr>
<tr>
<td height="20"> 12.0s5o9</td>
<td align="right">123.56</td>
<td align="right">5.15</td>
</tr>
</tbody>
</table>