logo
down
shadow

Clicking a button within an IE table


Clicking a button within an IE table

By : Lingfeng Zhang
Date : November 21 2020, 07:31 AM
With these it helps From my experience, you need to look at the tag name rather than the class name. This is an example of the code I generally use when finding buttons.
code :
For Each MyHTML_Element In document.getElementsByTagName("input")
     If MyHTML_Element.Type = "submit" Then
         MyHTML_Element.Click: Exit For
     End If
Next


Share : facebook icon twitter icon
Remove table row after clicking table row delete button

Remove table row after clicking table row delete button


By : avinashab
Date : March 29 2020, 07:55 AM
With these it helps You can use jQuery click instead of using onclick attribute, Try the following:
code :
$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})
Button inside table row tr, when clicking button only do button action

Button inside table row tr, when clicking button only do button action


By : Alan Travers
Date : March 29 2020, 07:55 AM
wish of those help I'm trying to have a button inside a row. , I changed your code like this:
code :
<table id="ID_to_Stop">
    <tr id="row1" onclick="alert('row 1 clicked');">
        <td id="c12">this is row 1, if you click it, it should do something
            <button id="btn1">and if you click me I should do something different</button>
        </td>
    </tr>
    <tr id="row2" onclick="alert('row 2 clicked');">
        <td id="c22">this is row 2
            <button id="btn2">click me</button>
        </td>
    </tr>
</table>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");

btn1.addEventListener("click", function (ev) {
    alert('btn 1 clicked');
    ev.stopPropagation();
}, true);

btn2.addEventListener("click", function (ev) {
    alert('btn 2 clicked');
    ev.stopPropagation();
}, true);
How to display another table by clicking a button that is inside the table?

How to display another table by clicking a button that is inside the table?


By : Gayan Meththananda
Date : March 29 2020, 07:55 AM
With these it helps You may want to use AJAX in order to achieve what you want.
Reminder: mysql_* is already deprecated, so you should consider mysqli_* instead.
code :
echo '<td> <button class="company_button">'.$row['CompanyName'].'</button></td>';
<div id="company_desc_div"></div>
$(document).on("click", ".company_button", function(){ /* WHEN A BUTTON IS CLICKED */

  var company_desc = $(this).text(); /* GET WHAT COMPANY IS IT */

  $.ajax({ /* START AJAX */
    type: "POST", /* METHOD TO USE TO PASS THE DATA */
    url: "get_company_info.php", /* FILE WHERE WE WILL PROCESS THE PASSED ON DATA */
    data: { "company_desc": company_desc }, /* DATA TO BE PASSED ON */
    success: function(result){ /* GET THE RETURNED DATA FROM get_company_info.php */
      $("#company_desc_div").html(result); /* PUT THE RETURNED DATA TO company_desc_div DIV */
    }
  });

});
<?php

  /* ESTABLISH YOUR CONNECTION */
  $con = new mysqli("localhost", "root", "", "vauban");

  /* CHECK CONNECTION */
  if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
  }

  if($stmt = $con->prepare("SELECT CompanyName, Location, Found, Website, Email, Phone, Fax FROM company WHERE CompanyName = ?")){ /* PREPARE THE STATEMENT */
    $stmt->bind_param("s", $_POST["company_desc"]); /* BIND THE PASSED ON DATA TO THE SELECT QUERY */
    $stmt->execute(); /* EXECUTE THE QUERY */
    $stmt->bind_result($companyname, $location, $found, $website, $email, $phone, $fax); /* BIND THE RESULT TO THESE VARIABLES */
    $stmt->fetch(); /* FETCH THE RESULTS */

    /* WHAT YOU ECHO IS WHAT WILL BE RETURNED TO THE AJAX REQUEST */
    echo '<table>
            <tr>
              <th>Company name</th>
              <td colspan="3">'.$companyname.'</td>
            </tr>
            <tr>
              <th>Location</th>
              <td colspan="3">'.$location.'</th>
            </tr>
            <tr>
              <th>Found</th>
              <td colspan="3">'.$found.'</td>
            </tr>
            <tr>
              <th>Website</th>
              <td colspan="3">'.$website.'</td>
            </tr>
            <tr>
              <th rowspan="3">Contact</th>
              <th>Email</th>
              <td>'.$email.'</td>
            </tr>
            <tr>
              <th>Phone</th>
              <td colspan="3">'.$phone.'</td>
            </tr>
            <tr>
              <th>Fax</th>
              <td colspan="3">'.$fax.'</td>
            </tr>
          </table>';

    $stmt->close();

  } /* END OF PREPARED STATEMENT */

?>
How to make a show a table on clicking a button defined in <button> using jquery

How to make a show a table on clicking a button defined in <button> using jquery


By : Manuel strano
Date : March 29 2020, 07:55 AM
will help you By default
Bootstrap collapsing table row when clicking button in table row

Bootstrap collapsing table row when clicking button in table row


By : Joe vdH
Date : March 29 2020, 07:55 AM
wish helps you In my snippet you can see a simple table with one row. In the row you can see a button group. Now, if you click the 'main' button (the reset one) you can see that the table row under the one you clicked will show up. This is supposed to happen only when you click the table row, but not when you click the button inside the table row. , Answering the original question as well as the one in comment.
code :
.collapsing {
    -webkit-transition: none !important;
    transition: none !important;
    display: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container body-content">
    <table class="table m-0">
      <thead class="thead-light">
        <tr>
          <th>
            <span class="d-inline-block align-middle">table head</span>
            <button type="button" class="btn btn-secondary btn-sm float-right">button text</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
          <td>
            table content
            <div class="btn-group float-right align-top" onclick=";">
              <button type="button" class="btn btn-warning" onclick="alert('reset!');event.stopPropagation();">reset</button>
              <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
              <div class="dropdown-menu bg-danger">
                <a class="dropdown-item bg-danger text-white" onclick="alert('delete!');">delete</a>
              </div>
            </div>
          </td>
        </tr>
        <tr class="collapse" id="collapse2">
          <td>
            <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 1">
              <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #1AFF00" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 1</div>
            </div>
            <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 2">
              <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #2B00FF" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 2</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <script>
      $(window).on('load', function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </div>
</body>

</html>
Related Posts Related Posts :
  • Ems or pixels in fluid layouts?
  • Html/CSS aligning the text of a label
  • How to have background changed(border addition) when size becomes larger than 1024 pixels
  • absolute positioned div not expanding in height
  • RouterLink is not working properly dynamically in angular 6
  • Simple HTML rendering issue
  • Best Approach to separate Form sections
  • How to Organize Phonegap HTML Files
  • Wrap a long single word using CSS
  • I am trying to implement a hover effect using CSS3 Transitions
  • How can I avoid hard coding line height while vertically centering element in a div?
  • Bootstrap3 - Removed container-fluid
  • Bootstrap framework not responsive for asp.net webform
  • How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w
  • Div to ignore html tags
  • Prevent caching and stale content with a static web site
  • Is there a way to change the whole document with one selector in CSS?
  • why cant I click om my navigationbar links?
  • Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?
  • css border around multiple links/images
  • 'No data was received in the uploaded file', but file is not empty
  • How input boxes save previous entries
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org