输入键的两个数字的百分比

时间:2017-10-16 07:31:47

标签: javascript jquery

我有一个由<tr><td>组成的表格,我在第三个<td>中显示已售票证的百分比。我的代码正常运行,直到我在每个<br/>中的<td>标记后输入。例如,如果您在每个<br/>标记后按Enter键,我的代码将正常工作,否则它将无效,并且不会计算两个数字的百分比。如何定义不考虑每个<td>之间的输入和空格的代码? 这是我的片段:

$('table tbody tr').each(function() {
  var $this = this,
    td2Value = $('td:nth-child(2)', $this).text().trim().split(/\D+/);

  $('span.result', $this).each(function(index, element) {
    let v = $('td:nth-child(1)', $this).text().trim().split(/\r?\n/);
    if (v[index] != null && v[index].trim() == "Mytext") {
      v[index] = td2Value[index];
    }
    if (v[index] != null) {
      $(element).html(Math.round((td2Value[index] * 100 / v[index]) || 0) + '%');
    }

  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>
      <th> avalable</th>
      <th> sold</th>
      <th> result </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        10<br/>Mytext<br>
      </td>
      <td>
        5<br/> 2
        <br/>
      </td>
      <td>
        <span class="result"></span><br/>
        <span class="result"></span><br/>
      </td>
    </tr>
  </tbody>
</table>

1 个答案:

答案 0 :(得分:1)

问题在于您的regex

let v = $('td:nth-child(1)', $this).text().trim().split(/\r?\n/);

此行仅返回值,但连接。

你想要的是一个非常基本的正则表达式(\d+)这将匹配only个数字(你需要的只是将字符串中的整数和文本分开)。

使用此:

 let v = $('td:nth-child(1)', $this).text().trim().split(/(\d+)/).filter(v => v);

$('table tbody tr').each(function() {
  var $this = this,
    td2Value = $('td:nth-child(2)', $this).text().trim().split(/\D+/);
  $('span.result', $this).each(function (index, element) {

    let v = $('td:nth-child(1)', $this).text().trim().split(/(\d+)/).filter(v => v);
    if(v[index] != null && v[index].trim() == "Mytext")
    {
       v[index] = td2Value[index];
    }
    if(v[index] != null )
    {
      $(element).html(Math.round((td2Value[index] * 100 / v[index]) || 0) + '%');
    }

  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table border="1">
             <thead>
                <tr>
                  <th> avalable</th>
                  <th> sold</th>
                  <th>  result </th>
                </tr>
            </thead>
<tbody>
<tr>
<td>   
10<br/>Mytext<br/></td>
<td> 5<br/>2<br/></td>
<td>
<span class="result"></span><br/>
<span class="result"></span><br/>
</td>        
</tr>
</tbody>
</table>