<html>추가하기 버튼 누를 때마다 테이블 값 생성

본문 바로가기

<html>추가하기 버튼 누를 때마다 테이블 값 생성

작성일 2017.11.25댓글 1건

게시물 수정 , 삭제는 로그인 필요

추가하기 버튼을 누를 때마다 밑에 테이블의 행이 추가되면서

왼쪽 옵션값과 오른쪽 옵션 값이 테이블에 추가되고 저장되는 html파일을 만들고 싶습니다.

계속 시도해도 잘 안되네요ㅠ 제가 만든 코드입니다. 수정해주신다면 정말 감사하겠습니다.

------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>

<style>
.button {
border:1x solid #6E6E6E;    /---테두리 정의---/
background-Color:#FFFFFF;   /--백그라운드 정의---/
font:20px;   /--폰트 정의---/
font-weight:bold;   /--폰트 굵기---/
color:#6E6E6E;    /--폰트 색깔---/
width:150px;height:40px; /--버튼 크기---/
}
.button1 {
border:1x solid #6E6E6E;    /---테두리 정의---/
background-Color:#FFFFFF;   /--백그라운드 정의---/
font:20px;   /--폰트 정의---/
font-weight:bold;   /--폰트 굵기---/
color:#6E6E6E;    /--폰트 색깔---/
width:150px;height:40px; /--버튼 크기---/
}

select {
    width: 300px;
    height: 50px;
    padding-left: 10px;
    font-size: 18px;
   color: #585858;
    border: 1px solid #2E2E2E;
    border-radius: 3px;
-webkit-appearance: none; /* 화살표 없애기 for chrome/
   -moz-appearance: none;    / 화살표 없애기 for firefox/
   appearance: none;         / 화살표 없애기 공통/
}
select::-ms-expand {
display: none;            / 화살표 없애기 for IE10, 11*/
}

body{
text-align:center;
}
body:before{
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}

</style>

<meta charset="utf-8">
<title>Insert title here</title>
</head>
<section style="padding: 6% 0px 0px 0px;">
<select id="nice" name="selectbox"class="select-arrow-image" onchange="categoryChange(this)">
<option>상위 카테고리를 선택하세요</option>
<option value="a">교육</option>
<option value="b">문화</option>
<option value="c">매체</option>
<option value="d">사회</option>
<option value="e">정치</option>
<option value="f">경제/산업</option>
<option value="g">라이프스타일</option>
<option value="h">특수계층조사</option>
    <option value="i">기타</option>

</select>

<select id="good" name="list" class="_list">
<option>하위 카테고리를 선택하세요</option>
</select>

<br>
<br>
<input type="button" class="button" onclick="add_row();" value="추가하기" />
<script>
function button_click() {
var target=document.getElementById("nice");
var target1=document.getElementById("good");

target.options[target.selectedIndex].text);

}

</script>

<br>
<br>
<br>
<table id='stock_table' align="center">
    <thead id='stock_thead'>
        <tr>
            <td>
                <input type=text name=opty size=20>

            </td>
            <td>
                <input type=text name='optx_subj[]' size=20>
            </td>
        </tr>
    </thead>
    <tbody id='stock_tbody'>
        <tr>
            <td><input type=text name='opty_subj[]' size=20></td>
            <td><input type=text name='opt[0][]' size=20></td>
        </tr>
    </tbody>
</table>

</form>

<span id=msg></span>

<script>
var stock_table = document.getElementById('stock_table');
var stock_thead = document.getElementById('stock_thead');
var stock_tbody = document.getElementById('stock_tbody');
var stock_tr = null;
var stock_td = null;
var stock_x = 0;
var stock_y = 0;
var msg = document.getElementById('msg');
</script>

<script>

function categoryChange(e) {
var good_a = ["학교 교육","교육 일반"];
var good_b = ["문학도서","순수예술","영화/가요/연예","문화 일반"];
var good_c = ["TV","라디오","신문","기타 매체"];
var good_d = ["복지","자연/환경","사회 일반"];
var good_e = ["국회","국방","대통령","사법/치안","정당","정부","행정","정치 일반"];
var good_f = ["건설","과학","교통","금융","기업","대외 경제/무역","부동산","경제 일반"];
var good_g = ["가정/결혼","관광","소비","여가","정보","직장","정보/통신","기타 일반"];
var good_h = ["교포/외국인","노인","성인","아동","장애인","청소년","복지"];
var good_i = [""];
var target = document.getElementById("good");

if(e.value == "a") var d = good_a;
else if(e.value == "b") var d = good_b;
else if(e.value == "c") var d = good_c;
else if(e.value == "d") var d = good_d;
else if(e.value == "e") var d = good_e;
else if(e.value == "f") var d = good_f;
else if(e.value == "g") var d = good_g;
else if(e.value == "h") var d = good_h;
else if(e.value == "i") var d = good_i;

target.options.length = 0;

for (x in d) {
    var opt = document.createElement("option");
    opt.value = d[x];
    opt.innerHTML = d[x];
    target.appendChild(opt);
}

}

