javascript HTML table conditional data pull-CodePudding

I have a problem that I haven't been able to solve for a few days. (the biggest reason is that you haven't learned the logic of js yet "I'm not a programmer, just a hobby") I have an 8 column 56 row in my table. When I click on the row I want in the 8th column, I can pull the data to input2, but I want to pull the 2nd cell of the same row to input1. How should I write code?

                $(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" style="table " 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>

CodePudding user response：

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

CodePudding user response：

From the markup given and description is this more or less what you were hoping to accomplish? Added some css for clarity to show which cells / items are affected

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>

CodePudding user response：

Just from the javascript side at the moment - you seem to be using a combination of jQuery and plain javascript; that's not particularly an issue, but it's nice to be consistent.

So, if we lean more towards the jQuery (doesn't make a massive difference, but jQuery makes some things easier to implement), you can tweak the $(document).ready function as follows:

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

Then this if statement can be tweaked:

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

Now the big question is: You have three different click events on that table... Why?

You could just combine it to one click event (I'll also throw some generic HTML block in for the inputs since you left them out of the question):

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