Question

我有一个不是由我生成的html price-table，我无法对其进行编辑。如何将每个表数据（在“价格”列下）放入3个单独的Javascript变量中并修剪掉“ $”，以便变量为数字数据类型？我想将这些变量用于以后的计算。

以下是表格的HTML代码：

<table class="pricing-rules">
   <tbody>
      <tr>
         <th>Qty </th>
         <th>Price</th>
      </tr>
      <tr>
         <td>10-499</td>
         <td>
            <span class="price-amount">
               <span class="currencySymbol">$</span>
               0.29
               </span>
         </td>
      </tr>
      <tr>
         <td>500-999</td>
         <td>
            <span class="price-amount">
               <span class="currencySymbol">$</span>
               0.28
            </span>
         </td>
      </tr>
      <tr>
         <td>1000+</td>
         <td>
            <span class="price-amount">
               <span class="currencySymbol">$</span>
               0.26
            </span>
         </td>
      </tr>
</tbody></table>

谢谢！

Answer 1

尝试一下：

var element = document.getElementsByClassName('price-amount');
var text = element.innerText || element.textContent;
element.innerHTML = text;

要将文本转换为数字类型，您可以执行类似parseInt(text)的操作，或者如果数字具有小数位，则parseFloat(text)

要进一步添加。

您有多个具有相同类的元素。要把它们全部捡起来，您可以做类似的事情。

for (i = 0; i < element.length; i++){
    price= element[i].innerHTML;   

}

Answer 2

尝试以下

var spans = document.getElementsByClassName("price-amount");
var price = [];
for(i=0;i<spans.length;i++)
{
 price.push(parseFloat(spans[i].innerHTML.replace( /^\D+/g, '')));
 
}
 console.log(price);

<table class="pricing-rules">
   <tbody>
      <tr>
         <th>Qty </th>
         <th>Price</th>
      </tr>
      <tr>
         <td>10-499</td>
         <td>
            <span class="price-amount">
               <span class="currencySymbol">$</span>
               0.29
               </span>
         </td>
      </tr>
      <tr>
         <td>500-999</td>
         <td>
            <span class="price-amount">
               <span class="currencySymbol">$</span>
               0.28
            </span>
         </td>
      </tr>
      <tr>
         <td>1000+</td>
         <td>
            <span class="price-amount">
               <span class="currencySymbol">$</span>
               0.26
            </span>
         </td>
      </tr>
</tbody></table>

Answer 3

如果您使用element.innerText或element.textContent，则会得到类似$ 0.29的信息。

但是您说您想要一个数字，所以这意味着您：

需要解析.price-amount的文本内容，
需要从字符串中提取数字。

这是一个可行的解决方案：

// get first price
const price = document.getElementsByClassName("price-amount")[0].innerText;

// parse price value out of string
const parsedPrice = parseFloat(price.match(/[\d\.]+/))

还有一个带有以下示例的codepen：https://codepen.io/cassilup/pen/vadZQG

Answer 4

获取文本的一种方法是将其映射到您感兴趣的元素之外：

const values = [...document.querySelectorAll('.price-amount')]
  .map(element => element.innerText.replace('$ ', ''))
  
const valueOne = values[0]
const valueTwo = values[1]
const valueThree = values[2]

console.log(valueOne, valueTwo, valueThree)

<table class="pricing-rules">
   <tbody>
      <tr>
         <th>Qty </th>
         <th>Price</th>
      </tr>
      <tr>
         <td>10-499</td>
         <td>
            <span class="price-amount">
               <span class="currencySymbol">$</span>
               0.29
               </span>
         </td>
      </tr>
      <tr>
         <td>500-999</td>
         <td>
            <span class="price-amount">
               <span class="currencySymbol">$</span>
               0.28
            </span>
         </td>
      </tr>
      <tr>
         <td>1000+</td>
         <td>
            <span class="price-amount">
               <span class="currencySymbol">$</span>
               0.26
            </span>
         </td>
      </tr>
</tbody></table>

当然，您不需要将数组中的值放入变量中，但确实需要三个单独的变量。

Answer 5

function dynamicSort(property, order) {
  return function(a, b) {
    var result = (byString(a, property) < byString(b, property)) ? -1 : (byString(a, property) > byString(b, property)) ? 1 : 0;
    return result * order;
  }
}

function getPrice(){
        var table = document.getElementById("pricing-rules");
        var array = [];
        for (var r = 1, n = table.rows.length; r < n; r++) {
            var spans = jQuery("tr:eq("+r+")").find("td:eq(1)").text().replace(/\s/g,''); //removes every white space
            spans = spans.replace(/\$/g,""); //removes every dollar sign
            array[r] = spans.trim();           
        }        
        array.shift();//removes the first element, because its white space

       //if you want all in different values
       var value1 = array[0];
       var value2 = array[1];
       var value3 = array[2];
       alert("Value 1: "+value1+"\nValue 2: "+value2+"\nValue 3: "+ value3);
    }

Javascript：从内部的<span>获取数据

5 个答案: