Question

我有这个Javascript函数，它将在表格单元格中找到的所有textContent写入控制台：

function checkoutSystem() {  
    var table = document.getElementById('checkOutTable');
    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            results=table.rows[r].cells[c].textContent;
            console.log(results);
        }
    }
}

然后控制台在运行函数时显示这些结果：

"LG D2343P-BN 23-inch"
"1 X"
"99.99"
"Ethernet Cable 50m Cat 5e"
"1 X"
"24.99"
"Total"
"124.98"
"Empty Cart"

我希望结果如下：

"orderTitle=LG D2343P-BN 23-inch"
"orderQty=1"
"orderPrice=24.99"
"orderTotal=124.98"

我不希望javascript获得X＆＃34; 1 X＆＃34;我也不希望它显示＆＃34;空车＆＃34;或＆＃34; Total＆＃34;然后我想使用AJAX发布值。这是一个任务，我不是大声使用jQuery：/

http.open("POST", url, true);

这是HTML表格：

<table id="checkOutTable" class="checkOut">
    <tbody>
        <tr>
            <td align="center">LG D2343P-BN 23-inch</td>
            <td align="center">1 
                <a href="/637415/cms/pages/cart.php?action=remove&amp;id=46\">X</a>
            </td>
            <td align="center">99.99</td>
        </tr>
        <tr>
            <td align="center">Ethernet Cable 50m Cat 5e</td>
            <td align="center">1 
                <a href="/637415/cms/pages/cart.php?action=remove&amp;id=38\">X</a>
            </td>
            <td align="center">24.99</td>
        </tr>
        <tr>
            <td colspan="2" style="padding-right: 10px;" align="right">Total</td>
            <td align="right">124.98</td>
        </tr>
        <tr>
             <td colspan="3" align="right">
                <a href="/637415/cms/pages/cart.php?action=empty" onclick="return confirm('Are you sure?');">Empty Cart</a>
             </td>
        </tr>
    </tbody>
</table>

非常感谢

Answer 1

您可以创建与单元格索引匹配的标签数组：

var labels = ['orderTitle','orderQty','orderPrice','orderTotal'];

并且如果索引为1，则在内容上使用parseInt。所以：

value = table.rows[r].cells[c].textContent;
results = labels[c] + '=' + c == 1? parseInt(value) : value;

并且对于最后一行，只遍历rows.length - 1并执行循环外的最后一行：

for (var r = 0, n = table.rows.length - 1; r < n; r++) {
  // ...
}
results = labels[++c] + '=' + parseInt(table.rows[r].cells[1].textContent, 10);

请注意，在最后一个语句中， r 在循环跳过块之前递增到length - 1，因此它被设置为最后一行的索引。并且由于内部for循环没有重新启动， c 仍然设置为最后一个索引（2），因此++c将其设置为3并且您将获得最后的标签。

我假设将结果发送到控制台仅用于开发，实际上您将收集数组或对象中的值，然后构建将数据发送到的所需内容服务器

修改

抱歉，我讨厌JSFIDDLE。如果您要粘贴更新的代码，只需将其粘贴到此处作为问题的修改。如果代码出现问题，我可能没有意识到空的购物车按钮位于一个单独的行中，或者总行上有一个colspan属性。以下＆＃34;工作＆＃34;：

function checkoutSystem() {
  var table = document.getElementById('checkOutTable');
  var labels = ['orderTitle','orderQty','orderPrice','orderTotal'];
  var results = [];

  // Note length - 2
  for (var r = 0, n = table.rows.length - 2; r < n; r++) {

    for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
      value = table.rows[r].cells[c].textContent;
      results.push(labels[c] + '=' + (c == 1? parseInt(value, 10) : value));
    }
  }
  results.push(labels[c] + '=' + parseFloat(table.rows[r].cells[1].textContent));

  console.log(results.join('\n'));

}

我已经为 parseInt 添加了一个基数，这可能是不必要的，但以防万一。

请注意， textContent 在IE 8或更低版本中无效。您可以使用 getText 函数，如下所示：

function getText(element) {
  if (typeof element.textContent == 'string') {
    return element.textContent;
  } else if (typeof element.innerText == 'string') {
    return element.innerText;
  }
}

并使用它：

value = getText(table.rows[r].cells[c]);

该功能可以简化为：

function getText(element) {
  return element.textContent || element.innerText || '';
}

但我更喜欢第一个。您还可以为不支持 textContent 或 innerText 的浏览器添加另一个 else ，这些浏览器遍历所有子节点并连接内容文本节点，但除非您处理古老的浏览器或用户代理，否则这是不必要的。

哦，我将onload监听器移动到body元素，即使HTML5说它应该受所有元素的支持，它并不是在所有（任何？）浏览器中。如果您确实需要在表加载后可靠地运行代码，请将其放在关闭表标记之后的脚本元素中。

Answer 2

我更改了您的代码，如下所示

    function Item(orderTitle, orderQty, orderPrice) {
        this.orderTitle = orderTitle;
        this.orderQty = Number.parseFloat(orderQty);
        this.orderPrice = Number.parseFloat(orderPrice);
    };

    function Order() {
        this.items = [];
        this.addItem = function (row) {
            var itm = new Item(row.cells[0].textContent,
                               row.cells[1].textContent,
                               row.cells[2].textContent)
            this.items.push(itm);
        };

        this.totalPricae = function () {
            var res = 0;
            for (var i = 0; i < this.items.length; i++) {
                res += (this.items[i].orderQty * this.items[i].orderPrice);
            }
            return Math.round(res* 100 )/ 100;
        };
    };

    function AJAXcall(data) {
        var xhr = new XMLHttpRequest();
        xhr.open("Get", "Handler.ashx?data=" + JSON.stringify(data.items), true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // you must write your ajax call result to the responce
                //on code behind of your handler.ashx  in context.responce if needed
                alert(xhr.responseText);
            }                
        };
    };

    function checkoutSystem() {
        var table = document.getElementById('checkOutTable');
        var newOrder = new Order();
        for (var r = 0, n = table.rows.length - 2; r < n; r++) {
            newOrder.addItem(table.rows[r]);
        }
        AJAXcall(newOrder);
    };

Answer 3

请将您的功能更改为以下

<script type="text/javascript">

function checkoutSystem() {

var table = document.getElementById('checkOutTable');

var labels = ['orderTitle','orderQty','orderPrice','orderTotal'];

for (var r = 0, n = table.rows.length - 2; r < n; r++) {

for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {

value = table.rows[r].cells[c].textContent;

if (c==1)

{ results += labels[c]+' = '+parseInt(value); }

else

{ results += labels[c]+' = '+value; }

}

results += labels[c] + '=' + table.rows[r].cells[1].textContent;

console.log(results);

}

</script>

在循环遍历元素id时插入字符串

3 个答案:

修改