selector column table jquery
0
Hello everyone I hope you can help me
I have the code that I need to do this by column. It currently just lets me select a number, not all.
I have tried in various ways, but I still can not find the solution.
Thank you
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
if ($(this).css("background-color") != "rgb(26, 179, 148)") {
$(this).css("background-color", "rgb(26, 179, 148)");
$(this).css("color", "white");
} else {
$(this).css("background-color", "rgb(255,255,255)");
$(this).css("color", "#676a6c");
}
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>javascript jquery html css
edited Nov 13 '18 at 19:43
ksav
5,31021331
asked Nov 13 '18 at 19:25
Oscar DiazOscar Diaz
34
add a comment |
0
Hello everyone I hope you can help me
I have the code that I need to do this by column. It currently just lets me select a number, not all.
I have tried in various ways, but I still can not find the solution.
Thank you
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
if ($(this).css("background-color") != "rgb(26, 179, 148)") {
$(this).css("background-color", "rgb(26, 179, 148)");
$(this).css("color", "white");
} else {
$(this).css("background-color", "rgb(255,255,255)");
$(this).css("color", "#676a6c");
}
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>javascript jquery html css
edited Nov 13 '18 at 19:43
ksav
5,31021331
asked Nov 13 '18 at 19:25
Oscar DiazOscar Diaz
34
I can't understand your explanation of what you're trying to do.
– Barmar
Nov 13 '18 at 19:33
@Barmar In the first column the numbers 6 and 5 are shown if you click on one of them you select what I need is that I only let me select a number by column that is to say that in that column I only let me select the 6 or the 5
– Oscar Diaz
Nov 13 '18 at 19:42
FYI: You should stop using.bind(), it has been deprecated. Use.on()instead.
– Barmar
Nov 13 '18 at 19:46
I still can't understand what you want. Do you have a friend who speaks English better?
– Barmar
Nov 13 '18 at 19:47
Do you want the user to be able to select the entire column of numbers(Example: col with 6,5) by clicking on any of the two cells containing those numbers?
– user2300867
Nov 13 '18 at 19:53
add a comment |
0
0
0
Hello everyone I hope you can help me
I have the code that I need to do this by column. It currently just lets me select a number, not all.
I have tried in various ways, but I still can not find the solution.
Thank you
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
if ($(this).css("background-color") != "rgb(26, 179, 148)") {
$(this).css("background-color", "rgb(26, 179, 148)");
$(this).css("color", "white");
} else {
$(this).css("background-color", "rgb(255,255,255)");
$(this).css("color", "#676a6c");
}
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>javascript jquery html css
edited Nov 13 '18 at 19:43
ksav
5,31021331
asked Nov 13 '18 at 19:25
Oscar DiazOscar Diaz
34
Hello everyone I hope you can help me
I have the code that I need to do this by column. It currently just lets me select a number, not all.
I have tried in various ways, but I still can not find the solution.
Thank you
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
if ($(this).css("background-color") != "rgb(26, 179, 148)") {
$(this).css("background-color", "rgb(26, 179, 148)");
$(this).css("color", "white");
} else {
$(this).css("background-color", "rgb(255,255,255)");
$(this).css("color", "#676a6c");
}
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>$(document).ready(function() {
$(".row_number").bind("click", function(e) {
if ($(this).css("background-color") != "rgb(26, 179, 148)") {
$(this).css("background-color", "rgb(26, 179, 148)");
$(this).css("color", "white");
} else {
$(this).css("background-color", "rgb(255,255,255)");
$(this).css("color", "#676a6c");
}
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>$(document).ready(function() {
$(".row_number").bind("click", function(e) {
if ($(this).css("background-color") != "rgb(26, 179, 148)") {
$(this).css("background-color", "rgb(26, 179, 148)");
$(this).css("color", "white");
} else {
$(this).css("background-color", "rgb(255,255,255)");
$(this).css("color", "#676a6c");
}
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>javascript jquery html css
javascript jquery html css
edited Nov 13 '18 at 19:43
ksav
5,31021331
asked Nov 13 '18 at 19:25
Oscar DiazOscar Diaz
34
edited Nov 13 '18 at 19:43
ksav
5,31021331
asked Nov 13 '18 at 19:25
Oscar DiazOscar Diaz
34
edited Nov 13 '18 at 19:43
ksav
5,31021331
edited Nov 13 '18 at 19:43
ksav
5,31021331
edited Nov 13 '18 at 19:43
ksav
5,31021331
5,31021331
asked Nov 13 '18 at 19:25
Oscar DiazOscar Diaz
34
asked Nov 13 '18 at 19:25
Oscar DiazOscar Diaz
34
asked Nov 13 '18 at 19:25
Oscar DiazOscar Diaz
34
34
I can't understand your explanation of what you're trying to do.
– Barmar
Nov 13 '18 at 19:33
@Barmar In the first column the numbers 6 and 5 are shown if you click on one of them you select what I need is that I only let me select a number by column that is to say that in that column I only let me select the 6 or the 5
– Oscar Diaz
Nov 13 '18 at 19:42
FYI: You should stop using.bind(), it has been deprecated. Use.on()instead.
– Barmar
Nov 13 '18 at 19:46
I still can't understand what you want. Do you have a friend who speaks English better?
– Barmar
Nov 13 '18 at 19:47
Do you want the user to be able to select the entire column of numbers(Example: col with 6,5) by clicking on any of the two cells containing those numbers?
– user2300867
Nov 13 '18 at 19:53
add a comment |
I can't understand your explanation of what you're trying to do.
– Barmar
Nov 13 '18 at 19:33
@Barmar In the first column the numbers 6 and 5 are shown if you click on one of them you select what I need is that I only let me select a number by column that is to say that in that column I only let me select the 6 or the 5
– Oscar Diaz
Nov 13 '18 at 19:42
FYI: You should stop using.bind(), it has been deprecated. Use.on()instead.
– Barmar
Nov 13 '18 at 19:46
I still can't understand what you want. Do you have a friend who speaks English better?
– Barmar
Nov 13 '18 at 19:47
Do you want the user to be able to select the entire column of numbers(Example: col with 6,5) by clicking on any of the two cells containing those numbers?
– user2300867
Nov 13 '18 at 19:53
I can't understand your explanation of what you're trying to do.
– Barmar
Nov 13 '18 at 19:33
I can't understand your explanation of what you're trying to do.
– Barmar
Nov 13 '18 at 19:33
@Barmar In the first column the numbers 6 and 5 are shown if you click on one of them you select what I need is that I only let me select a number by column that is to say that in that column I only let me select the 6 or the 5
– Oscar Diaz
Nov 13 '18 at 19:42
@Barmar In the first column the numbers 6 and 5 are shown if you click on one of them you select what I need is that I only let me select a number by column that is to say that in that column I only let me select the 6 or the 5
– Oscar Diaz
Nov 13 '18 at 19:42
FYI: You should stop using
.bind(), it has been deprecated. Use .on() instead.– Barmar
Nov 13 '18 at 19:46
FYI: You should stop using
.bind(), it has been deprecated. Use .on() instead.– Barmar
Nov 13 '18 at 19:46
I still can't understand what you want. Do you have a friend who speaks English better?
– Barmar
Nov 13 '18 at 19:47
I still can't understand what you want. Do you have a friend who speaks English better?
– Barmar
Nov 13 '18 at 19:47
Do you want the user to be able to select the entire column of numbers(Example: col with 6,5) by clicking on any of the two cells containing those numbers?
– user2300867
Nov 13 '18 at 19:53
Do you want the user to be able to select the entire column of numbers(Example: col with 6,5) by clicking on any of the two cells containing those numbers?
– user2300867
Nov 13 '18 at 19:53
add a comment |
2 Answers
2
active
oldest
votes
0
Assuming:
In the first column the numbers 6 and 5 are shown if you click on one of them you select [it] - what I need is that it only lets me select a single number per column, that is to say that in that column it only lets me select the 6 or the 5
This also assumes that
you want to keep your existing HTML
(see @ksav's answer for an alternative that uses data- attributes to group similar data)
When you select/click one, it needs to turn off any others. This is much easier using classes than setting colours directly:
$(".row_number").on("click", function(e) {
$(".row_number").removeClass("selected");
$(this).addClass("selected");
})
this will work for all .row_number, but your requirement is / appears to be within a single column, which is a bit trickier:
You need to find which column has been clicked, then remove the class from only cells in that column:
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
Giving:
$(document).ready(function() {
$(".row_number").on("click", function(e) {
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
$(this).addClass("selected");
})
}).selected { background-color: rgb(26,179,148); color:white; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>answered Nov 13 '18 at 19:58
freedomn-mfreedomn-m
12.3k31943
thank you very much was just what I was looking for
– Oscar Diaz
Nov 26 '18 at 17:11
add a comment |
0
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
const type = $(this).data('type')
const $sameOfType = $('[data-type="' + type + '"]')
$sameOfType.removeClass('selected')
$(this).addClass('selected')
})
}).selected {
background-color: rgb(26, 179, 148);
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number " data-number="1" colspan="2" data-type="motora">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number " colspan="2" data-type="verbal">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number " data-type="ocular">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2" data-type="motora">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2" data-type="verbal">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number" data-type="ocular">3</td>
</tr>
</table>answered Nov 13 '18 at 20:03
ksavksav
5,31021331
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288170%2fselector-column-table-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Assuming:
In the first column the numbers 6 and 5 are shown if you click on one of them you select [it] - what I need is that it only lets me select a single number per column, that is to say that in that column it only lets me select the 6 or the 5
This also assumes that
you want to keep your existing HTML
(see @ksav's answer for an alternative that uses data- attributes to group similar data)
When you select/click one, it needs to turn off any others. This is much easier using classes than setting colours directly:
$(".row_number").on("click", function(e) {
$(".row_number").removeClass("selected");
$(this).addClass("selected");
})
this will work for all .row_number, but your requirement is / appears to be within a single column, which is a bit trickier:
You need to find which column has been clicked, then remove the class from only cells in that column:
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
Giving:
$(document).ready(function() {
$(".row_number").on("click", function(e) {
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
$(this).addClass("selected");
})
}).selected { background-color: rgb(26,179,148); color:white; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>answered Nov 13 '18 at 19:58
freedomn-mfreedomn-m
12.3k31943
thank you very much was just what I was looking for
– Oscar Diaz
Nov 26 '18 at 17:11
add a comment |
0
Assuming:
In the first column the numbers 6 and 5 are shown if you click on one of them you select [it] - what I need is that it only lets me select a single number per column, that is to say that in that column it only lets me select the 6 or the 5
This also assumes that
you want to keep your existing HTML
(see @ksav's answer for an alternative that uses data- attributes to group similar data)
When you select/click one, it needs to turn off any others. This is much easier using classes than setting colours directly:
$(".row_number").on("click", function(e) {
$(".row_number").removeClass("selected");
$(this).addClass("selected");
})
this will work for all .row_number, but your requirement is / appears to be within a single column, which is a bit trickier:
You need to find which column has been clicked, then remove the class from only cells in that column:
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
Giving:
$(document).ready(function() {
$(".row_number").on("click", function(e) {
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
$(this).addClass("selected");
})
}).selected { background-color: rgb(26,179,148); color:white; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>answered Nov 13 '18 at 19:58
freedomn-mfreedomn-m
12.3k31943
thank you very much was just what I was looking for
– Oscar Diaz
Nov 26 '18 at 17:11
add a comment |
0
0
0
Assuming:
In the first column the numbers 6 and 5 are shown if you click on one of them you select [it] - what I need is that it only lets me select a single number per column, that is to say that in that column it only lets me select the 6 or the 5
This also assumes that
you want to keep your existing HTML
(see @ksav's answer for an alternative that uses data- attributes to group similar data)
When you select/click one, it needs to turn off any others. This is much easier using classes than setting colours directly:
$(".row_number").on("click", function(e) {
$(".row_number").removeClass("selected");
$(this).addClass("selected");
})
this will work for all .row_number, but your requirement is / appears to be within a single column, which is a bit trickier:
You need to find which column has been clicked, then remove the class from only cells in that column:
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
Giving:
$(document).ready(function() {
$(".row_number").on("click", function(e) {
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
$(this).addClass("selected");
})
}).selected { background-color: rgb(26,179,148); color:white; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>answered Nov 13 '18 at 19:58
freedomn-mfreedomn-m
12.3k31943
Assuming:
In the first column the numbers 6 and 5 are shown if you click on one of them you select [it] - what I need is that it only lets me select a single number per column, that is to say that in that column it only lets me select the 6 or the 5
This also assumes that
you want to keep your existing HTML
(see @ksav's answer for an alternative that uses data- attributes to group similar data)
When you select/click one, it needs to turn off any others. This is much easier using classes than setting colours directly:
$(".row_number").on("click", function(e) {
$(".row_number").removeClass("selected");
$(this).addClass("selected");
})
this will work for all .row_number, but your requirement is / appears to be within a single column, which is a bit trickier:
You need to find which column has been clicked, then remove the class from only cells in that column:
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
Giving:
$(document).ready(function() {
$(".row_number").on("click", function(e) {
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
$(this).addClass("selected");
})
}).selected { background-color: rgb(26,179,148); color:white; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>$(document).ready(function() {
$(".row_number").on("click", function(e) {
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
$(this).addClass("selected");
})
}).selected { background-color: rgb(26,179,148); color:white; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>$(document).ready(function() {
$(".row_number").on("click", function(e) {
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
$(this).addClass("selected");
})
}).selected { background-color: rgb(26,179,148); color:white; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>answered Nov 13 '18 at 19:58
freedomn-mfreedomn-m
12.3k31943
edited Nov 13 '18 at 20:09
answered Nov 13 '18 at 19:58
freedomn-mfreedomn-m
12.3k31943
answered Nov 13 '18 at 19:58
freedomn-mfreedomn-m
12.3k31943
answered Nov 13 '18 at 19:58
freedomn-mfreedomn-m
12.3k31943
12.3k31943
thank you very much was just what I was looking for
– Oscar Diaz
Nov 26 '18 at 17:11
add a comment |
thank you very much was just what I was looking for
– Oscar Diaz
Nov 26 '18 at 17:11
thank you very much was just what I was looking for
– Oscar Diaz
Nov 26 '18 at 17:11
thank you very much was just what I was looking for
– Oscar Diaz
Nov 26 '18 at 17:11
add a comment |
0
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
const type = $(this).data('type')
const $sameOfType = $('[data-type="' + type + '"]')
$sameOfType.removeClass('selected')
$(this).addClass('selected')
})
}).selected {
background-color: rgb(26, 179, 148);
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number " data-number="1" colspan="2" data-type="motora">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number " colspan="2" data-type="verbal">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number " data-type="ocular">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2" data-type="motora">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2" data-type="verbal">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number" data-type="ocular">3</td>
</tr>
</table>answered Nov 13 '18 at 20:03
ksavksav
5,31021331
add a comment |
0
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
const type = $(this).data('type')
const $sameOfType = $('[data-type="' + type + '"]')
$sameOfType.removeClass('selected')
$(this).addClass('selected')
})
}).selected {
background-color: rgb(26, 179, 148);
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number " data-number="1" colspan="2" data-type="motora">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number " colspan="2" data-type="verbal">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number " data-type="ocular">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2" data-type="motora">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2" data-type="verbal">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number" data-type="ocular">3</td>
</tr>
</table>answered Nov 13 '18 at 20:03
ksavksav
5,31021331
add a comment |
0
0
0
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
const type = $(this).data('type')
const $sameOfType = $('[data-type="' + type + '"]')
$sameOfType.removeClass('selected')
$(this).addClass('selected')
})
}).selected {
background-color: rgb(26, 179, 148);
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number " data-number="1" colspan="2" data-type="motora">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number " colspan="2" data-type="verbal">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number " data-type="ocular">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2" data-type="motora">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2" data-type="verbal">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number" data-type="ocular">3</td>
</tr>
</table>answered Nov 13 '18 at 20:03
ksavksav
5,31021331
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
const type = $(this).data('type')
const $sameOfType = $('[data-type="' + type + '"]')
$sameOfType.removeClass('selected')
$(this).addClass('selected')
})
}).selected {
background-color: rgb(26, 179, 148);
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number " data-number="1" colspan="2" data-type="motora">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number " colspan="2" data-type="verbal">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number " data-type="ocular">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2" data-type="motora">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2" data-type="verbal">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number" data-type="ocular">3</td>
</tr>
</table>$(document).ready(function() {
$(".row_number").bind("click", function(e) {
const type = $(this).data('type')
const $sameOfType = $('[data-type="' + type + '"]')
$sameOfType.removeClass('selected')
$(this).addClass('selected')
})
}).selected {
background-color: rgb(26, 179, 148);
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number " data-number="1" colspan="2" data-type="motora">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number " colspan="2" data-type="verbal">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number " data-type="ocular">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2" data-type="motora">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2" data-type="verbal">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number" data-type="ocular">3</td>
</tr>
</table>$(document).ready(function() {
$(".row_number").bind("click", function(e) {
const type = $(this).data('type')
const $sameOfType = $('[data-type="' + type + '"]')
$sameOfType.removeClass('selected')
$(this).addClass('selected')
})
}).selected {
background-color: rgb(26, 179, 148);
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number " data-number="1" colspan="2" data-type="motora">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number " colspan="2" data-type="verbal">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number " data-type="ocular">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2" data-type="motora">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2" data-type="verbal">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number" data-type="ocular">3</td>
</tr>
</table>answered Nov 13 '18 at 20:03
ksavksav
5,31021331
answered Nov 13 '18 at 20:03
ksavksav
5,31021331
answered Nov 13 '18 at 20:03
ksavksav
5,31021331
answered Nov 13 '18 at 20:03
ksavksav
5,31021331
5,31021331
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288170%2fselector-column-table-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I can't understand your explanation of what you're trying to do.
– Barmar
Nov 13 '18 at 19:33
@Barmar In the first column the numbers 6 and 5 are shown if you click on one of them you select what I need is that I only let me select a number by column that is to say that in that column I only let me select the 6 or the 5
– Oscar Diaz
Nov 13 '18 at 19:42
FYI: You should stop using
.bind(), it has been deprecated. Use.on()instead.– Barmar
Nov 13 '18 at 19:46
I still can't understand what you want. Do you have a friend who speaks English better?
– Barmar
Nov 13 '18 at 19:47
Do you want the user to be able to select the entire column of numbers(Example: col with 6,5) by clicking on any of the two cells containing those numbers?
– user2300867
Nov 13 '18 at 19:53