자바 스크립트를 사용하여 HTML 테이블에서 테이블 열 값 추출

Dracounius

2 주 전에 자바 스크립트를 사용하기 시작했기 때문에 이해가 제한적입니다.

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로).

행 수 i는 다양하지만 필요한 값은 항상 17 행에서 시작합니다. 표시된대로 스크립트는 값이 중지 된 후 여러 개의 빈 행을 생성하지만 ID가없는 행은 없습니다.

예상 결과는 E17 + 셀의 값을 포함하는 배열 (또는 함수)입니다.

 var test_array = ["1E", "2E", "3E", ...];
Geoman Yabes

를 사용하여 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>

또는 바닐라 자바 ​​스크립트 사용 :

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

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

자바 스크립트를 사용하여 HTML 테이블에 json 배열 객체 추가

분류에서Dev

자바 스크립트를 사용하여 HTML 테이블에 행 추가

분류에서Dev

SQL 쿼리를 사용하여 새 열의 테이블에서 값 추출

분류에서Dev

Html 테이블에서 jquery를 사용하여 값 바꾸기

분류에서Dev

자바 스크립트를 사용하여 테이블에 버튼 추가

분류에서Dev

Google 앱 스크립트를 사용하여 웹 페이지의 테이블에서 값 추출

분류에서Dev

자바 스크립트 배열을 HTML로 변환하고 테이블에 추가

분류에서Dev

자바 스크립트 만 사용하여 텍스트 상자에서 사용자 입력으로 html 테이블에서 행 추가 및 삭제

분류에서Dev

루프를 사용하여 테이블에서 열 추출

분류에서Dev

자바 스크립트를 사용하여 HTML 테이블 만들기

분류에서Dev

테이블에 행을 추가하고 자바 스크립트로 값 증가

분류에서Dev

자바 스크립트를 사용하여 테이블 td에서 값을 얻는 방법

분류에서Dev

BeautifulSoup을 사용하여 특정 문자열이있는 HTML에서 테이블 추출

분류에서Dev

자바 스크립트로만 테이블 행 (<tr>) ID를 사용하여 테이블 셀 값 (<td>) 읽기

분류에서Dev

자바 스크립트 배열을 사용하여 HTML 테이블을 만드시겠습니까?

분류에서Dev

텍스트 상자 값에서 html 테이블에 행 추가

분류에서Dev

Impala 또는 Hive를 사용하여 테이블 열에서 여러 문자열 요소 추출

분류에서Dev

동적으로 자바 스크립트를 사용하여 테이블에 열이있는 행을 더 추가하는 방법

분류에서Dev

자바 스크립트를 사용하여 HTML 테이블의 여러 인덱스에 대한 검색 필드

분류에서Dev

열 값을 사용하여 데이터 테이블의 데이터를 다른 테이블에 추가

분류에서Dev

테이블 / 문자열 내에서 SQL 스크립트를 실행하고 결과를 파일로 출력

분류에서Dev

HTML 테이블 셀에서 자바 스크립트 함수 호출

분류에서Dev

R에서 pdftools를 사용하여 문자열 뒤의 특정 테이블 추출

분류에서Dev

IN 쿼리를 사용하여 테이블 열에서 값 찾기

분류에서Dev

사전 정의 된 html 테이블에서 자바 스크립트 배열의 이미지를 표시하는 방법

분류에서Dev

jquery 선택기를 사용하여 레이블 html을 배열 자바 스크립트에 저장

분류에서Dev

열과 행을 사용하여 테이블에서 입력 확인란을 얻는 자바 스크립트

분류에서Dev

jQuery를 사용하여 HTML 테이블에 2D 배열 값 할당

분류에서Dev

자바 스크립트를 사용하여 모달의 입력을 새 테이블 행에 추가

Related 관련 기사

  1. 1

    자바 스크립트를 사용하여 HTML 테이블에 json 배열 객체 추가

  2. 2

    자바 스크립트를 사용하여 HTML 테이블에 행 추가

  3. 3

    SQL 쿼리를 사용하여 새 열의 테이블에서 값 추출

  4. 4

    Html 테이블에서 jquery를 사용하여 값 바꾸기

  5. 5

    자바 스크립트를 사용하여 테이블에 버튼 추가

  6. 6

    Google 앱 스크립트를 사용하여 웹 페이지의 테이블에서 값 추출

  7. 7

    자바 스크립트 배열을 HTML로 변환하고 테이블에 추가

  8. 8

    자바 스크립트 만 사용하여 텍스트 상자에서 사용자 입력으로 html 테이블에서 행 추가 및 삭제

  9. 9

    루프를 사용하여 테이블에서 열 추출

  10. 10

    자바 스크립트를 사용하여 HTML 테이블 만들기

  11. 11

    테이블에 행을 추가하고 자바 스크립트로 값 증가

  12. 12

    자바 스크립트를 사용하여 테이블 td에서 값을 얻는 방법

  13. 13

    BeautifulSoup을 사용하여 특정 문자열이있는 HTML에서 테이블 추출

  14. 14

    자바 스크립트로만 테이블 행 (<tr>) ID를 사용하여 테이블 셀 값 (<td>) 읽기

  15. 15

    자바 스크립트 배열을 사용하여 HTML 테이블을 만드시겠습니까?

  16. 16

    텍스트 상자 값에서 html 테이블에 행 추가

  17. 17

    Impala 또는 Hive를 사용하여 테이블 열에서 여러 문자열 요소 추출

  18. 18

    동적으로 자바 스크립트를 사용하여 테이블에 열이있는 행을 더 추가하는 방법

  19. 19

    자바 스크립트를 사용하여 HTML 테이블의 여러 인덱스에 대한 검색 필드

  20. 20

    열 값을 사용하여 데이터 테이블의 데이터를 다른 테이블에 추가

  21. 21

    테이블 / 문자열 내에서 SQL 스크립트를 실행하고 결과를 파일로 출력

  22. 22

    HTML 테이블 셀에서 자바 스크립트 함수 호출

  23. 23

    R에서 pdftools를 사용하여 문자열 뒤의 특정 테이블 추출

  24. 24

    IN 쿼리를 사용하여 테이블 열에서 값 찾기

  25. 25

    사전 정의 된 html 테이블에서 자바 스크립트 배열의 이미지를 표시하는 방법

  26. 26

    jquery 선택기를 사용하여 레이블 html을 배열 자바 스크립트에 저장

  27. 27

    열과 행을 사용하여 테이블에서 입력 확인란을 얻는 자바 스크립트

  28. 28

    jQuery를 사용하여 HTML 테이블에 2D 배열 값 할당

  29. 29

    자바 스크립트를 사용하여 모달의 입력을 새 테이블 행에 추가

뜨겁다태그

보관