访问`<td>`

Question

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

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

Answer 1

这是一个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>

Answer 2

您将没有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">&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>`

如果我正确理解，您的目标是突出显示内容中包含字母的任何<td>。以下演示中有3个功能：

processTable（<table>的字符串或对象）

使用此模式“行” #id

<tr>

+increment_of_row

使用此模式“ cel” #id +'-'<td>

+increment_of_row

+incrment_of_cell

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

xNaN（<TD>内容）
否则，它将获取内容（它是一个String，因为用引号引起来不是数字），然后将其转换为实数。

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

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">&nbsp;&nbsp;&nbsp; 12.0s5o9</td>
      <td align="right">123.56</td>
      <td align="right">5.15</td>
    </tr>
  </tbody>
</table>

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

3 个答案:

访问`<td>`

演示

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

3 个答案:

访问<td>

演示

访问`<td>`