I have a SharePoint table and would like to get the tbody of the table right one below the tbody with groupstring.
Sample table
<tbody groupstring=“%3B%23Application%3B%23”>
<tr><td> : Application </td></tr></tbody>
<tbody></tbody>
<tbody>
<tr><td><a href=“https://link1.com”>Link 1</a></td></tr>
<tr><td><a href=“https://link3.com”>Link 3</a></td></tr>
</tbody>
I will be getting another link Link2 from Json and dynamically inserting it between Link1 and Link3 with Jquery
var addRow=function(url,displayName){
Var counter=0;
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).find(‘td’).each(function(){
counter++;
If($(this).find(‘td:eq(0)’).text() > displayName){
$(this).before(makeRow(url,displayName));
} else {
If($(this).find(‘td:eq(0)’).text() === displayName){
$(this).html(makeRow(url,displayName));
Return false;
}}
If($(this).closest(‘table’).find(‘td.md-vb2’).length === counter){
$(this).parent().after(makeRow(url,displayName));
}
});
};
Var makeRow = function(url,displayName){
return (‘<tr><td><a href=“‘ + url + ‘”>’+displayName+’</a></td></tr>’);
};
I am trying to add the dynamic Link2 between Link1 & Link3 as anchor by placing in between or replace if already exists by addRow function.
My problem is that I can insert in the tbody after the tbody with groupstring but I want to insert in tbody one after the blank tbody.
Can somebody help modify:
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).find(‘td’).each(function(){
To access/get the tbody* one after the blank tbody?
I even tried:
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).next(‘tbody’).find(‘td’).each(function(){
And
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).closest(‘tbody’).find(‘td’).each(function()
But it did not work.
Any help is much appreciated.
$('tbody[groupstring]').nextAll('tbody:eq(1)') should do it.
Demo:
$(function() {
var $target = $('tbody[groupstring]').nextAll('tbody:eq(1)');
console.log($target.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody groupstring="%3B%23Application%3B%23">
<tr>
<td>Application</td>
</tr>
</tbody>
<tbody></tbody>
<tbody>
<tr>
<td>Link 1</td>
</tr>
<tr>
<td>Link 3</td>
</tr>
</tbody>
</table>
Also note that groupstring is not a valid HTML attribute.
Related
I saw other questions and answers and doesn't meet my need.
<thead>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
<script>
$('tr').on("click", function(){
var id = $(this).find('tbody tr td').eq(2).text(); //here
alert(id);
});
</script>
I want to get tbody td not thead td, and i tried above code on script.
But alert does occur with no value.(empty alert)
Hm... did I type something wrong?
Below script will get the value of the first td of the tbody tr
<table>
<thead>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
</thead>
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
</table>
<script>
$('tbody tr').on("click", function(){
var id = $(this).find('td:first-child').text(); //here
alert(id);
});
</script>
If you want to get the value of each td clicked you can use:
$('tbody td').on("click", function(){
var id = $(this).text(); //here
alert(id);
});
this inside a jQuery handler will refer to the element that triggered the event - you're using $('tr').on, so this will refer to a tr. But trs don't have tbody children, so $(this).find('tbody ... doesn't work. Instead, since you're starting from the tr, just .find tds. Also note that since you only have two tds in each tr, .eq(2) will always be empty (array-like collections are zero-indexed in Javascript) - if you want the second td's text, you should use .eq(1) instead.
$('tr').on("click", function() {
var id = $(this).find('td').eq(1).text();
console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
</table>
The problem with your script is that :
<script>
$('tr').on("click", function(){
var id = $(this).find('tbody tr td').eq(2).text(); //here
alert(id);
});
</script>
1) You are referring to column 2, which does not exist.
2) Moreover, writing "find('tbody tr td')" will search for another tbody tr and td tags within the "$('tr').on("click", function()" that you are searching for, which doesn't exist either, hence alert returns blank. So try this script and let me know if it works!
<script>
$('tbody tr').on("click", function(){
var id = $(this).find('td').eq(0).text();
alert(id);
});
</script>
I have the following table:
How can I modify columns 2 and 3 if the contents of column 1 satisfy a condition? I want to be able to say "for all rows, if column 1 == 37, set column 2 to 12:00:00".
As you appear not to have used jquery much, to keep it simple, you can use
$("table tr").each
to loop through each table row. If your table has an ID, then better:
$("#tableid tr").each
in each row, check if the first cell is 37 and then set the 2nd to the value you want.
$("table tr").each(function() {
var cells = $("td", this)
if ($(cells[0]).text() == "37") $(cells[1]).text("12:00");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>37</td>
<td>4</td>
</tr>
</table>
Using JQuery, you can do it like this
$("#my-table tr").each(function () {
if($(this).find('td:eq(0)').text() === '37'){
$(this).find('td:eq(1)').text('12:00:00');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2" id="my-table">
<tr>
<td>37</td>
<td>02:28:17</td>
</tr>
<tr>
<td>74</td>
<td>13:56:21</td>
</tr>
</table>
I have a table that are like a grid with a horizontal list in the top with week numbers within th tags and below each week are different values in rows of tr and td tags.
I'm trying to get the data-attribute for the week when I click below in one of the td tags with the data-id attribute. But I can't get it right and wonder what I have done wrong to be able to read this value?
Some of the combinations I have tested:
var test = $(this).closest("th").attr("data-week");
var test = $(this).parents().find(".week").attr("data-week");
var test = $(this).parents("th").attr("data-week");
The HTML with data-attributes for the table:
<table>
<thead>
<tr>
<th class=""></th>
<th class="week" data-week="15">15</th>
<th class="week" data-week="16">16</th>
<th class="week" data-week="17">17</th>
<th class="week" data-week="18">18</th>
<th class="week" data-week="19">19</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stina (1)</td>
<td data-id="40">10</td>
<td data-id="12">20</td>
<td data-id="13">40</td>
<td data-id="14">45</td>
<td data-id="15">40</td>
</tr>
<tr>
<td>Linda (2)</td>
<td data-id="0">0</td>
<td data-id="0">0</td>
</tr>
<tr>
<td>Lasse (3)</td>
<td data-id="21">5</td>
<td data-id="22">39</td>
<td data-id="23">40</td>
<td data-id="24">40</td>
</tr>
</tbody>
</table>
#Sean DiSanti, good one!
Here is a slightly more efficient version, without warping $ in $, by using eq method
$('td').on('click', function(e) {
var index = $(this).index() -1;
var week = $('.week').eq(index).data('week');
console.log('week', week);
});
jsfiddle
Here is a way you can find the data-week attribute of the clicked th element.
$(document).ready(function(){
$("td").on("click",function(){
$td=$(this);
$th = $td.closest('table').find('th').eq($td.index());
alert($th.attr("data-week"));
});
});
Demo: https://jsfiddle.net/7b146hor/2/
You need to find it by index. Get which child number the clicked element has and then look for same number in .weeks
Demo
$('td').on('click', function(e){
index = $(this).index();
week = $('.weeks').find(":eq("+index+")").attr('data-week');
console.log(week);
});
This worked for me
$('td').on('click', function(e) {
index = $(this).index();
week = $($('.week')[index - 1]).data('week');
console.log('week', week);
});
jsfiddle example
I have a button:
<button id="external-list-row">Test</button>
in which I would like to change with a row from an external table on click. The external table is structured like this;
<table id="table_id">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Row 1</p>
</td>
</tr>
<tr>
<td>
<p>Row 2</p>
</td>
</tr>
<tr>
<td>
<p>Row 3</p>
</td>
</tr>
</tbody>
</table>
So my question is this; how can I replace "Test" in the button with the content of Row 1 with javascript?
As for the javascript, I'm not sure how I can get the content from row 1, and replace the button with it.
<script>
var rows = document.getElementById('table_id').getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
$('#external-list-row').onclick = function() {
}};
</script>
Post comments:
I can access table data from other tables within the same html file, but I still don't know how to access data from tables in other html files. For example, if I try to access a videos liquid file from another liquid file, like photos, nothing happens when I press the button.
Fiddle of current code. It can replace the content of a list with the content of another, but the lists need to be on the same html file.
https://jsfiddle.net/hgnymydL/
Well, the first thing you should understand, is that a table element has a rows property, so getting the first row is trivial.
var table = document.getElementById("table_id");
var firstRow = table.rows[0];
From there, you can use textContent to get the text content of the row. I believe that's what you were looking for.
You can also select the first row of a table with a CSS selector like so:
var firstRow = document.querySelector("#table_id tbody tr");
$('#external-list-row').on('click', function() {
$(this).text($('#table_id tbody tr:first').text());
});
If you want to replace the button text with contents of the First Row ONLY then:
$('#external-list-row').html($('tr:first-child').html);
Of course you could wrap this in any event, so for example, on clicking the button:
$('#external-list-row').on('click', function() {
$(this).html($('tr:first-child').text());
});
BUT, based on the code you have given, I'm assuming you want to change the text after each click in which case you could do this:
var clickNumber = -1;
$('#external-list-row').on('click', function(event) {
clickNumber = clickNumber + 1;
//console.log('\n\nclickNUmber' + clickNumber);
$('tbody tr').each(function(index, el) {
//console.log('index: ' + index);
var block = $(el).find('td p');
if(index == clickNumber) {
//console.log('entered if')
//console.log(block.text());
//console.log('----clickNUmber' + clickNumber);
//console.log('index: ' + index);
//console.log(el);
$('#external-list-row').html(block.text());
}
});
});
jsFiddle: https://jsfiddle.net/zmb2b37t/
Hope that helps!
If you are wanting to replace the visible text "Test" in the button with the content of the cell clicked:
var tbl = document.getElementById('table_id');
var btn = document.getElementById('external-list-row');
tbl.onclick = function(ev){
var trgt = ev.target;
if(trgt.tagName === 'P' ||trgt.tagName === 'TD'){
btn.textContent = trgt.textContent;
}
};
Only one event handler is attached in this scenario.
Via event delegation we determine if it was a TD or P element that was clicked. If the rows are modified the function will still work.
Here is jquery code of do this
$('#table_id tr td').on('click', function(){
$('#external-list-row').html($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="external-list-row">Test</button>
<table id="table_id">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Row 1</p>
</td>
</tr>
<tr>
<td>
<p>Row 2</p>
</td>
</tr>
<tr>
<td>
<p>Row 3</p>
</td>
</tr>
</tbody>
</table>
This question already has answers here:
Table row and column number in jQuery
(6 answers)
Closed 7 years ago.
I have a table like this, and I need to get a row index value when clicking on a particular cell in a row. I don't need to get any values when clicking on rest of the cells.
<table>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>2</td><td>2</td><td>2</td>
</tr>
<td>3</td><td>3</td><td>3</td>
</tr>
</table>
Here is my jQuery code goes. I am getting row index value perfectly
$(function(){
$("table tr").click(function(){
console.log($(this).index());
});
});
But I need like when clicking on particular cell only. Here I used third cell.
//$("table tr").find('td').eq(2).click(function() {
You can use closest('tr').
$(function(){
$("table tr td").click(function(){
console.log($(this).closest('tr').index());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>2</td><td>2</td><td>2</td>
</tr>
<td>3</td><td>3</td><td>3</td>
</tr>
</table>
<table>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
</tr>
</table>
$(function(){
$("table tr").each(function(){
$(this).find("td").eq(2).click(function(){
console.log($(this).text());
});
});
});
use this code will help you
http://jsfiddle.net/sc6Ld40v/