отдельные <td>точные данные для <tags>

Question

Я анализирую HTML и хочу получить только данные из элементов таблицы.Но мой текущий код отображает больше, чем я хочу, включая теги и т. Д. Пожалуйста, проверьте скриншот для более четкого представления. Скриншот таблицы здесь, пожалуйста

Вывод моего текущего кода

Как вы можете видеть на втором скриншоте, он отображает меняэто все с тегами.Обновления SSLX Я просто хочу получить Обновления SSL

Я хочу отделить данные от всех тегов, доступных в переменной данных.

HTML:

<table id="items">

      <tr>
          <th>Item</th>
          <th>Description</th>
          <th>Unit Cost</th>
          <th>Quantity</th>
          <th>Price</th>
      </tr>

      <tr class="item-row">
          <td class="item-name"><div class="delete-wpr"><textarea name="invoice_item">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
          <td class="description"><textarea name ="description[]">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
          <td><textarea class="cost">$650.00</textarea></td>
          <td><textarea class="qty">1</textarea></td>
          <td><span class="price">$650.00</span></td>
      </tr>

      <tr class="item-row">
          <td class="item-name"><div class="delete-wpr"><textarea>SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
          <td class="description"><textarea>Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
          <td><textarea class="cost">$75.00</textarea></td>
          <td><textarea class="qty">3</textarea></td>
          <td><span class="price">$225.00</span></td>
      </tr>

      <tr id="hiderow">
        <td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
      </tr>

      <tr>
          <td colspan="2" class="blank"> </td>
          <td colspan="2" class="total-line">Subtotal</td>
          <td class="total-value"><div id="subtotal">$875.00</div></td>
      </tr>
      <tr>

          <td colspan="2" class="blank"> </td>
          <td colspan="2" class="total-line">Total</td>
          <td class="total-value"><div id="total">$875.00</div></td>
      </tr>
      <tr>
          <td colspan="2" class="blank"> </td>
          <td colspan="2" class="total-line">Amount Paid</td>

          <td class="total-value"><textarea id="paid">$0.00</textarea></td>
      </tr>
      <tr>
          <td colspan="2" class="blank"> </td>
          <td colspan="2" class="total-line balance">Balance Due</td>
          <td class="total-value balance"><div class="due">$875.00</div></td>
      </tr>

    </table>
    <input  onclick="myFunction()" type="submit" name="save" value="Save">

СКРИПТ:

<script>

    function myFunction(){

        //gets table
        var oTable = document.getElementById('items');
        //gets rows of table
        var rowLength = oTable.rows.length;
        //loops through rows    
        for (i = 0; i < rowLength; i++){
            //gets cells of current row  
            var oCells = oTable.rows.item(i).cells;
            //gets amount of cells of current row
            var cellLength = oCells.length;

            //loops through each cell in current row
            for(var j = 0; j < cellLength; j++){
                // get your cell info here

                var cellVal = oCells.item(j).innerHTML;
                alert(cellVal);
           }
        }
    }

</script>

Answer 1

Вы можете получить значения текстовой области, как показано ниже, если у вас нет формы в настоящее время, и вы также можете сериализовать значения текстовой области, если вы хотите увидеть демонстрацию ниже.

function myFunction() {
  let queryString = '';
  var formFields = document.querySelectorAll('textarea');

  formFields.forEach(function(textarea) {

    //creates querystring for the form inputs
    queryString += textarea.name + '=' + textarea.value + '&';

    //show the value of the textarea
    console.log(textarea.value);
  });

  //remove the extra "&" from the end of the querystring
  queryString = queryString.substr(0, queryString.length - 1);

  console.log("==FOR USING AS QUERY STRING FOR====");
  console.log(queryString);

  //send ajax call to save the form data
  $.ajax({
    type: "POST",
    url: "your url.php",
    data: queryString,
    dataType: "json",
    success: function(data) {
      //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
      // do what ever you want with the server response
    },
    error: function() {
      alert('error handing here');
    }
  });
}

<table id="items">

  <tr>
    <th>Item</th>
    <th>Description</th>
    <th>Unit Cost</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>

  <tr class="item-row">
    <td class="item-name">
      <div class="delete-wpr"><textarea name="invoice_item[]">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div>
    </td>
    <td class="description"><textarea name="description[]">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
    <td><textarea class="cost" name="unit_cost[]">$650.00</textarea></td>
    <td><textarea class="qty" name="quantity[]">1</textarea></td>
    <td><span class="price">$650.00</span></td>
  </tr>

  <tr class="item-row">
    <td class="item-name">
      <div class="delete-wpr"><textarea name="invoice_item[]">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div>
    </td>
    <td class="description"><textarea name="description[]">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
    <td><textarea class="cost" name="unit_cost[]">$75.00</textarea></td>
    <td><textarea class="qty" name="quantity[]">3</textarea></td>
    <td><span class="price">$225.00</span></td>
  </tr>

  <tr id="hiderow">
    <td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
  </tr>

  <tr>
    <td colspan="2" class="blank"> </td>
    <td colspan="2" class="total-line">Subtotal</td>
    <td class="total-value">
      <div id="subtotal">$875.00</div>
    </td>
  </tr>
  <tr>

    <td colspan="2" class="blank"> </td>
    <td colspan="2" class="total-line">Total</td>
    <td class="total-value">
      <div id="total">$875.00</div>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="blank"> </td>
    <td colspan="2" class="total-line">Amount Paid</td>

    <td class="total-value"><textarea id="paid">$0.00</textarea></td>
  </tr>
  <tr>
    <td colspan="2" class="blank"> </td>
    <td colspan="2" class="total-line balance">Balance Due</td>
    <td class="total-value balance">
      <div class="due">$875.00</div>
    </td>
  </tr>

</table>
<input onclick="myFunction()" type="submit" name="save" value="Save">

Answer 2

Вы можете использовать свойство innerText, это будет работать независимо от того, сколько дочерних узлов имеют ваши элементы td: https://www.w3schools.com/jsref/prop_node_innertext.asp

<script>

    function myFunction(){

        //gets table
        var oTable = document.getElementById('items');
        //gets rows of table
        var rowLength = oTable.rows.length;
        //loops through rows    
        for (i = 0; i < rowLength; i++){
            //gets cells of current row  
            var oCells = oTable.rows.item(i).cells;
            //gets amount of cells of current row
            var cellLength = oCells.length;

            //loops through each cell in current row
            for(var j = 0; j < cellLength; j++){
                // get your cell info here

                var cellVal = oCells.item(j).innerText;
                alert(cellVal);
           }
        }
    }

</script>