Insert new <td> into a table that fills using data-url? - javascript

I generate my table using bootstrap and
<table id="table" data-toggle="table" data-url="url.php?...">
At the end of each row I want to have a button.
I tried this in my js file but don't know if I'm even close
$(document).ready(function () {
function buttons() {
$("#table tr").append(
"<td>Button1</td>" +
"<td>Button2</td>"
);
}
});

The following code will only declare a function doesnot execute it.
function buttons() {
...
}
You need to call it using buttons()
$(document).ready(function () {
function buttons() {
$("#table tr").append("<td>Button1</td>" +"<td>Button2</td>");
}
buttons();
});
Or you could remove the wrapper buttons() function just use it directly inside document.ready()
$(document).ready(function () {
$("#table tr").append("<td>Button1</td>" +"<td>Button2</td>");
});
if you want to select only the <tr> inside body then use tbody before tr because thead also have tr
$(document).ready(function () {
$("#table tbody tr").append("<td>Button1</td>" +"<td>Button2</td>");
});

You don't actually need a function at all:
$(document).ready(function() {
$("#table tr").append("<td>Button1</td><td>Button2</td>");
});

Related

how to show data inside td using jquery

I want to show a table inside a td with an on click function. But it shows the tables in the complete column with the on click function .How to make it only show the table of the same td on which click function is performed?
$(document).ready(function() {
$("#checklistbox").hide();
$("#row_list").hide();
$("#checklist").click(function() {
$("#checklistbox").show();
});
$("input").click(function() {
$("#checklistbox").hide();
});
});
$(document).ready(function() {
$("#nameinitials").each(function() {
$(".table-responsive").hide();
});
});
$(document).ready(function() {
$(".val_resp").click(function() {
$("#val_resp").each(function() {
$(".table-responsive").show();
});
});
$("input").click(function() {
$("#val_resp").each(function() {
$(".table-responsive").hide();
});
});
});
Use DOM traversal functions relative to $(this)
$(".val_resp").click(function() {
$(this).closest("td").find(".table_responsive").show();
});

How to iterate over a table cells using jQuery?

I am new to jQuery and I am trying to learn it. I want to iterate over a 9 * 9 grid alerting the values of the input boxes(total 81), row wise, column wise and grid 3 * 3 wise.
Here is what I have tried:
$("#checkBox").change(function () {
if (this.checked) {
$('table tr').each(function () {
alert($(this).td.input.val());
});
$('table tr').each(function () {
alert($(this).td.input.val());
});
} else {
alert("Check Box is unchecked. AutoCheck is disabled.");
}
});
Only else alert is working. Any comment or guidance is appreciated.
This part $(this).td.input.val() of your code will raise error since jquery object does not contains a property called td.
Try,
//The following snippet would alert the text inside of each td
$('table tr td').each(function () {
alert($(this).text());
});
//The following snippet would alert the value of each input each td
$('table tr td input').each(function () {
alert($(this).val());
});
If you want to iterate row wise then try,
$('table tr').each(function () {
$(this).find('td').each(function(){
$(this).find(':input').each(function(){
alert($(this).val());
});
});
});

Table columns collapsed when button or image clicked using Javascript

I have this function which is responsible of making the table tr and th collapse. I want to collapse the table columns when button is clicked. I think because I am using $('tr th'),click(function() so when I clicking wherever in th it is collapsing. I want to collapse when we click the button or image like this (function myFunction(){}).
Here is my code:
$(window).load(function(){
$(function() {
$('table tbody tr:odd').addClass('alt');
$('table tbody tr').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
$('tr th:not(:eq(0),:eq(1),:eq(2),:eq(3),:eq(4),:eq(5))').click(function() {
var index = (this.cellIndex + 1);
var cells = $('table tr > :nth-child(' + index + ')');
cells.toggleClass('collapsed');
if ($(this).hasClass('collapsed')) {
$(this).find('span').html('<b>+</b>');
}
else {
$(this).find('span').html('<b>-</b>');
}
if ($('table tr > th:not(.collapsed)').length)
$('table').removeClass('collapsed');
else
$('table').addClass('collapsed');
});
});
why dont you add a onclick event on button instead of adding a click listener using jquery.
you can do something like
<button type="button" onclick="toggleExpand('anyReqParam1', 'anyReqParam2')" class="toggle"></button>
and in script define the function
<script>
function toggleExpand(anyReqParam1, anyReqParam2) {
// toggle code goes here
}
</script>
or alternatively you can also do
$(".toggle").click(function() {
});
using JQuery. Here toggle is the class name that i gave to the button

Getting a table row cell value when a specific column is is clicked

I was able to retrieve all row values via table click event and getting its value via event.currentTarget.cells[4].innerText();.
But i would like to apply this if a specific column is clicked only like, when i clicked an ID 21 under Username column. It should alert all the cell values of the row. And then when I clicked the other columns it should not alert.
This is my code. Please inform me if you are having problems the way I ask.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
alert(event.currentTarget.cells[0].innerText);
alert(event.currentTarget.cells[1].innerText);
alert(event.currentTarget.cells[2].innerText);
alert(event.currentTarget.cells[3].innerText);
alert(event.currentTarget.cells[4].innerText);
});
});
</script>
Here is my HTML http://jsfiddle.net/jE5UM/
Try
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
$(this).children().each(function(){
alert($(this).text())
})
});
});
Demo: Fiddle
If you want an array as the result then
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
var texts = $(this).children().map(function(){
return $.trim($(this).html())
}).get();
});
});
Demo: Fiddle
Update
$(document).ready(function () {
$('#tableid').on('click', 'tr td:nth-child(2)', function (event) {
var texts = $(this).closest('td').siblings().addBack().map(function(){
return $.trim($(this).html())
}).get();
alert(texts.join())
});
});
Demo: Fiddle
I'd suggest, in the absence of specific HTML and other information:
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
var cell = event.target,
values = $(cell).siblings().addBack().map(function(){
return $(this).text();
}).get();
alert(values);
});
});
JS Fiddle demo.
References:
addBack().
get().
map().
on().
siblings().
text().

jquery - limiting toggleClass to 2 elements

<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
$(this).toggleClass('newclass');
});
});
</script>
This function changes the class of the selected column in my table. It works fine.
However it should not allow more than 2 columns being selected at once (by selected I mean the column having the new class toggled - newclass). So it simply should not react if other columns are clicked.
How would I do this? I could count how many columns currently use newclass and if it's 2 then cancel the function. I'm not sure how to count them or if this is the best way to do it.
here's one way to ensure no more than 2
jsfiddle
$('#mytable td').click(function() {
var $this = $(this);
// toggle 'on' if
// 1. it doesn't already have the class and
// 2. and there are less than two set to .newclass
// toggle 'off' if
// 1. it already has the class and
// 2. and there are less than two set to .newclass
$this.toggleClass('newclass',
!$this.hasClass('newclass') &&
$('#mytable .newclass').length < 2);
})
The size() method shows you how many other elements match that selector, so you can test against that before applying toggleClass():
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($("#mytable td.newclass").size() < 2)
{
$(this).toggleClass('newclass');
}
});
});
</script>
Try using the length property like this:
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($('#mytable td.newclass').length < 2)){
$(this).toggleClass('newclass');
}
});
});
</script>
Hope this helps!
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if(!$(this).hasClass('newClass')){
if($("td.newClass").size() < 2){
$(this).toggleClass('newclass');
}
}
else {
$(this).toggleClass('newclass');
}
});
});
</script>

Categories

Resources