</script>

</body>
</html>

익명 작성일 -

음~ 값을 넣을 수는 있답니다. 하지만 javascript나 html로 html을 저장할 수는 없답니다.

javascript로 로컬 컴퓨터의 메모리에 배열로 저장될 뿐 영구적이지 않지요.

영구적으로 저장하기 위해서 데이터베이스를 사용한답니다.

아래는 테이블에 값들을 넣는 방식이지요.

참고하세요.

<!DOCTYPE html>

<html>

<head>

<style>

.button {

border:1x solid #6E6E6E; /---테두리 정의---/

background-Color:#FFFFFF; /--백그라운드 정의---/

font:20px; /--폰트 정의---/

font-weight:bold; /--폰트 굵기---/

color:#6E6E6E; /--폰트 색깔---/

width:150px;height:40px; /--버튼 크기---/

}

.button1 {

border:1x solid #6E6E6E; /---테두리 정의---/

background-Color:#FFFFFF; /--백그라운드 정의---/

font:20px; /--폰트 정의---/

font-weight:bold; /--폰트 굵기---/

color:#6E6E6E; /--폰트 색깔---/

width:150px;height:40px; /--버튼 크기---/

}

select {

width: 300px;

height: 50px;

padding-left: 10px;

font-size: 18px;

color: #585858;

border: 1px solid #2E2E2E;

border-radius: 3px;

-webkit-appearance: none; /* 화살표 없애기 for chrome/

-moz-appearance: none; / 화살표 없애기 for firefox/

appearance: none; / 화살표 없애기 공통/

}

select::-ms-expand {

display: none; / 화살표 없애기 for IE10, 11*/

}

body{

text-align:center;

}

body:before{

content:'';

height:100%;

display:inline-block;

vertical-align:middle;

}

</style>

<meta charset="utf-8">

<title>Insert title here</title>

</head>

<section style="padding: 6% 0px 0px 0px;">

<select id="nice" name="selectbox"class="select-arrow-image" onchange="categoryChange(this)">

<option>상위 카테고리를 선택하세요</option>

<option value="a">교육</option>

<option value="b">문화</option>

<option value="c">매체</option>

<option value="d">사회</option>

<option value="e">정치</option>

<option value="f">경제/산업</option>

<option value="g">라이프스타일</option>

<option value="h">특수계층조사</option>

<option value="i">기타</option>

</select>

<select id="good" name="list" class="_list">

<option>하위 카테고리를 선택하세요</option>

</select>

<br>

<br>

<input type="button" class="button" onclick="add_row();" value="추가하기" />

<script>

function button_click() {

var target=document.getElementById("nice");

var target1=document.getElementById("good");

target.options[target.selectedIndex].text;

}

function add_row() {

var target=document.getElementById("nice");

var target1=document.getElementById("good");

var stock_tbody = document.getElementById("stock_tbody");

var row = stock_tbody.insertRow(stock_tbody.rows.length);

var cell1 = row.insertCell(0);

var cell2 = row.insertCell(1);

cell1.innerHTML = target.options[target.selectedIndex].text;

cell2.innerHTML = target1.options[target1.selectedIndex].text;

}

</script>

<br>

<br>

<br>

<table id='stock_table' align="center">

<thead id='stock_thead'>

<tr>

<td>

<input type=text name=opty size=20>

</td>

<td>

<input type=text name='optx_subj[]' size=20>

</td>

</tr>

</thead>

<tbody id='stock_tbody'>

<tr>

<td><input type=text name='opty_subj[]' size=20></td>

<td><input type=text name='opt[0][]' size=20></td>

</tr>

</tbody>

</table>

</form>

<span id=msg></span>

<script>

var stock_table = document.getElementById('stock_table');

