HTML、Javascript:检查并从输入的复制粘贴的表格中获取数据
HTML、Javascript:检查并从输入的复制粘贴的表格中获取数据
提问于 2018-10-15 07:29:49
我正在建立一个网站，可以复制粘贴表格从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‘texteditor，如下所示。
我写的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之外的其他方式？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-15 11:41:42
你将不会有一个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>
Stack Overflow用户
发布于 2018-10-15 08:20:07
这是一个3x3的表格，它检查每个输入是否都有字母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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52807983
复制相关文章
相似问题