获取表格选中行TD数据时出现换行符问题求助

嘿，你碰到的这个换行符问题，其实是因为EJS模板里的TD内容周围带了换行和空白字符，导致用.text()获取时把这些多余的东西也捞进来了～

先看你EJS里的这段代码：

<td class="name" >
<%= products.productName %>
</td>

你在<%= products.productName %>前后加了换行和空格，浏览器会把这些空白字符（换行、空格）当成文本内容的一部分，所以.text()返回的结果就带了↵这种换行符和多余空格。

简单解决：给文本做个“修剪” #

只需要在获取文本后用trim()方法去掉两端的空白就行，不管是原生JS的trim()还是jQuery的$.trim()都可以。修改你的Ajax代码如下：

$("#review-products input[type=checkbox]:checked").each(function() {
  var row = $(this).closest("tr");
  var message0 = row.find('#check').val();
  // 用trim()去除前后的换行、空格
  var message1 = row.find('.name').text().trim();
  var message2 = row.find('.currency').text().trim();
  var message3 = row.find(".foo").val();
  var result = {
    check: message0,
    name: message1,
    p: message2,
    q: message3,
    total: parseFloat(message2) * parseInt(message3) // 显式转数字更稳妥
  }
  console.log(result);
});

额外提两个小细节 #

• ID重复问题：你循环生成的复选框都用了id="check"，这不符合HTML规范（ID必须唯一），建议改成class="check"，然后用row.find('.check').val()来获取值，避免后续出现奇怪的DOM选择问题。
• 数字转换：计算total的时候，最好把价格和数量显式转换成数字类型（比如parseFloat()处理价格，parseInt()处理数量），虽然JS会自动转换字符串乘法，但显式转换能让代码更清晰，也避免万一出现非数字内容时的错误。

内容的提问来源于stack exchange，提问作者Eman Emad