Question

如何通过鼠标单击首先定位表格的单个单元格，然后将表单数据添加到表格中。

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

我很抱歉没有在这里格式化，每次我尝试代码都变得格外奇怪。

Answer 1

我想我已经明白了：

我添加了一个css类来表示所选的单元格：

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

然后我将您的javascript更改为：

$(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");
     });
});

编辑：您可能希望使用其中一个单元格选择＆＃34;选择＆＃34;已分配的类，只是为了使用户不会对输入感到困惑。或者，如果输入已选中，则只能启用输入。

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代码

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}

在表中定位单元格然后添加数据

2 个答案: