Highlight text in the cell of an html table when clicking

Question

Highlight text in the cell of an html table when clicking

Navigation

#1 by (1 votes)

0

The problem is that I have a html dynamic table, and I want to put in bold the text of a specific cell when I click on the row. try using jQuery, but it's still a bit complicated for me

Does anyone know how you could do that? Excuse me if it's something simple, but the truth is that I'm new to web programming.

This is my jQuery In this jQuery, what I do is that when I click on the icon in the row another row is expanded, (this is where I want to add the text of a cell to bold)

$(document).ready(function () {
        $('.icon').click('click', function () {

            var $pRow = $(this).parents('tr');
            var $nextRow = $pRow.next('tr');
            $nextRow.toggle();

            $(this).toggleClass('icon-s icon-e');

        });
    })

This is the body of the table

 <tbody>
                    <tr>
                        <td>
                            @if (Sub.Count > 0)
                            {
                                <span class="icon icon-e" style="float:left; cursor:pointer;" id="iconv" onclick="b()"></span>
                            }
                            else
                            {
                                <span style="display:inline-block;width:14px">&nbsp;</span>
                            }
                            @i.Nombre
                        </td>
                        <td>@i.CuentaPT</td>
                        <td>@i.Importe </td>  
                        <td>@i.importe2</td>

                    </tr>
                    <tr style="display:none;">
                        @if (Sub.Count > 0)
                        {
                            <td colspan="4" class="innerTable">
                                @NestedData.GetHtml(NuevoModelo, i.CuentaPT,1,ano,ano2)
                            </td>
                        }
                        else
                        {
                            <td colspan="4" ></td>
                        }
                    </tr>
                </tbody>

I would like to put in bold the values of Amount

javascript html ajax asp mvc

asked by Alfredo Josue Boche 24.10.2018 в 20:05

source

1 answer

How to get a POST PUT DELETE in express with postman Read full data of a json

score 1 · Accepted Answer

First of all, you have confused the concept of javascript and jquery . AJAX consists of asynchronous calls to the backend using a scripting language in the frontend (such as JavaScript). In this case, you're not using AJAX, it's a JavaScript function. I leave you a summary about AJAX that I answered in another question .

You can do what you need by adding an attribute to the row (or icon) that receives the click event so that it calls directly to the row you need to call. Here is an example of the code.

$(document).ready(function(){
  $('.icon, button').click(function(){
    let target = $(this).data('target');
    $('.' + target).toggleClass('negritas');
  });
});

.icon {
  color: blue;
}

.negritas {
  font-weight: bolder;
}

table td {
   padding: 5px;
   border: solid 1px #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="icon" data-target="target1">Cambiar target1</td><td class="icon" data-target="target2">Cambiar target2</td><td>No hace nada</td>
  </tr>
  <tr class="target1">
    <td>Valor 1</td><td>Valor 2</td><td>Valor 3</td>
  </tr>
  <tr class="target2">
    <td>Valor 1</td><td>Valor 2</td><td>Valor 3</td>
  </tr>
  <tr class="target3">
    <td>Valor 1</td><td>Valor 2</td><td>Valor 3</td>
  </tr>
</table>
<button type="button" data-target="target3">Cambiar target3</button>