표의 셀을 타겟팅 한 다음 데이터를 추가하십시오.

Question

먼저 마우스를 클릭하여 테이블의 개별 셀을 대상으로 지정하고 양식 데이터를 추가하십시오.

http://jsbin.com/cazifezaro/1/edit?html,css,js,output

은 임 미안 여기에 서식하지 않는, 때마다 나는 코드가 이상하게 포맷된다하려고합니다.

Answer 1

은 내가 여기있어 생각 :

td.selected { 
    border: 3px solid black; 
} 

다음

내가 당신의 자바 스크립트를 변경 :

http://jsbin.com/yovigidufo/3/edit

내가 선택한 셀을 표시하기 위해 CSS 클래스를 추가

$(document).ready(function() { 
    $('#button').click(function() { 
     var toAdd1 = $('input[name=strain]').val(); 
     var toAdd2 = $('input[name=gen]').val(); 
     var toAdd3 = $('input[name=veg]').val(); 
     var toAdd4 = $('input[name=flower]').val(); 

     $("table.tg tr td.selected").html("<p>"+toAdd1+"</p><p>"+toAdd2+"</p><p>"+toAdd3+"</p><p>"+toAdd4+"</p>"); 

    }); 

    $("table.tg tr td").on("click", function() { 
     $("table.tg tr td").removeClass("selected"); 
     $(this).addClass("selected"); 
    }); 
}); 

편집 : 셀 중 하나를 사용하여 페이지를 시작하고 싶을 수 있습니다. 사용자가 입력에 대해 혼동하지 않도록 "selected"클래스가 이미 할당되어 있습니다. 또는 셀을 선택한 경우에만 입력을 활성화 할 수 있습니다.

Answer 2

이 시도 : JSFiddle

HTML

 <form> 
     Strain Name: <input type="text" class="values" name="strain" value="Type your text here!"> <br /> 
     Generation: <input type="text" class="values" name="gen" value="Type your text here!"><br /> 
     Veg Start: <input type="text" class="values" name="veg" value="Type your text here!">  <br /> 
     Flower Start: <input type="text" class="values" name="flower" value="Type your text here!"><br /> 

     </form> 
     <button id="button">Add</button> 
     <div id="messages"></div> 
     <div id="table1"><table class="tg"> 
    <tr> 
    <th class="tg-hdgz" id="a1">Plant A1</th> 
    <th class="tg-hdgz" id="a2">Plant A2</th> 
    <th class="tg-hdgz">Plant A3</th> 
    <th class="tg-hdgz">Plant A4</th> 
    <th class="tg-hdgz">Plant A5</th> 
    <th class="tg-hdgz">Plant A6</th> 
    </tr> 
    <tr> 
    <td class="tg-hdgz">Plant B1</td> 
    <td class="tg-hdgz">Plant B2</td> 
    <td class="tg-hdgz">Plant B3</td> 
    <td class="tg-hdgz">Plant B4</td> 
    <td class="tg-hdgz">Plant B5</td> 
    <td class="tg-hdgz">Plant B6</td> 
    </tr> 
    <tr> 
    <td class="tg-hdgz">Plant C1</td> 
    <td class="tg-hdgz">Plant C2</td> 
    <td class="tg-hdgz">Plant C3</td> 
    <td class="tg-hdgz">Plant C4</td> 
    <td class="tg-hdgz">Plant C5</td> 
    <td class="tg-hdgz">Plant C6</td> 
    </tr> 
    <tr> 
    <td class="tg-hdgz">Plant D1</td> 
    <td class="tg-hdgz">Plant D2</td> 
    <td class="tg-hdgz">Plant D3</td> 
    <td class="tg-hdgz">Plant D4</td> 
    <td class="tg-hdgz">Plant D5</td> 
    <td class="tg-hdgz">Plant D6</td> 
    </tr> 
</table></div> 

jQuery를 :

$(document).ready(function() { 


    $('#button').click(function() { 

     var toAdd1 = $('input[name=strain]').val(); 
     var toAdd2 = $('input[name=gen]').val(); 
     var toAdd3 = $('input[name=veg]').val(); 
     var toAdd4 = $('input[name=flower]').val(); 
     //Variables for for input data(strain, gen etc..) 

     $('.sel').append("<p>"+toAdd1+"</p>","<p>"+toAdd2+"</p>","<p>"+toAdd3+"</p>","<p>"+toAdd4+"</p>"); 

     // This Allows me to add all the for inputs together. 


    }); 

    $('.tg-hdgz').on('click', function(){ 

    $('.tg-hdgz').removeClass('sel'); 
    $(this).addClass('sel'); 
    }); 



}); 

CSS 코드 내가 TD 클릭 할 때 무엇을해야

form { 
    font-size: 12px; 
    font-family: Verdana, Arial, Sans-Serif; 
    display: inline-block; 
} 
#messages { 
    font-size: 14px; 
    font-family: Garamond, Times, Serif; 
} 

.tg {border-collapse:collapse;border-spacing:0;} 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:13px 13px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:13px 13px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
table .sel{font-weight:bold;background-color:#985401 !important;text-align:center} 
.tg .tg-hdgz{font-weight:bold;background-color:#036400;text-align:center}