HTML, Javascript: проверка и получение данных из таблицы, вставленной во вставленную копию

Question

Я создаю веб-сайт, который может скопировать и вставить таблицу из MS.Excel или MS.Word в текстовую область.

15.00 1.35 3.58  
12.0s5o9 123.56 5.15

Я хочу получить значение из каждой ячейки с идентификатором.Пример: Id11 = 15,00, Id12 = 1,35, Id21 = 12,0s5o9 ...
Затем проверьте число, если оно содержит букву, затем выделите эту ячейку.Пример: Id21 = 12.0s5o9, который должен быть выделен.

После того, как я сам попробовал несколько кодов, я решил попробовать использовать texteditor '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>

Это не содержит идентификатор каждой ячейки, чтобы я мог проверить и выделить ячейку, содержащую букву.
Может кто-нибудь поделиться идеей, чтобы получить ячейкузначение и идентификатор;или другой способ кроме tinymce?

Answer 1

У вас не будет идентификатора как такового, так как эта информация не попадает из пасты.Хотя мы можем работать с таблицей, которую вы получаете от 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 2

Доступ <td>

Если я правильно понял, ваша цель - выделить любые символы <td>, в которых есть буквы.В следующей демонстрации есть 3 функции:

processTable (строка или объект <table>)

• Назначение #id каждому <tr> с этим шаблоном "строка" +increment_of_row
• Назначает #id каждому <td> с этим шаблоном "чел" +increment_of_row +'-' +incrment_of_cell
• Проверяет каждое содержимое <td>s' и, если оно находит букву, оно подсвечивает фон этого <td> золота.Он определяет, является ли содержимое числом, используя вторую функцию:

  xNaN (<TD> Content)

• В противном случае он принимает содержимое(это строка, потому что она заключена в кавычки, а не число) и преобразует ее в реальное число.
• Возвращает массив объектов - каждый объект имеет 2 свойства:

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

Последние 2 элемента списка на самом деле не требуются, как и последняя функция:

getCellData (Array of Objects, 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>

Answer 3

Вот таблица 3 на 3, которая проверяет, имеет ли каждый вход букву e.Если в каждой ячейке есть буква e, она предупреждает слова «Общая буква!», Которые вы можете заменить на все, что захотите.

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>