javascriptHTML表格條件資料拉取-有解無憂

我有一個問題，我幾天都無法解決。（最大的原因是你還沒有學過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>

uj5u.com熱心網友回復：

$('#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" >

uj5u.com熱心網友回復：

從給出的標記和描述來看，這或多或少是您希望完成的嗎？為清楚起見添加了一些 CSS 以顯示哪些單元格/專案受到影響

document.querySelectorAll('tr:not([])').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>

uj5u.com熱心網友回復：

目前僅從 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>

uj5u.com熱心網友回復：

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            
           });
       });

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/407967.html

標籤：

上一篇：如何在不重新加載頁面或單擊按鈕的情況下檢查表單中的確認密碼欄位？

下一篇：如何在單擊按鈕時將選擇邊框顏色更改為紅色