change tableheader on button-click - javascript

I would like to write a javascript-function which changes the name of a html-th on button-click. My problem is, that I don't know how to get the "text" of the th.
document.getElementById("id").text
and
document.getElementById("id").value
don't work.


You should use innerHTML
HTML:
<table>
<thead>
<tr>
<th id="headId">Col name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Info</td>
</tr>
</tbody>
</table>
<input type="button" value="Click" onclick="getHeadName()" />
JS:
function getHeadName() {
var headName = document.getElementById("headId").innerHTML
}

Related

How to add a property/ styles to child nodes inside a parent element in angular

I had a table
<table>
<thead>
<tr> </tr>
</thead>
<tbody>
<tr> </tr>
</tboday>
</table>
I want to add a property to <tr> inside <tbody> not <thead>
After I add this line
(<HTMLElement>document.querySelector('tr')).setAttribute("draggable", "true");
the table looks like
<table>
<thead>
<tr draggable=true> </tr>
</thead>
<tbody>
<tr> </tr> // note here there is no above mentioned property. I need to put here
</tboday>
</table>
How can I add draggable=true to <tr> inside <tobdy>

this will help you
document.querySelector('tbody tr').setAttribute("draggable", "true");
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr>here </tr>
</tbody>
</table>

How to add a class if the number of rows in a table is some number with Javascript/jQuery

I am trying to add class to div if the number of rows in the table is larger than 3.
This is my code.
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$this.find('.box').addClass('newclass');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
I don't see why this code not working, can somebody try to help me with this?
What I try to achieve is this:
<div class="box newclass">

Your code isn't working because this is a reference to the .box element itself. When you do a find() from there you're looking for child elements, so nothing it returned. To fix the issue just remove the find() call.
However you can make the jQuery more succinct by simply using the :has() selector to retrieve .box elements which have more than 3 tr within them:
$('.box:has(tbody > tr:eq(3))').addClass('newclass');
.newclass { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
</tbody>
</table>
</div>

you already set the $this to the selector. and by now using $this.find will try to find inside the element itself, so u can use $this directly or search the document itself $(document).find instead of $this.find >>> try the button to show classes list
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$(document).find('.box').addClass('newclass');
}
});
$('button').on('click', function() {
console.log($(document).find('.box').attr('class'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<button> show classes list </button>

Change table tr elements using JS

I'm trying to change a few table cells in a function which I've reduced down to this short snippet, to help me understand what is going wrong.
I basically need to use column indexes on an identified <tr> table row and change the value shown in that cell.
I've tried, from looking at various code that accesses table rows,
tr.col[1].innerHTML = "NEW NAME";
tr.cell[1].innerHTML = "NEW NAME";
Also, I'm currently using jQuery as this is part of an ajax call but this might be complicating things. I'm new to JS and jQuery and don't know which parts are which (I know var tr = $('#tbl_id_4') doesn't work without jQuery
function ChangeName(){
alert('Clicked');
var tr = $('#tbl_id_4');
tr[1].innerHTML = "NEW NAME";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" onclick="ChangeName()" value="Click Me" />

You're using the index accessor on the #tbl_id_4 element. As such you're looking for the second element with that id, which obviously does not, and cannot, exist.
To fix this you need to look at the children() of the tr. Also note the use of an unobtrusive event handler in this example. Inline event attributes are no longer good practice and should be avoided where possible.
document.querySelector('.button').addEventListener('click', function() {
var tr = $('#tbl_id_4');
tr.children()[1].innerHTML = "NEW NAME";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" class="button" value="Click Me" />
It's also worth noting that as you're already using jQuery, you could just do this:
$('.button').on('click', function() {
$('#tbl_id_4 td:eq(1)').text("NEW NAME");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" class="button" value="Click Me" />

Call function in a html <td> tag with thymeleaf

How can I pass ${policies.getId() correctly in function, while looping through ${policies}?
<html>
...
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr th:each="policies : ${policies}" >
<td th:object="${policies.getId()}" onload="myFunction01(object)"></td>
<td th:object="${policies.getName()}" onload="myFunction02(object)"></td>
</tr>
</tbody>
</table>
<script th:inline="javascript">
function myFunction01(object){...}
function myFunction02(object){...}
</script>
</html>

can you try this and let me know if this worked for you
th:onload ="'myFunction01(\'' + ${policies.getId()} + '\');'"

Get some parent element ID in order to send to JavaScript function

I have this table:
<table id="tblId">
<thead>
<tr>
<th>View Name</th>
<th>View Description</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>Name</td>
<td><span onclick="jsFunction()">description</span></td>
</tr>
<tr id="2">
<td>Name</td>
<td><span onclick="jsFunction()">description</span></td>
</tr>
</tbody>
</table>
In the onclick event of each span I need to send the js function the row id of that specific row. How do I do that?

One way is you can send "sender" data with jsFunction as below,
... onclick="jsFunction(this)" ....
In your jsFunction you can find tr element,
function jsFunction(sender){
var tr = sender.parentNode.parentNode;
alert( tr.getAttribute('id') );
}

Categories

Resources