HTML 테이블 클라이언트 측을 생성합니다

StackOverflow https://stackoverflow.com/questions/795075

문제

(ASP.NET 웹 응용 프로그램) 사용자가 HTML 테이블을 빌드 할 수있는 페이지를 만들고 싶습니다. 사용자는 다음 컨트롤이 제공됩니다. 테이블의 행 양을 정의하는 데 사용되는 텍스트 상자, 테이블의 열량을 정의하는 데 사용되는 텍스트 상자 및 총알 목록 (예 : Square, Octagon 등 ) 각 셀 내에 표시됩니다.

사용자가 각 컨트롤 내에 값을 입력하므로 기존 값에 따라 테이블을 빌드하고 표시하고 싶습니다. 클라이언트 측에서 HTML 테이블 코드의 생성을 처리하고 싶습니다.

내 옵션은 무엇입니까? 나는 만났다 숫자 의 조항 나는 유용 할 수 있다고 생각하지만 모든 것을 함께 조각하고 적용 가능한 접근 방식을 수집 할 수는 없습니다. 클라이언트 측 스크립팅에 대한 경험이 거의 없지만, 깨끗하고 효율적인 솔루션을 만들어 내면 학습 곡선 (어떤 프로그래머가 될까요?)에서 부끄러워하지 않습니다.

제공 할 수있는 유익한 링크는 크게 감사 할 것입니다.

도움이 되었습니까?

해결책

중첩 된 루프 몇 개가있는 jQuery는이 작업을 상당히 쉽게 수행해야합니다. 스트링 빌더 또는 무언가로 최적화 할 수 있지만 기본 사항은 매우 명확합니다. 더 복잡한 일을하고 있다면 jQuery 또는 MS Ajax의 템플릿 엔진 중 하나를 살펴 보는 것이 좋습니다.

 <script type="text/javascript">
     $(function() {
       $('INPUT, SELECT').change(function() {
          var rows = parseInt($('#rows').get(0).value);
          var cols = parseInt($('#cols').get(0).value);
          if (isNaN(rows) || isNaN(cols)) {
              return;
          }
          var shape = $('#shape').get(0).value;
          drawTable(rows, cols, shape);
       });
     });

     function drawTable(rows, cols, shape) {
        $('#results').empty().append("<table></table>");
        var table = $('#results > TABLE');

        for (var row = 0; row < rows; row++) {
           var htmlRow;
           htmlRow = '<tr>';
           for (var col = 0; col < cols; col++) {
              htmlRow += '<td><img src="' + shape + '.gif" alt="' + shape + '" /></td>';
           }
           htmlRow += "</tr>";
           table.append(htmlRow);
        }
     }         
 </script>

 Columns: <input id="cols" type="text" /> <br />
 Rows: <input id="rows" type="text" /> <br />
 Shape: 
     <select id="shape">
        <option value="square">Square</option>
        <option value="circle">Circle</option>
     </select>

 <div id="results">
 </div>

다른 팁

나는 당신이 정말로 구체적인 일을하고 싶을 것 같습니다. 그래서 당신은 사용자 정의 빌드를해야합니다. 나는 jQuery를보고있다.http://jquery.com/), 그것은 휠을 재발견하지 않고 맞춤형 자바 스크립트를 작성하는 가장 좋은 방법 중 하나입니다. Google에는 좋은 튜토리얼이 많이 있습니다.

편집 : 요소 (케이스의 표 행)를 추가하고 속성을 설정하는 간단한 방법이 있습니다. 또한 Ajax 호출을 사용하여 필요한 경우 모든 것을 저장할 수 있습니다.

도움이되기를 바랍니다

클라이언트 측에서 실제로 수행하려면 HTML DOM에 대해 프로그램을 구축 할 수 있습니다. 테이블 객체를 만들고 행과 열을 추가하는 것이 그렇게 큰 거래는 아닙니다. 텍스트 상자의 값을 루프의 제어 변수로 사용합니다. 보다 W3Schools 튜토리얼 DOM 객체가 사용하기 위해. 모양을 추가하는 것은 클라이언트 측면을 TD 요소 내부에서 이미지 개체 (또는 IMG 태그) 만 추가하는 것만 큼 간단해야합니다.

나는 직접하지 않았지만, 당신이 묘사 한 것에 근거하여, 큰 노력없이 클라이언트 쪽의 JavaScript에서 수행 할 수있는 것처럼 들립니다. 즉, 클라이언트에 실제로 필요하지 않으면 서버에서 수행하는 것을 확실히 고려할 것입니다.

편집하다:BTW, 나는 jQuery에 대해 많이 모른다. 해당 라이브러리로 더 간단한 방법이있을 수 있습니다. 그러나 순수한 JS 방식은 너무 털이 없어야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top