javascript HTML表格条件数据拉取答案

【问题标题】：javascript HTML table conditional data pulljavascript HTML表格条件数据拉取
【发布时间】：2022-01-11 00:24:37
【问题描述】：

我有一个问题几天都无法解决。（最大的原因是你还没学过JS的逻辑“我不是程序员，只是一个爱好”）。

我的表中有 8 列 56 行。

当我点击第8列中我想要的行时，我可以将数据拉到input2，但我想将同一行的第2个单元格拉到input1。我应该怎么写代码？

$(document).ready(function () {
  $('#myTable td').click(function () {
    column_num = parseInt($(this).index()) + 1;
    row_num = parseInt($(this).parent().index()) + 1;
    // T=rows[row_num].cells.item(2).innerHTML);
    // T="Row_num =" + row_num + "  ,  Rolumn_num ="+ 2 ;
    // T=rows[row_num].cells.item(2).innerHTML);
    // T=("myTable".rows[18].cells[2].innerHTML);
    // T=("myTable".rows[18].cells[2].innerText);
    // T="myTable".rows[18].cells[2].firstChild.value;
    // T=document.getElementById('myTable').rows[row_num].cells[2].data);
    T = myTable.rows[18].cells[2].innerHTML;

    document.getElementById('input1').value = T.toFixed(2);
  });
});

$('#myTable').click(function (e) {
  if (column_num == 8) {
    document.getElementById('input2').value = $(e.target).text();
  }
});

