HTML、Javascript：检查并从复制粘贴的输入中获取数据 table

Question

我正在构建一个网站，可以将 table 从 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">&nbsp;&nbsp;&nbsp; 12.0s5o9</td>
<td align="right">123.56</td>
<td align="right">5.15</td>
</tr>
</tbody>
</table>

这不包含每个单元格的 ID，以便我检查并突出显示包含字母的单元格。
任何人都可以分享想法来获得细胞价值和身份吗？或者除 tinymce 之外的其他方式？

Answer 1

这是一个 3 x 3 table，它检查每个输入是否有字母 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>

Answer 2

您不会有 id，因为该信息不是来自粘贴。不过，我们可以使用您从 tinyMCE 获得的 table。

您的要求不是很清楚，但以下内容应该可以帮助您朝着正确的方向前进

//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">&nbsp;&nbsp;&nbsp; 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>

Answer 3

访问`<td>`

如果我理解正确的话，您的 objective 是突出显示内容中包含任何字母的任何 <td>。下面的demo中有3个函数：

processTable(String or Object of <table>)

使用此模式 "row"+increment_of_row

<tr>

#id

使用此模式 "cel"+increment_of_row+'-'+incrment_of_cell[=59= 为每个 <td> 分配一个 #id ]

检查每个 <td>s' 内容，如果找到字母，它会突出显示 <td> 金色的背景。它使用第二个函数确定内容是否为数字：

xNaN(<TD> Content)

否则，它获取内容（它是一个字符串，因为它被引用而不是一个数字）并将其转换为一个实数。

它 returns 一个对象数组 -- 每个对象都有 2 个属性：

object = {id: "#ID_of_<TD>", content: "String" or Number}

最后 2 个列表项不是真正必需的，最后一个函数也是如此：

getCellData(Array of Objects, CellID)

该功能超出了问题的范围，为了完整起见而包含在内。

演示

详情在demo中评论

/* 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>

HTML、Javascript：检查并从复制粘贴的输入中获取数据 table

HTML, Javascript: check and get data from an input copy-pasted table

javascript

html-table

extract

访问`<td>`

演示

HTML、Javascript：检查并从复制粘贴的输入中获取数据 table

HTML, Javascript: check and get data from an input copy-pasted table

javascript

html-table

extract

访问<td>

演示

访问`<td>`