How do I add functionality to a button in a table in javascript

Question

How do I add functionality to a button in a table in javascript

Navigation

#1 by (0 votes)

0

I need the button to take the values of the row it is in and save them for use in a java class

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>CyberBids</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}

    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }

    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
  </style>
</head>
<body>
<script>
    $(document).ready(function(){
        $('#Productos').dataTable();
    });
</script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <div class="content"><img src="images/cyberBidsLogo.png" width="100" height="100" alt="" /></div>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="inicioAdmin.htm">Home</a></li>
        <li><a href="listas.htm">Rankings</a></li>
        <li><a href="productos.htm">Productos</a></li>
        <li><a href="subastas.htm">Subastas</a></li>
        <li><a href="usuarios.htm">Usuarios</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.htm"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-6 sidenav">
      <table class="table table-striped table-bordered table-hover" id="Productos" cellspacing="0" width="100%">
            <thead >
                <tr>
                    <th>Nombre</th>
                    <th>Precio</th>
                    <th>Cantidad</th>
                    <th>Descripci&oacute;n</th>
                    <th></th>
                </tr>
            </thead>

            <c:forEach items="${listaProduct}" var="dato" >
                <tr>
                    <td>${dato.nombre}</td>
                    <td>${dato.precio}</td>
                    <td>${dato.cantidad}</td>
                    <td>${dato.descripcion}</td>

                    <td align="center">
                        <button class="btn btn-info" onclick="">B</button>
                    </td>

                </tr>
            </c:forEach>
        </table>
    </div>
    <div class="col-sm-6 text-left"> 

          <h2>Ingreso de productos</h2>
            <h3>Agregar nuevo producto para subastar</h3>

                <div class="panel-body">
                    <form action="ProductoServlet" method="post">
                        <div class="form-group">
                            <label for="nombre">Nombre</label>
                            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="" required="true">
                        </div>
                        <div class="form-group">
                            <label for="descripcion">Descripcion</label>
                            <input type="text" class="form-control" id="descripcion" name="descripcion" placeholder="" required="true">
                        </div>
                        <div class="form-group">
                            <label for="cantidad">Cantidad</label>
                            <input type="number" class="form-control" id="cantidad" name="cantidad" placeholder="" required="true">
                        </div>
                        <div class="form-group">
                            <label for="precio">Precio</label>
                            <input type="number" class="form-control" id="precio" name="precio" placeholder="" required="true">
                        </div>
                        <div class="form-group">
                            <button for="summit" class="btn btn-access">Guardar</button>
                        </div>
                    </form>

                </div>

    </div>

  </div>
</div>

<footer class="container-fluid text-center">

</footer>

</body>
</html>

I'm doing it in netbeans, I'm just starting to use the web so no matter how obvious the answer, I do not know how to do it.

java javascript html web netbeans-8.2

asked by TK154 23.06.2018 в 16:22

source

1 answer

Problem with script to move files Regular expressions in C #

score 0 · Accepted Answer

will be to add the data in the button as it appears

<button class="massshow-modal btn btn-success" 
                data-nombre="45"
                data-descripcion="1434_34"

    >
<span class="glyphicon glyphicon-eye-open"></span> Ver</button>

in the javasript file enter the code here

  $(document).on('click', '.massshow-modal', function() {   
     $('#nombre').val($(this).data('nombre'));
     $('#descripcion').val($(this).data('descripcion'));
    });