nidhin nidhin - 1 month ago 14
HTML Question

How to find the value inside a span using jquery?

enter image description hereI need to find the value inside the each span when clicking on the delete button. Any help should be appreciated.When i click on the delete link i need to get back the username,projectname and module in raw.Example when i click on delete button near mysqlclient i need aasttest, mysite and mysql client as output.

<html>
<head>
</head>
<body>
<?php require_once 'cms_class.php';
$dj = new DCMSI();?>
<?php
$modules = $dj->view_user_modules(); ?>
<?php if(!$modules):?>
<?php echo ""; ?>
<?php else:?>
<h3>user modules</h3>
<table border='1'>
<tr><th>module</th><th>project</th><th colspan="2">module</th></tr>
<?foreach ($modules as $key =>$value):?>
<tr class="delete-module"><td class="username"><?php echo $value['username'];?></td>
<td class="project"><?php echo $value['project'];?></td>
<td><?foreach ($value['modules'] as $key =>$value):?><span class="module"><?php echo $value['module']?></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">delete</a></br><?php endforeach; ?></td>
<?php endforeach; ?>
<?php endif;?>
</table>
</body>
</html>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.toaster.js"></script>
<script src="js/bootbox/bootbox.min.js"></script>
<script>
$('.delete-module').off('click').on('click', function(e){
e.preventDefault();
var username = $(this).closest('tr').find('.username').html();
var project = $(this).closest('tr').find('.project').html();
var module = $(this).closest('tr').find('span.module').val();
});
</script>

Answer

You could so something like this.

$(document).ready(function() {

  $("table").on("click", "tr", function(event) {
    var obj = {};
    obj.raw = $(event.target).siblings("span").html().trim();

    obj.module =
      $(event.currentTarget).find(".moduleName").html().trim();

    obj.project = $(event.currentTarget).find(".projectName").html().trim();
    console.log(obj);
  });

});
td,
th {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Module</th>
      <th>Project</th>
      <th>Module</th>
    </tr>

  </thead>
  <tbody>
    <tr>
      <td class="moduleName">assttest
      </td>
      <td class="projectName">myssite
      </td>
      <td>
        <div>
          <span>mysql</span>
          <a href="#">delete</a>
        </div>
        <div>
          <span>django-filter</span>
          <a href="#">delete</a>
        </div>
      </td>
    </tr>
    <tr>
      <td class="moduleName">assttest
      </td>
      <td class="projectName">newsite</td>
      <td>
        <div>
          <span>Test Module</span>
          <a href="#">delete</a>
        </div>
      </td>
    </tr>
  </tbody>
</table>