Jquery 以表格中的单元格为目标，然后添加数据

如何首先用鼠标单击表格的单个单元格，然后向其中添加表单数据

---

很抱歉，没有在此处设置格式，每次我尝试时，代码的格式都会变得很奇怪。

我想我已经在此处设置好了：

我添加了一个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");
     });
});

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
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（“”+toad1+”
“+toad2+”
”+toad3+”
“+toad4+”
”；
});
$（“table.tg tr td”）。在（“单击”，函数（）{
$（“table.tg tr td”）.removeClass（“选定”）；
$（此）.addClass（“选定”）；
});
});

编辑：您可能希望在页面开始时使用一个已分配“selected”类的单元格，这样用户就不会对输入感到困惑。或者，您只能在选定单元格的情况下启用输入。

尝试以下操作：

HTML

---

告诉我当我点击td时该怎么做？点击表格单元格，选择它，填写输入，点击添加，将数据传输到选定单元格谢谢您的回复！这是供个人使用的，但当我打开它时，我会使用你的建议！这对选择单元格有效！我将尝试修改代码，以便添加输入字段中的所有数据。谢谢你帮助我！如果我不明白，我可能会再发一次。我的错误，我引入了一个错误！我已经修复了上面的代码。它位于$（“#按钮）中。单击方法如果您只需要获取将修复它的.html（）（我还更新了jsbin）我感谢您的帮助！代码似乎没有添加所有输入值。知道原因吗？jsbin是否正常工作？如果jsbin正常工作而某些本地代码不正常，则可能需要重新复制代码。

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

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



});

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}