jquery selector for a single cell of a "table" made with bootstrap

Asked

Viewed 73 times

1

Simple question, but I can’t find a way to do it. I need to replace a value within one of the "cells" of each row in this table. Follows the code (extensive but simple):

                        <div class="col s12">
                            <div class="analists">
                                    <div class="analists-header">
                                            <div class="line">
                                                <div class="col s3">
                                                    Login
                                                </div>
                                                <div class="col s5">
                                                    Nome
                                                </div>
                                                <div class="col s2">
                                                    Chat em Andamento
                                                </div>
                                                <div class="col s2">
                                                    Max Chats
                                                </div>
                                            </div>
                                    </div>

                                <div class="analists-content">
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601305
                                                    </div>
                                                    <div class="col s5">
                                                        601305
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601150
                                                    </div>
                                                    <div class="col s5">
                                                        601150
                                                    </div>
                                                    <div class="col s2">
                                                        2
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601160
                                                    </div>
                                                    <div class="col s5">
                                                        601160
                                                    </div>
                                                    <div class="col s2">
                                                        1
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601560
                                                    </div>
                                                    <div class="col s5">
                                                        601560
                                                    </div>
                                                    <div class="col s2">
                                                        2
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601226
                                                    </div>
                                                    <div class="col s5">
                                                        601226
                                                    </div>
                                                    <div class="col s2">
                                                        3
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601457
                                                    </div>
                                                    <div class="col s5">
                                                        601457
                                                    </div>
                                                    <div class="col s2">
                                                        3
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                </div>
                            </div>
                        </div>

Well. I tried for a long time, and the closest I could get was this: 

$('.s3').text($('.s3').text().includes('601305') ? 'teste' : '');

to see if I could replace the value of 601305 in the table in the first column with the word 'test', but in doing so I end up replacing it in the whole column, all cells are equal. I need to put a different word for each code in each cell, so I need to refer only to that cell in the table, not the whole column. The problem is that the class of all rows/columns is the same, I cannot refer to one alone.

How should I proceed?

javascript twitter-bootstrap

  • Just one observation, ids should be unique in HTML documents.

  • I agree, however, I didn’t make the site, I’m just developing a script to be added to it, I can’t change the rest.

  • Following the observation that was said, the ensure that the id is unique is more important than it seems as it will ensure that your page is correct, and repeated ids can cause various parts of your site may not work properly, since <input>, <radio>, css, javascript, etc. So I strongly advise you to change the ids and respectively adjust the rest of the page to work with the new ids/classes. Enjoy and see how the documentation indicates that the id attribute must be unique on a page.

  • 1

    Isac, I don’t have access/power to change the html of the page. It was made by a company outsourced to my company, and I was asked to do only the script for internal use. I understand the importance of id being unique to each object, and it was exactly because it was not unique that I had this problem, but I have no way to change it on the page unfortunately.

  • Well, if you can’t move, there’s nothing you can do about it. But as an aside I think it sucks that a third-party company gives you a site with pages that has repeated id’s, but turns out to be the professionalism we see around (just a vent :D)!

2 answers

2


$(".s3:contains('601457')").html("TESTE");
  • 1

    It would be interesting to explain the selector you used, perhaps even adding a reference to the documentation so that the author can read more if he wants. In addition it is also important to mention that this is a non-CSS3 Jquery selector. That is, there are always interesting things to mention so that everyone can learn and not simply play a code without any text explaining what it did and why it works.

  • @Isac I agree, however, I have already gone after to discover this selector, and how it works and for me, specifically, his answer was enough for me to be able to do, and how it works I find out myself, I was having a hard time finding a way to do it. If it exists, and it’s so simple, I go after it and find out how it works. Thank you both

  • @Máttheusspoo The point is that, while it’s good that each person has the initiative to search for things and realize, which is part of the reason they ask on Stackoverflow’s networks, every answer on Stackoverflow should be as complete as possible as long as it doesn’t escape the question. In a simple case like this one even preventing the person from having to do another search to know that there is a pseudo selector :contains and how it works. In the end we want this to be a source of knowledge by itself and not a starting point for further searches.

  • @Isac, I understand. Thanks for the clarification.

1

Supplemented by the previous answer for two reasons

  1. Ensure all column widths
  2. That the grid is from class analists
  3. That the code is exactly the same as

$('.analists .s1,.analists .s2, .analists .s3, .analists .s4, .analists .s5, .analists .s6, .analists .s7, .analists .s8, .analists .s9, .analists .s10, .analists .s11, .analists .s12 ').each(function (index, div) {						
	if (div.innerText.trim() == "601305") {
		div.innerText="teste"
	}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col s12">
		<div class="analists">
			<div class="analists-header">
				<div class="line">
					<div class="col s3">
						Login
					</div>
					<div class="col s5">
						Nome
					</div>
					<div class="col s2">
						Chat em Andamento
					</div>
					<div class="col s2">
						Max Chats
					</div>
				</div>
			</div>

			<div class="analists-content">
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601305
						</div>
						<div class="col s5">
							601305
						</div>
						<div class="col s2">
							4
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601150
						</div>
						<div class="col s5">
							601150
						</div>
						<div class="col s2">
							2
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601160
						</div>
						<div class="col s5">
							601160
						</div>
						<div class="col s2">
							1
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601560
						</div>
						<div class="col s5">
							601560
						</div>
						<div class="col s2">
							2
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601226
						</div>
						<div class="col s5">
							601226
						</div>
						<div class="col s2">
							3
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601457
						</div>
						<div class="col s5">
							601457
						</div>
						<div class="col s2">
							3
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

Browser other questions tagged javascript twitter-bootstrap

You are not signed in. Login or sign up in order to post.