값 집합이 완료된 후 새 행

앨빈

다음 값을 가진 배열이 있습니다.

[
    "Prod1",
    "Puma Superstar",
    "1",
    "$50",
    "Prod2",
    "Nike Superstar",
    "2",
    "$100"
]

이렇게 할 수 있습니까?

Product ID   |   Product Name   | Qty | Price
-------------|------------------|-----|------
   Prod1     |   Puma Superstar |  1  | $50
   Prod2     |   Nike Superstar |  2  | $100

내 코드는 내가 시도한 것을 보여줍니다. 그러나 rows.length항상 0 (새로 고침되지 않음)이기 때문에 새 행에 항목을 추가 할 수 없습니다. 방법이 있습니까 아니면 불가능합니까?

  db.allDocs({
    include_docs: true,
    attachments: true,
    startkey: 'receipt',
    endkey: 'receipt\uffff'
  }).then(function(result) {
    console.log(result);
    console.log(result.rows.length);
    for (var i = 0; i <= (result.rows.length - 1); i++) {
      if (result.rows[i].doc.nric == "alvin123") {
        var tableRef = document.getElementById("tableA").getElementsByTagName("tbody")[0];

        var newRow = tableRef.insertRow(tableRef.rows.length);

        var newCell = newRow.insertCell(0);
        var anotherCell = newRow.insertCell(1);

        newCell.onclick = function() {

          var id = this.innerHTML;

          alert(id);

          db.get(id).then(function(doc) {

            var tableRef1 = document.getElementById("tableC").getElementsByTagName("tbody")[0];

            var tableLength = tableRef1.rows.length;

            var newRow1 = tableRef1.insertRow(tableLength);

            var newCell1 = newRow1.insertCell(0);
            var anotherCell1 = newRow1.insertCell(1);
            var newCell2 = newRow1.insertCell(2);
            var anotherCell3 = newRow1.insertCell(3);


            for (var j = 0; j < doc.items[0].length; j++) {

              if (doc.items[0][j].charAt(0) == 'P') {
                newCell1.appendChild(document.createTextNode(doc.items[0][j]));

              } else if (doc.items[0][j].charAt(0) == '$') {
                anotherCell3.appendChild(document.createTextNode(doc.items[0][j]));
                tableLength = tableLength + 1;
              } else if (isNaN(doc.items[0][j].charAt(0)) == false) {
                newCell2.appendChild(document.createTextNode(doc.items[0][j]));
              } else {
                anotherCell1.appendChild(document.createTextNode(doc.items[0][j]));
              }
            }

          }).catch(function(err) {
            console.log(err);
          });

        };

        newCell.appendChild(document.createTextNode(result.rows[i].doc._id));
        anotherCell.appendChild(document.createTextNode("$" + result.rows[i].doc.totalAmount));
      }
    }
  }).catch(function(err) {
    console.log(err);
  });
스티브

귀하의 접근 방식은 복잡합니다. 이 간단한 예를보십시오.

var tableRef1 = document.getElementById("tableC").getElementsByTagName("tbody")[0];

var items = [
  "Prod1",
  "Puma Superstar",
  "1",
  "$50",
  "Prod2",
  "Nike Superstar",
  "2",
  "$100"
]

for (var j = 0; j < items.length; j+=4) {

  var tableLength = tableRef1.rows.length;
  var newRow = tableRef1.insertRow(tableLength);
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  var cell4 = newRow.insertCell(3);

  cell1.appendChild(document.createTextNode(items[j]));
  cell2.appendChild(document.createTextNode(items[j+1]));
  cell3.appendChild(document.createTextNode(items[j+2]));
  cell4.appendChild(document.createTextNode(items[j+3]));
}

참고 :

  • 당신은 당신의 테이블에 행을 추가 할 필요가 내부 루프
  • 현재 값의 첫 번째 문자를 확인할 필요가 없습니다. 항상 같은 순서로되어 있다는 것을 알고 있습니다. 다음 4 개 항목 만 선택하면됩니다. 이것이 내 루프 카운터가 4 씩 증가하는 이유입니다.

jsfiddle 에서이 작업 예제를 참조하십시오 .

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

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

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

계산이 완료된 후 셀이 새 값을 상속 받도록하려면 어떻게해야합니까?

분류에서Dev

활동이 완료된 후에도 Firebase 값 이벤트 리스너가 실행됩니까?

분류에서Dev

다중 완료 블록이 완료된 후 실행되는 기능

분류에서Dev

알림이 완전히 완료된 후 페이지 새로 고침

분류에서Dev

모든 것이 완료된 후 또는 exec가 완료된 후 create_resource를 실행하십시오.