var stock_thead = document.getElementById('stock_thead');

var stock_tbody = document.getElementById('stock_tbody');

var stock_tr = null;

var stock_td = null;

var stock_x = 0;

var stock_y = 0;

var msg = document.getElementById('msg');

</script>

<script>

function categoryChange(e) {

var good_a = ["학교 교육","교육 일반"];

var good_b = ["문학도서","순수예술","영화/가요/연예","문화 일반"];

var good_c = ["TV","라디오","신문","기타 매체"];

var good_d = ["복지","자연/환경","사회 일반"];

var good_e = ["국회","국방","대통령","사법/치안","정당","정부","행정","정치 일반"];

var good_f = ["건설","과학","교통","금융","기업","대외 경제/무역","부동산","경제 일반"];

var good_g = ["가정/결혼","관광","소비","여가","정보","직장","정보/통신","기타 일반"];

var good_h = ["교포/외국인","노인","성인","아동","장애인","청소년","복지"];

var good_i = [""];

var target = document.getElementById("good");

if(e.value == "a") var d = good_a;

else if(e.value == "b") var d = good_b;

else if(e.value == "c") var d = good_c;

else if(e.value == "d") var d = good_d;

else if(e.value == "e") var d = good_e;

else if(e.value == "f") var d = good_f;

else if(e.value == "g") var d = good_g;

else if(e.value == "h") var d = good_h;

else if(e.value == "i") var d = good_i;

target.options.length = 0;

for (x in d) {

var opt = document.createElement("option");

opt.value = d[x];

opt.innerHTML = d[x];

target.appendChild(opt);

}

}

</script>

</body>

</html>

추가하기 버튼 누를 때마다 테이블 값 생성

추가하기 버튼을 누를 때마다 밑에 테이블의 행이 추가되면서 왼쪽 옵션값과 오른쪽... 값이 테이블에 추가되고 저장되는 html파일...

버튼을 누를때 insertRow 로 추가한...

... 자바스크립트에서 테이블에 추가한 newRow 에 jsp 화면을 넣는 방법을 모르겠어요! //$('#comTable'+eq).html(htmlresult); // 실패 //jQuery...

업데이트 버튼을 누를 때 마다 가져와야...

... 있는데, 버튼을 누를 때 마다 피벗테이블 기존 데이터가 일부 사라지는 경우가... 되실 때 살펴봐 주실 수 있으실까요?? 그리고, 추가로 1일~31일 시트의 이름 입력하는 칸(표...

vba, 엑셀, excel

자바스크립트로 html 테이블 row추가하...

... 제가 버튼을 클릭하면 html 테이블의 row가 추가되면 글자 수정이... name 속성에 다른 이름을 부여하려면 문자열을 연결하여 동적으로 생성해야...

자바스크립트에서 버튼 클릭시 테이블...

HTML 문서 상단에 3행 3열짜리 테이블이 있습니다.... 존재했을 때, 테이블 추가 버튼을 세번 누르면... 삭제버튼을 누를 때마다 테이블이 없어지면...

버튼 클릭 시 div요소 추가하기

... html 에서 div로 만든 신상정보입력 테이블이 1개 있습니다.... 버튼 추가를 누를 때마다 한 개씩 div테이블도 추가되는 것이지요. 바닐라...

자바스크립트, append, appendchild, 버튼추가

버튼누르기

... 스코어보드를 생성합니다. 이 때 timer는 임의로... 이렇게 구성하면 버튼을 누를 때 타이머가 흘러가게... 커맨드를 추가하고, 각각 scoreboard players operation...

마크, 마인크래프트, Minecraft, 마크커맨드, 마인크래프트커맨드

컴활 엑셀 피벗테이블

... 인터넷을 보니 데이터이모델에 추가 버튼을 누르면 계산식이 생성이안된다고하더라... 피벗테이블로 만들려면 데이터 이모델에 추가 버튼을 누를수 밖에없는데 이럴경우...

HTML 라디오 버튼에서 여러개의 값을...

라디오버튼 이름 값 설명 o 바나나 200 과일 o 딸기 100 과일 이런식으로 HTML로 테이블을 만들어서... ^^ ---------------------------------추가...

파이썬 테이블위젯 질문입니다

... 값이 추가되게 하고싶습니다 1. 테이블위젯과 라디오 버튼, 라인 에딧 위젯을 생성합니... 버튼을 눌렀을 때 실행될 함수를...