<table width="700" onclick="myFun(event)" id="myTable">
  <tbody>
    <tr>
      <td colspan="10" width="832">
        SAC KALINLIKLARINA G&Ouml;RE SOLIDWORKS KANAL
        &Ouml;L&Ccedil;&Uuml;LERİ&nbsp; RADYUS KALINLIKLA AYNI GIRILECEK
      </td>
    </tr>
    <tr align="center">
      <td width="25">&nbsp;</td>
      <td width="65">KALINLIK (mm)</td>
      <td width="70">MALZEME</td>
      <td width="70">UZAMA (mm)</td>
      <td width="40">KANAL</td>

      <td width="75">EN K&Uuml;&Ccedil;&Uuml;K B&Uuml;K&Uuml;M</td>
      <td width="75">EN K&Uuml;&Ccedil;&Uuml;K TERS B&Uuml;K&Uuml;M</td>
      <td width="75">K-FACTOR</td>
      <td width="75">MAKS UZUNLUK</td>
    </tr>
    <tr style="background-color: orange; color: black">
      <td>1</td>
      <td>0,6</td>
      <td>DKP</td>
      <td>1,4</td>
      <td>V8</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>2</td>
      <td>0,7</td>
      <td>DKP</td>
      <td>1,65</td>
      <td>V8</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,05</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>3</td>
      <td>0,8</td>
      <td>DKP</td>
      <td>1,4</td>
      <td>V5</td>

      <td>3,5mm</td>
      <td>7,3mm</td>
      <td>0,43</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color: orange; color: black">
      <td>4</td>
      <td>0,8</td>
      <td>DKP</td>
      <td>1,65</td>
      <td>V8</td>

      <td>5,2mm</td>
      <td>7,5mm</td>
      <td>0,24</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>5</td>
      <td>1</td>
      <td>DKP</td>
      <td>1,64</td>
      <td>V5</td>

      <td>4mm</td>
      <td>6,8mm</td>
      <td>0,5</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>6</td>
      <td>1</td>
      <td>DKP</td>
      <td>1,86</td>
      <td>V8</td>

      <td>5,5mm</td>
      <td>7,80mm</td>
      <td>0,3625</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>DKP</td>
      <td>8</td>
      <td>r15</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,78</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>8</td>
      <td>1,2</td>
      <td>DKP</td>
      <td>1,87</td>
      <td>V5</td>

      <td>5mm</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color: orange; color: black">
      <td>9</td>
      <td>1,2</td>
      <td>DKP</td>
      <td>2,12</td>
      <td>V8</td>

      <td>5,7mm</td>
      <td>9mm</td>
      <td>0,4219</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>10</td>
      <td>1,2</td>
      <td>DKP</td>
      <td>2,49</td>
      <td>V12</td>

      <td>8mm</td>
      <td>10,1mm</td>
      <td>0,2203</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>11</td>
      <td>1,5</td>
      <td>DKP</td>
      <td>2,1</td>
      <td>V5</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0.66</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color: orange; color: black">
      <td>12</td>
      <td>1,5</td>
      <td>DKP</td>
      <td>2,5</td>
      <td>V8</td>

      <td>6mm</td>
      <td>8,1mm</td>
      <td>0,4855</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>13</td>
      <td>1,5</td>
      <td>DKP</td>
      <td>2,78</td>
      <td>V12</td>

      <td>8,1mm</td>
      <td>10,2mm</td>
      <td>0,4514</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>14</td>
      <td>1,5</td>
      <td>DKP</td>
      <td>3</td>
      <td>V16</td>

      <td>11,4mm</td>
      <td>15,2mm</td>
      <td>0,275</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>15</td>
      <td>1,5</td>
      <td>DKP</td>
      <td>9,75</td>
      <td>r15</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,15</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color: orange; color: black">
      <td>16</td>
      <td>2</td>
      <td>DKP</td>
      <td>3,42</td>
      <td>V12</td>

      <td>9mm</td>
      <td>11,5mm</td>
      <td>0,4578</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>17</td>
      <td>2</td>
      <td>DKP</td>
      <td>3,72</td>
      <td>V16</td>

      <td>11,4mm</td>
      <td>15,2mm</td>
      <td>0,3623</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>18</td>
      <td>2</td>
      <td>DKP</td>
      <td>3,72</td>
      <td>V16</td>

      <td>11,4mm</td>
      <td>15,2mm</td>
      <td>0,255</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>19</td>
      <td>2</td>
      <td>DKP</td>
      <td>8,6</td>
      <td>r15</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,79</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>20</td>
      <td>2</td>
      <td>DKP</td>
      <td>11</td>
      <td>r20</td>

      <td>35mm</td>
      <td>&nbsp;</td>
      <td>0,709</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color: orange; color: black">
      <td>21</td>
      <td>2,5</td>
      <td>DKP</td>
      <td>4,36</td>
      <td>V16</td>

      <td>11,7mm</td>
      <td>15.7mm</td>
      <td>0,4311</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>22</td>
      <td>3</td>
      <td>DKP</td>
      <td>4,6</td>
      <td>V12</td>

      <td>10mm</td>
      <td>&nbsp;</td>
      <td>0,57</td>
      <td rowspan="6" width="88">Boy 1500mm den kısa olacak</td>
    </tr>
    <tr style="background-color: orange; color: black">
      <td>23</td>
      <td>3</td>
      <td>DKP</td>
      <td>4,98</td>
      <td>V16</td>

      <td>12mm</td>
      <td>16.1mm</td>
      <td>0,4854</td>
    </tr>
    <tr>
      <td>24</td>
      <td>3</td>
      <td>DKP</td>
      <td>5,57</td>
      <td>V25</td>

      <td>17mm</td>
      <td>20.7mm</td>
      <td>0,36445</td>
    </tr>
    <tr>
      <td>25</td>
      <td>4</td>
      <td>DKP</td>
      <td>6,15</td>
      <td>V16</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,593</td>
    </tr>
    <tr style="background-color: orange; color: black">
      <td>26</td>
      <td>4</td>
      <td>DKP</td>
      <td>6,94</td>
      <td>V25</td>

      <td>17.5mm</td>
      <td>21.5mm</td>
      <td>0,44195</td>
    </tr>
    <tr>
      <td>27</td>
      <td>4</td>
      <td>DKP</td>
      <td>7,8</td>
      <td>V35</td>

      <td>23,3mm</td>
      <td>36mm</td>
      <td>0,3051</td>
    </tr>
    <tr>
      <td>28</td>
      <td>5</td>
      <td>DKP</td>
      <td>7,2</td>
      <td>V16</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,63</td>
      <td rowspan="8" width="88">Boy 300mm den kısa olacak</td>
    </tr>
    <tr>
      <td>29</td>
      <td>5</td>
      <td>DKP</td>
      <td>8,2</td>
      <td>V25</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,503</td>
    </tr>
    <tr>
      <td>30</td>
      <td>6</td>
      <td>DKP</td>
      <td>9,35</td>
      <td>V25</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,554</td>
    </tr>
    <tr style="background-color: orange; color: black">
      <td>31</td>
      <td>6</td>
      <td>DKP</td>
      <td>10,2</td>
      <td>V35</td>

      <td>25mm</td>
      <td>&nbsp;</td>
      <td>0,464</td>
    </tr>
    <tr>
      <td>32</td>
      <td>8</td>
      <td>DKP</td>
      <td>14</td>
      <td>V50</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0.432</td>
    </tr>
    <tr>
      <td>33</td>
      <td>10</td>
      <td>DKP</td>
      <td>16,4</td>
      <td>V50</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,5025</td>
    </tr>
    <tr>
      <td>34</td>
      <td>10</td>
      <td>DKP</td>
      <td>18,6</td>
      <td>V80</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,3625</td>
    </tr>
    <tr>
      <td>35</td>
      <td>15</td>
      <td>DKP</td>
      <td>23</td>
      <td>V50</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0.5702</td>
    </tr>
    <tr>
      <td>36</td>
      <td>1.5</td>
      <td></td>
      <td>2,5</td>
      <td>V8&nbsp;</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,485</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>37</td>
      <td>2</td>
      <td>BAKIR</td>
      <td>3,8</td>
      <td>V12</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,336</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>38</td>
      <td>3</td>
      <td>BAKIR</td>
      <td>5</td>
      <td>V16</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0.49</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>39</td>
      <td>5</td>
      <td>BAKIR</td>
      <td>8,2</td>
      <td>V25</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,503</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>40</td>
      <td>10</td>
      <td>BAKIR</td>
      <td>14,4</td>
      <td>V25</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,63</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>41</td>
      <td>5</td>
      <td>PSL</td>
      <td>8,6</td>
      <td>V25</td>

      <td>18mm</td>
      <td>25mm</td>
      <td>0,451</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>42</td>
      <td>4</td>
      <td>PSL</td>
      <td>6,2</td>
      <td>V16&nbsp;</td>

      <td>&nbsp;</td>
      <td>18.5 mm</td>
      <td>0.5596</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>43</td>
      <td>3</td>
      <td>PSL</td>
      <td>5,4</td>
      <td>V16</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,385</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>44</td>
      <td>2</td>
      <td>PSL</td>
      <td>3,8</td>
      <td>V12</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0.337</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>45</td>
      <td>2.5</td>
      <td>PSL</td>
      <td>4,84</td>
      <td>V16</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,315</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>46</td>
      <td>1,5</td>
      <td>PSL</td>
      <td>2,75</td>
      <td>V8</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,38</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>47</td>
      <td>1</td>
      <td>PSL</td>
      <td>2,1</td>
      <td>V8</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,21</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>48</td>
      <td>3</td>
      <td>AL&Uuml;</td>
      <td>9,5</td>
      <td>r15</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>0,76</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>49</td>
      <td>3</td>
      <td>AL&Uuml;</td>
      <td>4,98</td>
      <td>V16</td>

      <td>12mm</td>
      <td>16.1mm</td>
      <td>0,4854</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>50</td>
      <td>4</td>
      <td>POLI</td>
      <td>6,4</td>
      <td>V25</td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>528</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

