자바 스크립트 스타일 변경이 포함 된 HTML 테이블 형식

스크립터

내 HTML 테이블에서 질문을 숨기고 드롭 다운에서 특정 옵션을 선택한 경우이를 표시하고 싶습니다. 이것은 아래 코드에서 잘 작동하지만 테이블 형식이 올바르지 <td>않습니까 (하나의 공간에 개)?

데모 ( "유형"에서 "기타 유형"선택)이 문제를 해결하는 방법은 무엇입니까?

function setForm(value) {
  if (value == '99') {
    document.getElementById('form1').style = 'display:block;';
  } else {
    document.getElementById('form1').style = 'display:none;';
  }

}
<form action="index.php" method="post">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>First question:</td>
      <td><input type="text" name="firstone" /></td>
    </tr>
    <tr>
      <td>Type: </td>
      <td>
        <select id="type" name="type" onchange="setForm(this.value)">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="99">Other type</option>
        </select>
      </td>
    </tr>
    <tr id="form1" style="display:none;">
      <td>Specify type:</td>
      <td><input type="text" name="othertype" /></td>
    </tr>
    <tr>
      <td>Description:</td>
      <td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
    </tr>
  </table>
  <input type="submit" name="submit" value="Verstuur" />
</form>

twoK

요소 block를 표시 하는 사용 하지 말고 비어 있도록 tr table설정하십시오 style display.

.style.display = '';

function setForm(value) {
  if (value == '99') {
    document.getElementById('form1').style.display = '';
  } else {
    document.getElementById('form1').style.display = 'none';
  }

}
<form action="index.php" method="post">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>First question:</td>
      <td><input type="text" name="firstone" /></td>
    </tr>
    <tr>
      <td>Type: </td>
      <td>
        <select id="type" name="type" onchange="setForm(this.value)">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="99">Other type</option>
        </select>
      </td>
    </tr>
    <tr id="form1"  style="display:none;">
      <td>Specify type:</td>
      <td><input type="text" name="othertype" /></td>
    </tr>
    <tr>
      <td>Description:</td>
      <td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
    </tr>
  </table>
  <input type="submit" name="submit" value="Verstuur" />
</form>

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

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

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

웹팩이 포함 된 HTML 인라인 자바 스크립트

분류에서Dev

자바 스크립트가 포함 된 HTML 페이지를 Excel로 스크랩

분류에서Dev

HTML 테이블에서 자바 스크립트로 입력 유형 변경

분류에서Dev

JSON 데이터가 포함 된 동적 자바 스크립트 테이블

분류에서Dev

HTML 테이블에 중첩 된 자바 스크립트 개체

분류에서Dev

자바 스크립트가 포함 된 페이지 인쇄

분류에서Dev

HTML 페이지의 자바 스크립트 함수에 포함 된 값 가져 오기

분류에서Dev

포함 된 파일 간의 자바 스크립트 이벤트 위임

분류에서Dev

자바 스크립트로 생성 된 HTML 테이블을 스크랩 할 때 이상한 문자

분류에서Dev

테이블 내용이 변경 될 때 자바 스크립트 함수 호출

분류에서Dev

java.lang.IllegalAccessError가 독립형 nashorn.jar 파일 및 Java 16 + 29 이상과 함께 포함 된 자바 스크립트를 사용하려는 경우

분류에서Dev

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

분류에서Dev

마지막으로 포함 된 자바 스크립트 파일이 무시 됨

분류에서Dev

해석 된 후 자바 스크립트가 포함 된 웹 사이트 저장

분류에서Dev

자바 스크립트 팝업이있는 HTML 테이블

분류에서Dev

PHP 및 자바 스크립트 배열이 포함 된 Google 차트

분류에서Dev

반응 가상화 된 테이블을 자바 스크립트에서 typescript로 변환-유형 문제

분류에서Dev

애니메이션이 포함 된 순수 자바 스크립트 scrollTo

분류에서Dev

자바 스크립트의 HTML 테이블에서 행 삭제

분류에서Dev

html 테이블의 자바 스크립트 주소록

분류에서Dev

자바 스크립트 배열 | 값에 문자열이 포함 된 경우 인덱스 반환

분류에서Dev

전체 웹 주소가 포함 된 자바 스크립트 정규식 태그 (텍스트 마이닝, 역 일치)

분류에서Dev

자바 스크립트 계산 적응 형 테이블 행

분류에서Dev

자바 스크립트 계산 적응 형 테이블 행

분류에서Dev

HTML 양식 : 자바 스크립트 함수로 데이터 보내기

분류에서Dev

자바 스크립트 이벤트에 대한 HTML 테이블 업데이트

분류에서Dev

타입 스크립트 라이브러리를 독립형 자바 스크립트 파일로 변환

분류에서Dev

자바 스크립트의 변수에 저장된 테이블 구문 분석

분류에서Dev

체크 박스의 자바 스크립트 수정이 포함 된 onChange 이벤트

Related 관련 기사

  1. 1

    웹팩이 포함 된 HTML 인라인 자바 스크립트

  2. 2

    자바 스크립트가 포함 된 HTML 페이지를 Excel로 스크랩

  3. 3

    HTML 테이블에서 자바 스크립트로 입력 유형 변경

  4. 4

    JSON 데이터가 포함 된 동적 자바 스크립트 테이블

  5. 5

    HTML 테이블에 중첩 된 자바 스크립트 개체

  6. 6

    자바 스크립트가 포함 된 페이지 인쇄

  7. 7

    HTML 페이지의 자바 스크립트 함수에 포함 된 값 가져 오기

  8. 8

    포함 된 파일 간의 자바 스크립트 이벤트 위임

  9. 9

    자바 스크립트로 생성 된 HTML 테이블을 스크랩 할 때 이상한 문자

  10. 10

    테이블 내용이 변경 될 때 자바 스크립트 함수 호출

  11. 11

    java.lang.IllegalAccessError가 독립형 nashorn.jar 파일 및 Java 16 + 29 이상과 함께 포함 된 자바 스크립트를 사용하려는 경우

  12. 12

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

  13. 13

    마지막으로 포함 된 자바 스크립트 파일이 무시 됨

  14. 14

    해석 된 후 자바 스크립트가 포함 된 웹 사이트 저장

  15. 15

    자바 스크립트 팝업이있는 HTML 테이블

  16. 16

    PHP 및 자바 스크립트 배열이 포함 된 Google 차트

  17. 17

    반응 가상화 된 테이블을 자바 스크립트에서 typescript로 변환-유형 문제

  18. 18

    애니메이션이 포함 된 순수 자바 스크립트 scrollTo

  19. 19

    자바 스크립트의 HTML 테이블에서 행 삭제

  20. 20

    html 테이블의 자바 스크립트 주소록

  21. 21

    자바 스크립트 배열 | 값에 문자열이 포함 된 경우 인덱스 반환

  22. 22

    전체 웹 주소가 포함 된 자바 스크립트 정규식 태그 (텍스트 마이닝, 역 일치)

  23. 23

    자바 스크립트 계산 적응 형 테이블 행

  24. 24

    자바 스크립트 계산 적응 형 테이블 행

  25. 25

    HTML 양식 : 자바 스크립트 함수로 데이터 보내기

  26. 26

    자바 스크립트 이벤트에 대한 HTML 테이블 업데이트

  27. 27

    타입 스크립트 라이브러리를 독립형 자바 스크립트 파일로 변환

  28. 28

    자바 스크립트의 변수에 저장된 테이블 구문 분석

  29. 29

    체크 박스의 자바 스크립트 수정이 포함 된 onChange 이벤트

뜨겁다태그

보관