HTML 테이블을 자바 스크립트로 변환하는 방법

초보자로서 자바를 사용하여 테이블을 만드는 방법을 모릅니다. 간단한 HTML 파일을 사용하여 테이블을 만들 수 있지만 Javascript에서는 만들 수 없습니다.HTML 테이블을 자바 스크립트로 변환하는 방법

출력에는 2 열 4 행이 있어야합니다. 두 번째 열에 데이터를 삽입하려면 프롬프트 태그를 사용해야합니다. 말할 필요도없이 제 2 칼럼에서 총 수를 평균해야합니다.

내가 검색을 시도하지만 혼합 된 결과를 가지고 그 혼란 me.so이 HTML 파일

<html> 
    <body> 

    <table border="1" style="width:30%"> 
     <tr> 
      <td>Rose</td> 

      <td>40</td> 
     </tr> 
     <tr> 
      <td>Daisy</td> 

      <td>50</td> 
     </tr> 
     <tr> 
      <td>Orchids</td> 

      <td>60</td> 
     </tr> 
     <tr> 
      <td>Flowers</td> 
      <td>150</td> 
     </tr> 
    </table> 

    </body> 
</html>

인 나에게

도와주세요 당신은 데이터 배열을 필요로하고 생각했던 다음 테이블을 채우기

출처

2014-09-30 city lights

당신은 참조 할 수 있습니다 http://stackoverflow.com/questions/13775519/html-draw-table-using-innerhtml 또는 http://stackoverflow.com/questions/14643617/create 표 사용 자바 스크립트 – DimoMohit

-1

HTML 문서이었다

var table = '<table border="1">', 
    data = [['Rose','Daisy','Orchids','Flowers'],[40,50,60,150]]; 

for (var i = 0; i < data[0].length; i++) { 
    table += '<tr>'; 
    for (var j = 0; j < data.length; j++) { 
     table += '<td>' + data[j][i] + '</td>'; 
    } 
    table += '</tr>'; 
} 
table += '</table>'; 
document.getElementById('container').innerHTML = table;

http://jsfiddle.net/5pdac6sb/

출처

2014-09-30 05:50:26 monkeyinsight

이 시도 ->

var Rose = prompt("Enter price for Rose?"); 
 
var Daisy = prompt("Enter price for Daisy?"); 
 
var Orchids = prompt("Enter price for Orchids?"); 
 

 
var flowers = Number(Rose) + Number(Daisy) + Number(Orchids); 
 

 
var table = document.createElement("table"); 
 

 
createTable(); 
 

 
function createTable(){ 
 
    createTrTds("Rose",Rose); 
 
    createTrTds("Daisy",Daisy); 
 
    createTrTds("Orchids",Orchids); 
 
    createTrTds("Total",flowers); 
 
    document.getElementById("table").appendChild(table); 
 
} 
 

 

 
function createTrTds(text,value){ 
 
    var tr = document.createElement("tr"); 
 
    
 
    var td1 = document.createElement("td"); 
 
    var td2 = document.createElement("td"); 
 
    
 
    var txt1 = document.createTextNode(text); 
 
    var txt2 = document.createTextNode(value); 
 
    
 
    td1.appendChild(txt1); 
 
    td2.appendChild(txt2); 
 
    
 
    tr.appendChild(td1); 
 
    tr.appendChild(td2); 
 
    
 
    table.appendChild(tr); 
 
    
 
}

td 
 
{ 
 
    border: 1px solid black; 
 
}

<div id="table"> 
 
</div>

당신은 이것에 대한 프레임 워크를 사용하여 도움이 될 것입니다

출처

2014-09-30 06:00:27

, JQuery와 또는 AngularJS와 그것을 해결하기 위해 마음에 온다. 그러나 순수한 JavaScript 방식은 다음과 같습니다.

이렇게하면 숫자가 바뀔 때 꽃의 수를 입력 한 표가 만들어지고 하단이 합쳐 지므로 JavaScript 파일에 꽃 유형을 더 추가 할 수 있습니다.

var tabledef = []; 
 
tabledef['Rose'] = 40; 
 
tabledef['Daisy'] = 50; 
 
tabledef['Orchids'] = 60; 
 

 
writeTable(); 
 

 
function writeTable() { 
 
    var table = '<table border="1" style="width:30%">'; 
 
    var sum = 0; 
 
    for (var i in tabledef) { 
 
    sum = sum + tabledef[i]; 
 
    table = table + '<tr><td>' + i + '</td><td><input id="' + i + '" onchange="recalculate(this)" type="number" value="' + tabledef[i] + '"></td></tr>'; 
 
    } 
 
    table = table + '<tr><td>Flowers</td><td>' + sum + '</td></tr></table>'; 
 
    document.getElementById('myTable').innerHTML = table; 
 
} 
 

 
function recalculate(box) { 
 
    tabledef[box.id] = box.valueAsNumber; 
 
    writeTable(); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <div id="myTable"></div> 
 
    <script src="createTable.js"></script> 
 
</body> 
 

 
</html>

출처

2014-09-30 06:09:07

HTML 테이블을 자바 스크립트로 변환하는 방법

답변

관련 문제