How should I write code? 不是一个有效的问题
您的 HTML 标记不支持该问题。 input 元素在哪里？
您好，很抱歉我的错误，我还不习惯使用论坛。
没问题，但请澄清 HTML 的布局以说明您的实际需要。这些input 元素是否存在于每个表格行中？每个td 是否都包含一个input 元素？
我没有看到单个 input 元素，也不知道 edit 函数

标签： javascript html jquery html-table

【解决方案1】：

$('#myTable tr td').click(function(e)
{
document.getElementById("input2").value = this.innerHTML;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">


  <tr>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
    </tr>
    <tr>
        <td>r1c1 </td>
        <td>r1c2</td>
        <td>r1c3</td>
    </tr>
    <tr>
        <td>r2c1</td>
        <td>r2c2</td>
        <td>r2c3</td>
    </tr>
    <tr>
        <td>r3c1</td>
        <td>r3c2</td>
        <td>r3c3</td>
    </tr>
</table>

<input id="input2" >

【讨论】：

您好，谢谢您的回答，由于代码很多，我无法显示所有实际代码。我可以得到我点击的单元格的数据，到目前为止没问题。我将尝试用一个例子来解释我想做什么。第 8 列 - 4。当我点击行（row4-cell8）时，我可以将单元格中的数据拉到input2。同时，我想将数据从同一行（4row-cell2）的第 2 列拉到 input1。
什么input元素？
@ProfessorAbronsius，我编辑了你使用的代码，但是我无法添加新版本，编辑功能似乎不起作用。

【解决方案2】：

从给出的标记和描述来看，这或多或少是您希望实现的目标吗？添加了一些 CSS 以清晰显示哪些单元格/项目受到影响

document.querySelectorAll('tr:not([class="headers"])').forEach(n=>n.addEventListener('click',function(e){
  let eighth=this.querySelector('td:nth-child(8)');
  let second=this.querySelector('td:nth-child(2) input');
  let first=this.querySelector('td:nth-child(1) input');
  
  first.value=second.value;
  second.value=eighth.textContent;
  eighth.textContent='';
  
  [ first, second, eighth, this ].forEach( n=>n.classList.add('mod') );
}))

tr{cursor:pointer}
th,td{padding:0.5rem;margin:0.25rem;}
td{border:1px dotted grey}
td.mod,input.mod{background:pink}
tr.mod{background:yellow}
input{width:100px}

<table>
  <tr class='headers'>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
        <th>col4</th>
        <th>col5</th>
        <th>col6</th>
        <th>col7</th>
        <th>col8</th>
    </tr>
    <tr>
        <td><input type='text' value='r1c1' /></td>
        <td><input type='text' value='r1c2' /></td>
        <td>r1c3</td>
        <td>r1c4</td>
        <td>r1c5</td>
        <td>r1c6</td>
        <td>r1c7</td>
        <td>r1c8</td>
    </tr>
    <tr>
        <td><input type='text' value='r2c1' /></td>
        <td><input type='text' value='r2c2' /></td>
        <td>r2c3</td>
        <td>r2c4</td>
        <td>r2c5</td>
        <td>r2c6</td>
        <td>r2c7</td>
        <td>r2c8</td>
    </tr>
    <tr>
        <td><input type='text' value='r3c1' /></td>
        <td><input type='text' value='r3c2' /></td>
        <td>r3c3</td>
        <td>r3c4</td>
        <td>r3c5</td>
        <td>r3c6</td>
        <td>r3c7</td>
        <td>r3c8</td>
    </tr>
</table>

【讨论】：

【解决方案3】：

目前仅从 javascript 方面 - 您似乎正在使用 jQuery 和纯 javascript 的组合；这不是一个特别的问题，但保持一致是很好的。

所以，如果我们更倾向于 jQuery（不会有很大的不同，但 jQuery 让一些事情更容易实现），您可以调整 $(document).ready 函数，如下所示：

$(document).ready(function(){
    $("#myTable td").click(function() {

        column_num = parseInt( $(this).index() ) + 1;
        row_num = parseInt( $(this).parent().index() )+1;
        T= $('myTable').rows[row_num].cells[2].data; //The next line replaces this value, so what's the point in this line?
        T= $('myTable').rows[18].cells[2].text(); //pretty sure you only want the associated text, not any nested HTML blocks
       
        $('input1').val(T.toFixed(2));                   
    });
});

然后可以调整这个if 语句：

    if (column_num == 8){
        $('input2').val($(e.target).text());  
    }

现在最大的问题是：您在该表上有三个不同的点击事件...为什么？

您可以将其组合到单击事件中（我还将为输入添加一些通用 HTML 块，因为您将它们排除在外）：

<table id="myTable">
  <tr>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
    </tr>
    <tr>
        <td>r1c1 </td>
        <td>r1c2</td>
        <td>r1c3</td>
    </tr>
    <tr>
        <td>r2c1</td>
        <td>r2c2</td>
        <td>r2c3</td>
    </tr>
    <tr>
        <td>r3c1</td>
        <td>r3c2</td>
        <td>r3c3</td>
    </tr>
</table>

<div class="input-row">
    <input id="input1" />
    <input id="input2" />
</div>

<script>
    $(document).ready(function(){
        $("#myTable td").click(function() {

            column_num = parseInt( $(this).index() ) + 1;
            row_num = parseInt( $(this).parent().index() )+1;
            T= $('myTable').rows[row_num].cells[2].data; //The next line replaces this value, so what's the point in this line?
            T= $('myTable').rows[18].cells[2].text(); //pretty sure you only want the associated text, not any nested HTML blocks
           
            $('input1').val(T.toFixed(2));                   
            if (column_num == 8){
                $('input2').val($(e.target).text());
            }

            //If MyFun does something else, call it here 
        });
    });
</script>

【讨论】：

我可以在这里上传html文件吗？整个项目一个文件（1页）25KB

【解决方案4】：

Thank you to everyone who replied. I realize that I haven't been able to explain the question in detail.
 A code I found now solved my problem.

   $(document).ready(function()
       {
           $("#myTable td").click(function()
           {
                column_num = parseInt( $(this).index() ) + 1;
                row_num = parseInt( $(this).parent().index() )+1;
                //T= $('myTable').rows[row_num].cells[2].innerHTML;
                //T= $(this).rows[row_num].cells[2].innerHTML;           
               document.getElementById("input1").value = document.getElementById("myTable").rows[row_num].cells[1].innerHTML; // this is correct            
           });
       });

【讨论】：