It has taken me days to come up with the following, and now I'm realizing that it still doesn't work. My "add row" button isn't working properly. What am I missing?
<table>
<tr>
<th>field</th>
<th>comparison</th>
<th>value</th>
</tr>
<tr>
<td>
<select style="width:5em;" class="field">
<option>name</option>
<option>age</option>
<option>sex</option>
</select>
</td>
<td>
<select style="width:5em;" class = "comp">
<option>equals</option>
<option>starts with</option>
<option>not equal to</option>
</select>
</td>
<td><input type="text" class = 'value'></td>
<td><button id="add">Add row</button></td>
</tr>
</table>
$('#tableSearchMainAccount1 tr').each(function() {
var td = '';
// used to skip table header (if there is)
if ($(this).find("td:first").length > 0) {
$(this).find('option:selected').each(function() {
td = td + $(this).text() + ',';
});
td = td + $(this).find('input').val();
filt[ctr] = td;
ctr += 1;
}
});
//alert(filt); //alert output like name,equals,ann,age,equals,11
$('#add').live('click', function() {
var $lastTr = $('table tr:last');
console.log($lastTr);
$lastTr.clone().insertAfter($lastTr);
// Remove the button from the previous tr, otherwise each row will have it.
$('#add', $lastTr)
.replaceWith('<button class="remove_row">Remove row</button>');
});
$('.remove_row').live('click', function() {
$(this).closest('tr').remove();
});
From the discussion in the comments, it appears you have not referenced jQuery.
Add the following to your <head></head> section:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
There are many other CDNs that host jQuery for you, or you can download it yourself. All of these details can be found on http://jquery.com/download/.
So that your markup looks something like the following:
<!DOCTYPE html>
<html>
<head>
<title>My jQuery Project</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<table>...</table>
</body>
</html>
Note that I also referenced another external file called "scripts.js". This is where you could place all of your JavaScript and jQuery logic.
$(document).ready(function(){
/* Wrapping your code with a document-ready
block will ensure that the DOM will be
ready before your code runs
*/
});
replace
<table>
with
<table id="tableSearchMainAccount1">
would be my starter for 10.
Related
I have a data table with a dropdown box that sorts the table by column. I am trying to highlight the column that is selected/sorted by the dropdown. I am using the following code to obtain the index of the dropdown item:
<script>
var sel = document.getElementById('asorting').selectedIndex;
alert(sel);
</script>
I am using the following CSS code to highlight the column:
<style>
table td:nth-of-type(3)
{
background-color:#E0E0E0;
}
</style>
Both of these work on their own, but I am trying to update the "table td:nth-of-type(3)" to change based on the value of my sel variable. I have tried using (" + sel + ") to feed the variable to the CSS, but that is not working.
I am not very experienced in JS and have not been able to find anything on this site that relates exactly to what I am trying.
Any help would be greatly appreciated.
You can toggle classes in javascript by arriving at a logic like this
<html>
<head>
<script>
function changeStyle(v){
elements = document.getElementsByClassName('hightlight');
if(elements.length > 0){
for (let element of elements){
element.classList.remove('hightlight');
}
}
document.getElementById('data').children[parseInt(v)-1].className = "hightlight";
}
</script>
</head>
<body>
<style>
.hightlight {
color : red
}
</style>
<select id="asorting" onchange="changeStyle(this.value)">
<option class="row" value="1">one</option>
<option class="row" value="2">two</option>
<option class="row"value="3">three</option>
</select>
<table>
<tbody id="data">
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a table that's creating rows dynamically upon button click. This input box contains an auto suggest script. When , I am trying to perform an input on the the first box(the one that is default created) , the auto complete works fine. But, on performing the dynamic adding of the row, the script for that row doesn't work. How to invoke the auto complete script on the new ?
<html>
<body>
<div id="addButtonDiv">
<button id="add" >Add New</button>
</div>
<table id="tableAdd">
<head>
<tr>
<th >enter</th>
</tr>
</head>
<body>
<tr>
<td>
{!! Form::text('nameId', null,['class'=>'form-control auto', 'placeholder' => 'name']) !!}
</td>
</tr>
</body>
</table>
<script type="text/javascript">
$(document).ready(function ()
{
$("#add").click(function()
{
$('#tableAdd tr:last').after('<tr><td>{!! Form::text('project_manager_name', null,['class'=>'form-control pmID', 'placeholder' => 'Project Manager']) !!}</td></tr>')
});
});
$(".auto")
.on("keydown", keyDownEventForProjectAndCompetencyLead)
.autocomplete(
{
//function that autocompletes the input
});
</script>
</body>
</html>
Jquery sometimes has a little trouble identifying elements that have been programatically added to the DOM just by the original class / id. Try using a different selector method to check against the modified page:
$(document)
.on("keydown", ".auto", keyDownEventForProjectAndCompetencyLead)
.autocomplete( // etc )
Your selector isn't applying to DOM elements added after the page is loaded.
Modify as above to listen on all element in document that match, or attach listener on each new element created:
<html>
<body>
<button id="add">add</button>
<table id="cooltable">
<tr>
<td>cool table cell</td>
</tr>
</table>
<script type="text/javascript">
function autoPopulate(event){
// some code
event.currentTarget.value = "auto populated content";
}
let add_button = document.getElementById('add');
add_button.addEventListener('click',(event)=>{
let new_row = document.createElement('tr'); // create row
let new_cell = document.createElement('td'); // create cell
let new_input = document.createElement('input'); // create input
new_input.type = 'text';
new_input.value = "default content";
new_input.addEventListener('keydown', (event)=>{ // attach listener
autoPopulate(event);
});
new_cell.appendChild(new_input) // add input to cell
new_row.appendChild(new_cell) // add cell to row
document.getElementById('cooltable').appendChild(new_row); // add row to table
})
</script>
</body>
</html>
Problem here is you are adding callback on "keyDown" event which is not happening hence your script is not running
To fix this you should add eventlistener on jquery load()
Or you should using .bind('DOMNodeInserted DOMNodeRemoved') to call function when new node are added or deleted.
<div id='myParentDiv'> </div>
<button>Click </button>
$("button").click(function(){
$("#myParentDiv").append("<div class='test'></div>");
});
$("#myParentDiv").bind("DOMNodeInserted",function(){
alert("child is appended");
});
Here is working demo
https://jsfiddle.net/vickykumarui/28edcsmb/
Code for Table Example
<div id="addButtonDiv">
<button id="add" >Add New</button>
</div>
<table id="tableAdd">
<head>
<tr id = "test1">
<th >enter</th>
</tr>
</head>
<body>
<tr>
<td>
Test 1
</td>
</tr>
</body>
</table>
var numberOFRow = 1;
$("#add").click(function(){
numberOFRow++
$('#tableAdd tr:last').after('<tr id = test'+numberOFRow +'><td> Test' + numberOFRow + '</td></tr>')
});
$("#tableAdd").bind("DOMNodeInserted",function(){
alert("Row number"+ numberOFRow+ "created");
});
Working Demo for your table examplehttps://jsfiddle.net/vickykumarui/qpxL8k4c/
I know its kind off irrelevant question but i having some difficulties. I found an code at fiddle https://jsfiddle.net/ew5y6pd1/4/ and its working perfeclly but when i copy and place an online html editor the data is not append.Below shows the code I copy to online html editor. Did I miss any library?
<!Doctype html>
<html>
<head>
<style>
th, td { border: 1px solid black;}
</style>
<script>
$(document).ready(function() {
$("#add").on('click', function() {
var user = {
Id: '',
Name: ''
}
var row = $('<tr/>');
user.Id = $("#id").val();
user.Name = $("#Name").val();
row.append($('<td/>').text(user.Id));
row.append($('<td/>').text(user.Name));
$("#reservations tbody").append(row);
});
$('#sort').on('click', function(){
var rows = $('#reservations tbody tr').get();
rows.sort(function(a, b) {
var A = $(a).children('td').eq(0).text().toUpperCase();
var B = $(b).children('td').eq(0).text().toUpperCase();
if(A < B) {
return -1;
}
if(A > B) {
return 1;
}
return 0;
});
$.each(rows, function(index, row) {
$('#reservations').children('tbody').append(row);
});
})
});
</script>
</head>
<body>
<input type="text" id="id" />
<input type="text" id="Name" />
<input type="button" id="add" value="Add" />
<br />
<input type="button" id="sort" value="sort" />
<table id="reservations">
<thead>
<tr>
<th> Id </th>
<th> Name </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
The JS Fiddle instance loads the jQuery library which provides the $ function.
You'll need to download the library (or find the URL to a hosted version) and include a <script> element that loads it before you run the script that depends on it.
I have several tables in my page and none of them has an id attribute.
I retrieve with Javascript or jQuery a row of one of these tables. Then I want to do things to all the rows of that table but not to any row of any other table. Selecting such rows through jQuery would do, and also doing that with Javascript would be ok.
So I need to identify a table and the only thing I know about it is that this row belongs to it. Is it possible ?
Runnable example:
<html>
<head>
<script src="jquery-1.11.3.js"></script>
<style>
.myYellow
{
background-color: yellow;
}
</style>
<script type="text/javascript">
function doStuff() {
var jqRow = jQuery("#r1t1"); if (jqRow.length !== 1) throw "ERROR";
var htmlRow = jqRow.get(0); // How do I restrict the jqSelectedRows below to only the table this row belongs to ?
var jqSelectedRows = jQuery("tr.myYellow"); // But I only want the yellow rows of the table containing htmlRow .
jqSelectedRows.each(function(index) {
this.setAttribute("style", "background-color: blue");
});
}
</script>
</head>
<body>
<table border="1">
<tr id="r1t1" ><td>r1 t1</td></tr>
<tr id="r2t1" class="myYellow"><td>r2 t1</td></tr>
<tr id="r3t1" class="myYellow"><td>r3 t1</td></tr>
<tr id="r4t1" ><td>r4 t1</td></tr>
</table>
<br><br>
<table border="2">
<tr id="r1t2" class="myYellow"><td>r1 t2</td></tr>
<tr id="r2t2" class="myYellow"><td>r2 t2</td></tr>
<tr id="r3t2" ><td>r3 t2</td></tr>
</table>
<br><br>
<input type="button" value="Do" onclick="doStuff()">
<br>The button selects the first row of the first table ("r1 t1") and then it
<br>must turn blue all the <strong>yellow</strong> rows of <strong>that table only</strong>;
no other table must be affected.
</body>
</html>
Use .siblings(). See comment in snippet.
Note: Changed button slightly which of course can easily be converted back to the original way by deleting the code around the doStuff() function and adding the onclick="doStuff();" back to the <input> button.
$(function() {
$('#do').on('click', doStuff);
function doStuff() {
var jqRow = $("#r1t1");
if (jqRow.length !== 1) throw "ERROR";
var jqSelectedRows = jqRow.siblings(); // How do I restrict the jqSelectedRows below to only the table this row belongs to? | Use .siblings() to collect all <tr>s within the table (excluding the referenced tr#r1t1).
jqSelectedRows.each(function(index) {
this.setAttribute("style", "background-color: blue");
});
}
});
.myYellow {
background-color: yellow;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>32721615</title>
</head>
<body>
<table border="1">
<tr id="r1t1">
<td>r1 t1</td>
</tr>
<tr id="r2t1" class="myYellow">
<td>r2 t1</td>
</tr>
<tr id="r3t1" class="myYellow">
<td>r3 t1</td>
</tr>
</table>
<br>
<br>
<table border="2">
<tr id="r1t2" class="myYellow">
<td>r1 t2</td>
</tr>
<tr id="r2t2" class="myYellow">
<td>r2 t2</td>
</tr>
<tr id="r3t2">
<td>r3 t2</td>
</tr>
</table>
<br>
<br>
<input id="do" type="button" value="Do">
<br>The button selects the first row of the first table ("r1 t1") and then it
<br>must turn blue all the <strong>yellow</strong> rows of <strong>that table only</strong>; no other table must be affected.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
In Firefox it works, in my Internet Explorer 6 or 7 it doesn't:
<html>
<head>
<script type="text/javascript">
function newLine() {
var tdmod = document.createElement('td');
tdmod.appendChild(document.createTextNode("dynamic"));
var tr = document.createElement('tr');
tr.appendChild(tdmod);
var tt = document.getElementById("t1");
tt.appendChild(tr);
}
</script>
</head>
<body>
newLine
<table id="t1" border="1">
<tr>
<td>
static
</td>
</tr>
</table>
</body>
The user clicks on the link "newLine" and new rows should be added to the table.
How to make this work also in IE?
Edit: Thanks to the accepted answer I changed it like this and now it works:
<table border="1">
<tbody id="t1">
<tr>
<td>
static
</td>
</tr>
</tbody>
</table>
(untested) you might try appending the row to a tbody element, either the one that is usually created automatically or one you define yourself.
Always put
<tbody>
in table for IE