Parsing a row in the <tr> table

Question

Good day! There is a certain 4x4 table, you need to select a row and split the columns of the selected row (the unique identifier "tabindex = 0" is assigned to the selected row).

My decision:

$("tbody").click(function () { var itemId = $("tbody").find("[tabindex='0']").find("td:eq(0)").html(); // первый элемент td var itemOb = $("tbody").find("[tabindex='0']").find("td:eq(1)").html(); // второй элемент td var itemCn = $("tbody").find("[tabindex='0']").find("td:eq(2)").html(); // третий элемент td var itemZn = $("tbody").find("[tabindex='0']").find("td:eq(3)").html(); // четвертый элемент td });

Maybe you can do something better, and even in my version, when you click each time, the value of the selected line will be selected, how can you make the value selected once?

разбить столбцы, выбранной строки - where to split?
@ Alexey Shimansky, perhaps not correctly put it, but I thought the code would be obvious.
There is a row in the table <tr> <td> 1 </ td> <td> 2 </ td> <td> 3 </ td> <td> 4 </ td> </ tr>.
The value of the columns (1-4) must be extracted for further work.

Accepted Answer · 2017-06-10T07:51:12

1) Save the body of your table to a variable, search in a variable

 var tbody = $("tbody").find("[tabindex='0']"); var alreadyClicked = false; $("tbody").click(function() { if (!alreadyClicked) { alreadyClicked = true; var itemId = tbody.find("td:eq(0)").html(); // первый элемент td var itemOb = tbody.find("td:eq(1)").html(); // второй элемент td var itemCn = tbody.find("td:eq(2)").html(); // третий элемент td var itemZn = tbody.find("td:eq(3)").html(); // четвертый элемент td console.log(itemId); console.log(itemOb); console.log(itemCn); console.log(itemZn); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table rules="all" border="1"> <tbody> <tr tabindex="0"> <td>Id</td> <td>Ob</td> <td>Cn</td> <td>Zn</td> </tr> </tbody> </table>

2) If it is uncritical to work not with a bunch of variables, but with an object, you can still do this:

 var tbody = $("tbody").find("[tabindex='0']"); var alreadyClicked = false; $("tbody").click(function() { if (!alreadyClicked) { alreadyClicked = true; var item = {}; var keys = ['id', 'ob', 'ch', 'zn']; for (var i = 0; i < 4; i++) { item[keys[i]] = tbody.find("td:eq(" + i + ")").html(); } console.log(item); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table rules="all" border="1"> <tbody> <tr tabindex="0"> <td>Id</td> <td>Ob</td> <td>Cn</td> <td>Zn</td> </tr> </tbody> </table>

Initially, I tried to do the same as you did in the first example.
And if it's not a secret, can you tell me how to make it so that the code is executed once when you click, something like a "break" in the condition?
@Tibomso, do you need the variables to be filled in once after the click, and nothing happens when the second one is repeated?
Yes, just the following task, to make a heading from the table rows, in principle I decided this way - 1) Created a hidden header <h4 id="id" style="display:none" class="col-md-3">Id:</h4> and then in the function I assign the value $("#id").html('Id: ' + itemId).show();

Parsing a row in the <tr> table

1 answer 1

More articles: