Question

我有一个html表

<table class="blog_table blog_table_res" cellspacing="0">
<thead>
  <tr>
    <th class="product-name">Product</th>
    <th class="product-price">Price</th>
    <th class="product-quantity">Quantity</th>
    <th class="product-subtotal">Total</th>
  </tr>
</thead>
<tbody>

  <tr class="cart_item">


    <td class="product-name" data-title="Product">
      <a href="https://whatever/">Mouse</a> </td>

    <td class="product-price" data-title="Price">
      <span class="woocommerce-Price-amount amount"><span
          class="woocommerce-Price-currencySymbol">&#36;</span>74.50</span> </td>

    <td class="product-quantity" data-title="Quantity">
      <div class="quantity">
        <label class="screen-reader-text" for="quantity_5c80f7b813ae9">Quantity</label>
        <input type="number" class="input-text qty text" step="1" min="0" max=""
        />
      </div>
    </td>

    <td class="product-subtotal" data-title="Total">
      <span class="woocommerce-Price-amount amount"><span
          class="woocommerce-Price-currencySymbol">&#36;</span>74.50</span> </td>
  </tr>


  <tr>
    <td colspan="6" class="actions">


      <button type="submit" class="button" name="update_cart" value="Update cart">Update cart</button>



  </tr>

</tbody>

我打算提取产品名称，产品价格，产品数量的值并添加到数组中。

我写了一个js脚本来查找类名并获取值，但是它一直返回未定义的值。我尝试了很多解决方案，但仍然会得到null或未定义。

这是我的js代码：

var value = document.querySelector('.product-name')[0].value;
alert(value);

我也尝试过：

var elements = document.getElementsByClassName("product-name");
var value = elements[0].value;

 alert(value); // 1

我还尝试过使用以下方法迭代表：

function checkForm() {
    var table = document.getElementsByClassName("shop_table");
    var arr = new Array();
    for (var i = 0, row; row = table.rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
            arr.push(row.cells[j].firstChild.value);
        }  
    }
    alert(arr);

仍然无法读取未定义的属性“ 0” 我浏览了所有内容，并尝试了许多其他解决方案，请问我在哪里弄错了，我需要从表中提取条目

Answer 1

表单控件具有值，表单元格没有。

他们有textContent，innerHTML和其他一些东西，但没有value。

var elements = document.getElementsByClassName("product-name");
var value = elements[0].textContent;
console.log(value);

<table class="blog_table blog_table_res" cellspacing="0">
  <thead>
    <tr>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cart_item">
      <td class="product-name" data-title="Product">
        <a href="https://whatever/">Mouse</a> </td>
      <td class="product-price" data-title="Price">
        <span class="woocommerce-Price-amount amount"><span
          class="woocommerce-Price-currencySymbol">&#36;</span>74.50</span>
      </td>
      <td class="product-quantity" data-title="Quantity">
        <div class="quantity">
          <label class="screen-reader-text" for="quantity_5c80f7b813ae9">Quantity</label>
          <input type="number" class="input-text qty text" step="1" min="0" max="" />
        </div>
      </td>
      <td class="product-subtotal" data-title="Total">
        <span class="woocommerce-Price-amount amount"><span
          class="woocommerce-Price-currencySymbol">&#36;</span>74.50</span>
      </td>
    </tr>
    <tr>
      <td colspan="6" class="actions">
        <button type="submit" class="button" name="update_cart" value="Update cart">Update cart</button>
    </tr>
  </tbody>
</table>

Answer 2

要使用html元素内的值，必须使用document.getElementById（“ *”）。您可以使用className，但对于新程序员来说，id更好，更容易。

var elements = document.getElementById("product-name");
var value = elements[0].value;
alert(value); // 1

getElementsByClassName.value返回未定义

2 个答案: