使用javascript

时间:2017-06-27 09:57:04

标签: javascript html

仅在2周前开始使用javascript,所以我的理解有限。

我有一些javascript代码从excel文档生成一个html表,我需要从一列的一部分中提取值并将这些值放入一个数组中。我稍后将使用它来生成折线图。代码主要需要在IE11上运行。

下面截断的示例表。

    <tbody>
       // several other rows here
        <tr>
            <td id="sjs-A16">column head A</td>
            <td id="sjs-B16">column head B</td>
            <td id="sjs-C16">column head C</td>
            <td id="sjs-D16">column head D</td>
            <td id="sjs-E16">column head E</td>
            <td id="sjs-F16">column head F</td>
            <td id="sjs-G16">column head G</td>
            <td id="sjs-H16">column head H</td>
        </tr>
        <tr>
            <td id="sjs-A17">1A</td>
            <td id="sjs-B17">1B</td>
            <td id="sjs-C17">1C</td>
            <td id="sjs-D17">1D</td>
            <td id="sjs-E17">1E</td>
            <td id="sjs-F17">1F</td>
            <td id="sjs-G17">1G</td>
            <td id="sjs-H17">1H</td>
        </tr>
        <tr>
            <td id="sjs-A18">2A</td>
            <td id="sjs-B18">2B</td>
            <td id="sjs-C18">2C</td>
            <td id="sjs-D18">2D</td>
            <td id="sjs-E18">2E</td>
            <td id="sjs-F18">2F</td>
            <td id="sjs-G18">2G</td>
            <td id="sjs-H18">2H</td>
        </tr>
        <tr>
            <td id="sjs-A19">3A</td>
            <td id="sjs-B19">3B</td>
            <td id="sjs-C19">3C</td>
            <td id="sjs-D19">3D</td>
            <td id="sjs-E19">3E</td>
            <td id="sjs-F19">3F</td>
            <td id="sjs-G19">3G</td>
            <td id="sjs-H19">3H</td>
        </tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
   //several more empty rows here
    </tbody>

我需要E(xx)中具有ID的所有单元格的值,但只需要id sjs-E17和更大(sjs-Exx,其中xx> = 17),因此值1E-3E +但没有高于该值的单元格(所以不是sjs-E16到sjs-E1)。

我改变的行数但所需的值总是从第17行开始。如图所示,在值停止后,脚会生成几个空行,但它们都没有任何id。

预期结果只是一个包含来自单元格E17 +

的值的数组(或函数)
 var test_array = ["1E", "2E", "3E", ...];

3 个答案:

答案 0 :(得分:1)

使用jQuery,您可以执行此操作:

var td = $('[id^="sjs-E"]'),
  valArray = [];
td.each(function() {
  var id = $(this).attr('id'),
    idVal = +id.substring(5); //parse value after `E` to number using (+)
  //check if idVal is number
  if (!isNaN(idVal)) {
    if (idVal >= 17) {
      valArray.push($(this).html());
    }
  }
});
console.log(valArray);
.header {
  background-color: grey;
  font-size: 15px;
}

td {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="header">
      <td id="sjs-A16">column head A</td>
      <td id="sjs-B16">column head B</td>
      <td id="sjs-C16">column head C</td>
      <td id="sjs-D16">column head D</td>
      <td id="sjs-E16">column head E</td>
      <td id="sjs-F16">column head F</td>
      <td id="sjs-G16">column head G</td>
      <td id="sjs-H16">column head H</td>
    </tr>
    <tr>
      <td id="sjs-A17">1A</td>
      <td id="sjs-B17">1B</td>
      <td id="sjs-C17">1C</td>
      <td id="sjs-D17">1D</td>
      <td id="sjs-E17">1E</td>
      <td id="sjs-F17">1F</td>
      <td id="sjs-G17">1G</td>
      <td id="sjs-H17">1H</td>
    </tr>
    <tr>
      <td id="sjs-A18">2A</td>
      <td id="sjs-B18">2B</td>
      <td id="sjs-C18">2C</td>
      <td id="sjs-D18">2D</td>
      <td id="sjs-E18">2E</td>
      <td id="sjs-F18">2F</td>
      <td id="sjs-G18">2G</td>
      <td id="sjs-H18">2H</td>
    </tr>
    <tr>
      <td id="sjs-A19">3A</td>
      <td id="sjs-B19">3B</td>
      <td id="sjs-C19">3C</td>
      <td id="sjs-D19">3D</td>
      <td id="sjs-E19">3E</td>
      <td id="sjs-F19">3F</td>
      <td id="sjs-G19">3G</td>
      <td id="sjs-H19">3H</td>
    </tr>
    <!-- several empty rows -->
  </tbody>
</table>

或者,使用vanilla javascript:

var tdRE = /^sjs-E([2-9]\d|1[7-9]|[1-9]{3,})$/,
  els = document.getElementsByTagName('*'),
  valArray = [];
for (var i = 0; i < els.length; i++) {
  var match = tdRE.exec(els[i].id);
  if (match) {
    if ((+match[1]) >= 17) { //the (+) operator again, convert string to number and check if >= 17
      valArray.push(els[i].innerHTML);
    }
  }
}
console.log(valArray);
.header {
  background-color: grey;
  font-size: 15px;
}

td {
  text-align: center;
}
<table>
  <tbody>
    <tr class="header">
      <td id="sjs-A16">column head A</td>
      <td id="sjs-B16">column head B</td>
      <td id="sjs-C16">column head C</td>
      <td id="sjs-D16">column head D</td>
      <td id="sjs-E16">column head E</td>
      <td id="sjs-F16">column head F</td>
      <td id="sjs-G16">column head G</td>
      <td id="sjs-H16">column head H</td>
    </tr>
    <tr>
      <td id="sjs-A17">1A</td>
      <td id="sjs-B17">1B</td>
      <td id="sjs-C17">1C</td>
      <td id="sjs-D17">1D</td>
      <td id="sjs-E17">1E</td>
      <td id="sjs-F17">1F</td>
      <td id="sjs-G17">1G</td>
      <td id="sjs-H17">1H</td>
    </tr>
    <tr>
      <td id="sjs-A18">2A</td>
      <td id="sjs-B18">2B</td>
      <td id="sjs-C18">2C</td>
      <td id="sjs-D18">2D</td>
      <td id="sjs-E18">2E</td>
      <td id="sjs-F18">2F</td>
      <td id="sjs-G18">2G</td>
      <td id="sjs-H18">2H</td>
    </tr>
    <tr>
      <td id="sjs-A19">3A</td>
      <td id="sjs-B19">3B</td>
      <td id="sjs-C19">3C</td>
      <td id="sjs-D19">3D</td>
      <td id="sjs-E19">3E</td>
      <td id="sjs-F19">3F</td>
      <td id="sjs-G19">3G</td>
      <td id="sjs-H19">3H</td>
    </tr>
    <!-- several empty rows -->
  </tbody>
</table>

正则表达式解释: ^sjs-E([2-9]\d|[1-9][7-9]|\d{3,})$

^ - asserts beginning of string
() - catching group
| - logical OR
$ - end of string

^sjs-E - starts with sjs-E
[2-9]\d - matches between 20 - 99
OR
1[7-9] - matches 17 - 19
OR
[1-9]{3,} - matches 100 and above

答案 1 :(得分:0)

&#13;
&#13;
getBatch()
&#13;
let result = [];
$('table tr td[id^="sjs-E"]').each(function(){
  let ele = $(this);
  //extracting last two digits of id
  let digits = ele.attr('id').slice(-2);
  if(!isNaN(digits) && digits >= 17){
    result.push(ele.html());
  }
});
console.log(result);
&#13;
&#13;
&#13;

答案 2 :(得分:-1)

  var test_array = [];
  var isGreaterThan = 17;
  var until = 1000; // i don't know
  for (var i=isGreaterThan; i < until; i++) {
        var html = document.getElementById('sjs-E' + i.toString());
        if (html) {
               test_array.push(html.innerText);
        }
  }