분류에서Dev

AngularJS 애니메이션이 완료된 후 코드 실행

분류에서Dev

이전 명령이 완료된 후 명령 실행

분류에서Dev

애니메이션이 완료된 후 segue 수행

분류에서Dev

자바 FX 타임 라인이 완료된 후 값을 반환

분류에서Dev

fetch 문이 완료된 후 Javascript 실행 문

분류에서Dev

다른 작업이 완료된 후 루프 수행

분류에서Dev

jQuery 버전 선택이 완료된 후 실행

분류에서Dev

클릭 이벤트가 완료된 후 jQuery 수행 작업

분류에서Dev

CSS 전환이 완료된 후 함수 실행

분류에서Dev

CSS 변경이 완료된 후 하나의 jquery 문 실행

분류에서Dev

여러 $ .get 호출이 완료된 후 코드 실행

분류에서Dev

내부 $ http 호출이 완료된 후 함수 실행-AngularJS

분류에서Dev

.NET / C #에서 이벤트가 완료된 후 작업 실행

분류에서Dev

특정 코드 실행이 완료된 후 $ ajax 호출 지연

분류에서Dev

다른 기능이 완료된 후 기능 실행

분류에서Dev

새로 고침이 완전히 완료된 후에 만 새로 고침 위젯을 제거하는 방법

분류에서Dev

JS promise가 완료된 후 반환 값

분류에서Dev

4 집 PHP 이후 새 행 추가

분류에서Dev

하위 집합 이후에 일관된 행 집합 유지

분류에서Dev

React : 첫 번째 부분이 완전히 완료된 후에 만 함수의 뒷부분을 실행합니다.

분류에서Dev

로컬 바이트 실행 방법이 완료된 후 소거 버퍼이다?

분류에서Dev

Wix Installer는 기본 설치가 완료된 후 msi를 실행합니다.

분류에서Dev

Wix Installer는 기본 설치가 완료된 후 msi를 실행합니다.

분류에서Dev

v-for가 vue에서 완료된 후 jQuery 함수를 실행합니까?

Related 관련 기사

  1. 1

    계산이 완료된 후 셀이 새 값을 상속 받도록하려면 어떻게해야합니까?

  2. 2

    활동이 완료된 후에도 Firebase 값 이벤트 리스너가 실행됩니까?

  3. 3

    다중 완료 블록이 완료된 후 실행되는 기능

  4. 4

    알림이 완전히 완료된 후 페이지 새로 고침

  5. 5

    모든 것이 완료된 후 또는 exec가 완료된 후 create_resource를 실행하십시오.

  6. 6

    AngularJS 애니메이션이 완료된 후 코드 실행

  7. 7

    이전 명령이 완료된 후 명령 실행

  8. 8

    애니메이션이 완료된 후 segue 수행

  9. 9

    자바 FX 타임 라인이 완료된 후 값을 반환

  10. 10

    fetch 문이 완료된 후 Javascript 실행 문

  11. 11

    다른 작업이 완료된 후 루프 수행

  12. 12

    jQuery 버전 선택이 완료된 후 실행

  13. 13

    클릭 이벤트가 완료된 후 jQuery 수행 작업

  14. 14

    CSS 전환이 완료된 후 함수 실행

  15. 15

    CSS 변경이 완료된 후 하나의 jquery 문 실행

  16. 16

    여러 $ .get 호출이 완료된 후 코드 실행

  17. 17

    내부 $ http 호출이 완료된 후 함수 실행-AngularJS

  18. 18

    .NET / C #에서 이벤트가 완료된 후 작업 실행

  19. 19

    특정 코드 실행이 완료된 후 $ ajax 호출 지연

  20. 20

    다른 기능이 완료된 후 기능 실행

  21. 21

    새로 고침이 완전히 완료된 후에 만 새로 고침 위젯을 제거하는 방법

  22. 22

    JS promise가 완료된 후 반환 값

  23. 23

    4 집 PHP 이후 새 행 추가

  24. 24

    하위 집합 이후에 일관된 행 집합 유지

  25. 25

    React : 첫 번째 부분이 완전히 완료된 후에 만 함수의 뒷부분을 실행합니다.

  26. 26

    로컬 바이트 실행 방법이 완료된 후 소거 버퍼이다?

  27. 27

    Wix Installer는 기본 설치가 완료된 후 msi를 실행합니다.

  28. 28

    Wix Installer는 기본 설치가 완료된 후 msi를 실행합니다.

  29. 29

    v-for가 vue에서 완료된 후 jQuery 함수를 실행합니까?

뜨겁다태그

보관