내 샘플 이미지와 같이 html 페이지에서만 동적으로 테이블에 데이터를 추가하는 방법

debugcn 에 게시 Dev

타 린두 산 디파

여기에 이미지 설명 입력

시각적 목적으로 만 테이블에 데이터를 추가하고 싶으므로 페이지를 새로 고치지 않고 추가 버튼을 클릭하여 4 개의 필드 (2 개의 드롭 다운 선택 및 2 개의 사용자 입력)에서 사용자 입력을 추가해야합니다. (즉석에서) html 페이지에만 서버 호출이 포함되지 않았습니다.

무하마드 아르 슬란 사지 드

$(document).ready(function(){

  $('#btnFillTable').on('click', fillTable);

});

function fillTable(){
// get values form dropdown and text boxes
var a1Value = $('#A1').val();
var a2Value = $('#A2').val();
var b1Value = $('#B1').val();
var b2Value = $('#B2').val();

var rowHtml = '<tr><td>'+a1Value +'</td><td>'+a2Value +'</td><td>'+b1Value +'</td><td>'+b2Value +'</td></tr>';

// lets suppose table id is 'tblViewRecords'

$('#tblViewRecords tbody').append(rowHtml);
  }

#tblViewRecords th{
  text-align:left;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="A1">
  <option value="First">First</option>
  <option value="Second">Second</option>
  <option value="Third">Third</option>
</select>
<select id="A2">
    <option value="First">First</option>
  <option value="Second">Second</option>
  <option value="Third">Third</option>
</select>
<input id="B1" />
<input id="B2" />
<button type="button" id="btnFillTable">Add Entry</button>
<br>
<hr>
<table id="tblViewRecords" width="100%">
  <thead>
    <tr>
    <th>B1</th>
    <th>B2</th>
    <th>A1</th>
    <th>A2</th>
      </tr>
    </thead>
  <tbody></tbody>
</table>

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

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

에서 수정2021-06-10

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

내 샘플 이미지와 같이 html 페이지에서만 동적으로 테이블에 데이터를 추가하는 방법

내 샘플 이미지와 같이 html 페이지에서만 동적으로 테이블에 데이터를 추가하는 방법

html에서 테이블 내 테이블이 내부 테이블이없는 것처럼 시각적으로 동일하게 보이도록하는 방법

데이터베이스의 다른 테이블에서 사용자로 로그인 할 때 페이지의 내 html 부분을 다르게 만드는 방법

HTML 테이블과 내부 테이블에서 데이터를 추출하는 방법은 무엇입니까?

웹 페이지에서로드되는 이미지가 포함 된 HTML 이메일을 보내는 방법은 무엇입니까? Thunderbird와 이상적으로

angularjs를 사용하여 HTML 테이블에서 Excel로 데이터를 내보내는 방법

테이블에 정적 이미지를 추가하는 방법

JQuery를 사용하여 동적으로 테이블에 데이터를 추가하는 방법

PHP의 HTML 테이블에 동적으로 데이터 추가

PHP의 HTML 테이블에 동적으로 데이터 추가

PHP 페이지에서 ajax 페이지로 데이터를 보내는 방법

앵커 태그 내의 동적 PHP 테이블에서 다른 페이지로 데이터를 보내는 방법

Influxdb에서만 14 일이 지난 데이터를 다운 샘플링하고 원시 데이터와 동일한 테이블에 보관하는 방법은 무엇입니까?

imageView에 이미지를 동적으로 추가하는 방법

샘플 당 32 비트, 3 개 샘플 이미지 데이터에 대한 BufferedImage를 만드는 방법

샘플 당 32 비트, 3 개 샘플 이미지 데이터에 대한 BufferedImage를 만드는 방법

배열에서 추가 데이터를 추가하여 jquery 데이터 테이블에서 Excel로 내보내는 방법

웹 페이지에서 데이터 프레임으로 테이블을 긁어내는 방법

Angular4 테이블에서 고유 ID로 HTML 행을 동적으로 추가하는 방법

Chrome 확장 프로그램에서 동적으로 페이지에 HTML 파일의 내용을 추가하는 방법은 무엇입니까?

데이터 테이블 개체에서 Excel로 데이터를 내보내는 효율적인 방법

버튼을 사용하여 동적으로 내 테이블보기에 셀을 추가하는 방법

추가 된 데이터를 HTML 테이블에서 SQL로 저장하는 방법 (PHPMYADMIN)

이미지와 함께 MenuStripItems를 동적으로 추가하는 방법

테이블의 HTML 열에서 데이터를 가져와 C #으로 전달하는 방법

JSP 페이지에서 테이블의 행과 열을 동적으로 만드는 방법

div 내부에 동적 열이있는 HTML 테이블을 만드는 방법

HTML 페이지에서 동적으로 PHP 코드를 표시하는 방법

동적으로로드 된 DIV 내부에 html 테이블을 채우는 방법

동적으로 생성 된 테이블에 CSS를 추가하는 방법