Question

我正在解析HTML，只想从表的元素中获取数据。但是我当前的代码显示的内容超出了我的期望，包括标签等。请查看屏幕截图以获取更清晰的视图。 Screenshot Of Table Here please

正如您在第二张屏幕截图中所看到的，它向我展示了所有带有标签的内容。 SSL续订X 我只想获取SSL续订

我想将数据与data变量中可用的所有标签分开。

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

您可以使用innerText属性，无论您的td元素有多少个childNode，它都将起作用：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>

Answer 2

如果当前没有表单，则可以获取如下所示的textarea值；如果希望在下面看到演示，还可以序列化textarea值。

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">

将确切数据分离为<标签>

2 个答案: