locked
Navigating with Jquery/Jscript on This from button RRS feed

  • Question

  • User518677258 posted

    I want to extract the current values from a table row  to use in a modal Input.  My Razor Page has this  ( button in row 0, sibling rows have the values..)  Should be simple ?

    <tbody>
    <tr class="table-info"> </tr>
    @foreach (var item in Model.Products)
    {
    <tr>
    <td> <button class="btn btn-default" onclick="ShowEditModal(this)">Edit</button></td>    
    <td> @item.ProdID</td>
    <td> @item.ProdName</td>
    </tr>
    }
    </tbody>

    function ShowEditModal(somthing) { // load the row data into input modal for edit...//
    var col0Item = $().parent(); // this Jquery doesnt seem to find the elements to get the values. 
    var firstItem = $(col0Item).next();
    var secondItem = $(firstItemm).next();
    document.getElementById("ProductID").value = firstItem.value; // rowProdId;
    document.getElementById("ProductName").value = secondItem.value; // rowProdName;
    alert(document.getElementById("ProductID").value + " : " + document.getElementById("ProductName").value );  // should now be updated with row not placeholder values.
    $('#myEdit').modal('show');
    }

    Any clues on the Jquery, is it hooked to 'This' if so how & can I extract the elements value as shown ?

    Thursday, April 4, 2019 2:14 AM

Answers

  • User-2054057000 posted

    I think the situation is that you have multiple rows and each row has an edit column. On the click of this edit column you need to extract the value of the other columns of the row.

    <tr>                          //$(this).parents("tr") 
      <td>1</td>                  //$(this).parents("tr").find("td").eq(0)
      <td>Chemistry</td>          $(this).parents("tr").find("td").eq(1) 
      <td><span>Edit</span></td>  $(this).parents("tr").find("td").eq(2) 
    </tr>
    <tr>
      <td>2</td>
      <td>Maths</td>
      <td><span>Edit</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Physics</td>
      <td><span>Edit</span></td>
    </tr>
    

    The code will be:

    $("table span").click(function () {
        var td1 = $(this).parents("tr").find("td").eq(0).html(); // gives the value of first td of the current row
    
        var td2 = $(this).parents("tr").find("td").eq(1).html(); // gives the value of second td of the current row
    
        var td3 = $(this).parents("tr").find("td").eq(2).html(); // gives the value of third td of the current row
    });

    Reference jQuery tutorial - Select Elements with their Index using jQuery Eq Method – .eq()

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 4, 2019 5:20 AM
  • User839733648 posted

    Hi andrewcw

    According to your description, I suggest that you could use $(this).text to get your value.

    Here is my testing sample.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                $("td").click(function () {
                    var showtext = $(this).text();
                    alert("Text is: " + showtext);
                });
    
            })
    
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>Text1</td>
                <td>Text2</td>
                <td>Text3</td>
            </tr>
        </table>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 4, 2019 7:11 AM
  • User-2139489267 posted

    Please check the sample code at below link:

    <table border="1px">
      <tr>
        <td>1</td>
        <td>Chemistry</td>
        <td><span> <button class="btn btn-default" onclick="ShowEditModal(this)">Edit</button></span></td>
      </tr>
      <tr>
        <td>2</td>
        <td>Maths</td>
        <td><span> <button class="btn btn-default" onclick="ShowEditModal(this)">Edit</button></span></td>
      </tr>
      <tr>
        <td>3</td>
        <td>Physics</td>
        <td><span> <button class="btn btn-default" onclick="ShowEditModal(this)">Edit</button></span></td>
      </tr>
    </table>
     function ShowEditModal(button) {
        var $row = $(button).closest('tr');
        var $columns = $row.find('td');
        var values = "";
    
        $.each($columns, function(i, item) {
          values = values + $(item).text() + '\n';
        });
        alert(values);
      }

    Demo: https://jsfiddle.net/4tmunbz3/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 4, 2019 10:10 AM

All replies

  • User-2054057000 posted

    I think the situation is that you have multiple rows and each row has an edit column. On the click of this edit column you need to extract the value of the other columns of the row.

    <tr>                          //$(this).parents("tr") 
      <td>1</td>                  //$(this).parents("tr").find("td").eq(0)
      <td>Chemistry</td>          $(this).parents("tr").find("td").eq(1) 
      <td><span>Edit</span></td>  $(this).parents("tr").find("td").eq(2) 
    </tr>
    <tr>
      <td>2</td>
      <td>Maths</td>
      <td><span>Edit</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Physics</td>
      <td><span>Edit</span></td>
    </tr>
    

    The code will be:

    $("table span").click(function () {
        var td1 = $(this).parents("tr").find("td").eq(0).html(); // gives the value of first td of the current row
    
        var td2 = $(this).parents("tr").find("td").eq(1).html(); // gives the value of second td of the current row
    
        var td3 = $(this).parents("tr").find("td").eq(2).html(); // gives the value of third td of the current row
    });

    Reference jQuery tutorial - Select Elements with their Index using jQuery Eq Method – .eq()

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 4, 2019 5:20 AM
  • User839733648 posted

    Hi andrewcw

    According to your description, I suggest that you could use $(this).text to get your value.

    Here is my testing sample.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                $("td").click(function () {
                    var showtext = $(this).text();
                    alert("Text is: " + showtext);
                });
    
            })
    
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>Text1</td>
                <td>Text2</td>
                <td>Text3</td>
            </tr>
        </table>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 4, 2019 7:11 AM
  • User-2139489267 posted

    Please check the sample code at below link:

    <table border="1px">
      <tr>
        <td>1</td>
        <td>Chemistry</td>
        <td><span> <button class="btn btn-default" onclick="ShowEditModal(this)">Edit</button></span></td>
      </tr>
      <tr>
        <td>2</td>
        <td>Maths</td>
        <td><span> <button class="btn btn-default" onclick="ShowEditModal(this)">Edit</button></span></td>
      </tr>
      <tr>
        <td>3</td>
        <td>Physics</td>
        <td><span> <button class="btn btn-default" onclick="ShowEditModal(this)">Edit</button></span></td>
      </tr>
    </table>
     function ShowEditModal(button) {
        var $row = $(button).closest('tr');
        var $columns = $row.find('td');
        var values = "";
    
        $.each($columns, function(i, item) {
          values = values + $(item).text() + '\n';
        });
        alert(values);
      }

    Demo: https://jsfiddle.net/4tmunbz3/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 4, 2019 10:10 AM
  • User518677258 posted

    Many many thanks for showing me several way to get the job done - while not particularly scale able  I have this from your excellent suggestions

    function ShowEditModal(button) { // load the row data into input modal for edit...//
    var $row = $(button).closest('tr');
    var but_td = $(button).closest('td');
    document.getElementById("ProductID").value = but_td.next().text();
    document.getElementById("ProductName").value = but_td.next().next().text();
    $('#myEdit').modal('show');
    }

    Thursday, April 4, 2019 7:55 PM