I have html table like this:
<table cellpadding="2" cellspacing="1" width="700">
<tbody>
<tr>
<td class="dark" colspan="2">
Customer Details
</td>
</tr>
<tr>
<td>
Customer Contact Name
</td>
<td>
<input name="tbname" type="text" id="tbname" class="widetb">
</td>
</tr>
</tbody>
</table>
I want to add Some text at the start of the table so it's the first td in the table, how can I do this using jquery? I really don't have clue where to start.
I have to do it this way as I don't have access to change this via the html.
Here is a one liner :
$('td.dark').text('Enter your text here!'); // the class is present in your HTML
This will search for the td with class dark which represents the first td and it will insert the text.
In case you have multiple tables:
$('td.dark').eq(0).text('Enter your text here!');
// here 0 represents the position of the table minus 1 , you want to change the text
As example, so:
$('td', 'table').first().text('hello!');
You could try a google search next time.
The jquery method find finds the set of elements in a parent matching a selector, and eq selects a certain element from the set (with element 1 being referenced by 0 as in arrays). Therefore, you can use the following if you only have one table in your entire document:
$("table") // select all tables
.eq(0) // select the one you want (the only one)
.find("td") // select all td's
.eq(0) // select the first one (the one you want)
.html("insert new content here"); // set the td's inner html
If you have multiple tables, it's tricky. You will need the index of your table relative to other tables. For example, if you have
<table>...</table>
...
<table>...</table>
...
<table>table you are targeting</table>
.......
Then the index of your table would be 2 because it is the third table in the document, and indices start at 0. If you have an index, you can use
var table_index=// set this to the index
$("table") // select all tables
.eq(table_index) // select the one you want (with the index)
.find("td") // select all td's
.eq(0) // select the first one (the one you want)
.html("insert new content here"); // set the td's inner html
It helps if you give your table an id, then you can do something similar to:
$('#id >tbody').prepend('<tr><td>A shiny new row<td></tr>');
Give ID to that First td as your code looks like
<table cellpadding="2" cellspacing="1" width="700">
<tbody>
<tr>
<td id="firsttd" class="dark" colspan="2">
Customer Details
</td>
</tr>
<tr>
<td>
Customer Contact Name
</td>
<td>
<input name="tbname" type="text" id="tbname" class="widetb">
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('#firsttd').text("Your title here");
</script>
If you can't access the HTML at all and if you have multiple tables then this will work:
var newTR = $( "<tr id='newRow'/>" );
var newTRcontent = "<td colspan=1>Your New Text Here</td>";
$("table:nth-of-type(2) tbody tr").first().before(newTR);
$("#newRow").html(newTRcontent);
I made an example fiddle here
Basically it about using the proper JQuery selector so $(table:nth-of-type(2) will select the second table. Then you can use the code I have above or maybe even better yet here is a one-liner:
$("table:nth-of-type(2) tbody tr").first().before("<tr><td>Your New Text Here</td></tr>");
Related
I've been scratching my head about why my code is acting the way it is.
My question is that why when I add a table row using my function addRow, it resets all of the input values of previous rows?
Below is a code snippet displaying my issues..
function addRow() {
//the html for adding a row (contains the row tag and inputs)
htmlString = '<tr><td><input type="text"></input></td></tr>';
//add the html string to the tbody of the tableTestSamples
document.getElementById("testTable").getElementsByTagName("tbody")[0].innerHTML += htmlString;
}
<table id="testTable">
<tbody>
<tr>
<td>
<input type="text"></input>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="button" onclick="addRow()" value="Add Row"></input>
</td>
</tr>
</tfoot>
</table>
It adds a row.. except its resetting any previously entered values. Why is that?
Thanks!
The problem is that you're mutating the innerHTML of the table. This causes the browser to treat the contents of the table as a string of HTML, reparse the HTML and then replace the contents of the table. Since the browser doesn't update the innerHTML to reflect values entered into an input tag, those values will get lost in this process.
To avoid resetting the input values you need to manipulate the DOM, rather than manipulate the underlying source code. You can still use HTML to create your new row, but you need to add it to the table using a function like: appendChild().
Example:
function addRow() {
var row = document.createElement('tr');
row.innerHTML = '<td><input></td>';
var table = document.getElementById('the-table');
table.appendChild(row);
}
<table id="the-table">
<tr>
<td><input></td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
My html code is-
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<input type="hidden" value="000001234" id="taxID">
<td id="fullName">Y, X</td>
</tr>
Here, I want to get hidden field value. I can not use ID of hidden field to get its value because there are multiple rows which can contain hidden field with same ID as "taxID". I want to get this value using <tr> class name.
i.e. selected.
I am using below code to get its value but it is giving me 'undefined' value.
var x = document.getElementsByClassName("selected")[0];
var y = x.getElementsByTagName("input")[0];
alert(y.value);
Alert statement shows undefined value. Am I missing something over here?
First, you cannot have multiple elements in a document with identical id values. That will have to be altered and that alone may solve your problem.
Second, your HTML is invalid. The input must be inside of a td.
Next, there is no reason to use getElementsByClassName() or getElementsByTagName() when you are looking for just one element - it's wasteful because you wind up searching the entire document when you are only interested in one item.
Also, both of those methods return "live" node lists which require re-scanning the entire document every time their results are referenced. The use cases for that are limited.
Instead use .querySelector() when you want to find just one item based on any valid CSS selector and .querySelectorAll() when you want to find a set of matching elements.
Assuming these things are corrected, you can do this:
var x = document.querySelector(".selected td input[type=hidden]");
alert(x.value);
<table>
<tr class="selected">
<td id="participantID">XXXXX1234
<input type="hidden" value="000001234" id="taxID">
</td>
<td id="fullName">Y, X</td>
</tr>
</table>
You need to have a table be the parent of a tr, then the DOM lookup will properly work. Also as noted by #Rory McCrossan you will want to wrap td tag around your input element:
var x = document.getElementsByClassName("selected")[0];
var y = x.getElementsByTagName("input")[0];
alert(y.value);
<table>
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<td><input type="hidden" value="000001234" id="taxID" /></td>
<td id="fullName">Y, X</td>
</tr>
</table>
(Posted solution on behalf of the OP).
After removing ID of hidden field, it is working fine. Edited code is:
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<input type="hidden" value="000001234" id="taxID">
<td id="fullName">Y, X</td>
</tr>
I'm trying to hide a row in a table if it does not contain a search value.
This works:
<table class="mytable">
<tr>
<td>1001</td>
<td>apples</td>
</tr>
<tr>
<td>1002</td>
<td>bananas</td>
</tr>
</table>
<button id="mybutton">Button</button>
<button id="mybutton2">Button2</button>
This will work by hiding all rows, then showing the ones we want:
$('#mybutton').click(function(){
$('.mytable td').parent().hide();
$('.mytable td:contains("apples")').parent().show();
});
But I've seen there's a more elegant (and probably efficient) solution using :not selector, but I can't get it working:
$('#mybutton2').click(function(){
$('.mytable td:not(:contains("apples"))').parent().hide();
});
How can I get this working using the :not selector, so that if a row does not contain apples, it will be hidden, leaving all the rows that contain apples.
JS Fiddle: https://jsfiddle.net/ryy3tvob/
Because first td not contains apple in any row and it will select all first td so it will hide it's parent. So you need to use :contains() for tr
The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as a bare word or surrounded by quotation marks. The text must have matching case to be selected. ( Taken from https://api.jquery.com/contains-selector/ )
$('#mybutton2').click(function() {
$('.mytable tr:not(:contains("apples"))').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="mytable">
<tr>
<td>1001</td>
<td>apples</td>
</tr>
<tr>
<td>1002</td>
<td>bananas</td>
</tr>
</table>
<button id="mybutton">Button</button>
<button id="mybutton2">Button2</button>
I have a table like this
<table>
<tr>example1</tr>
<tr>example2</tr>
<tr>example3</tr>
</table>
and it works fine but if I add <td> to the first row and not the others it goes straight to the bottom - http://jsfiddle.net/sLd1L92t/1/
<table>
<tr><td>example1</td></tr>
<tr>example2</tr>
<tr>example3</tr>
</table>
Is there any way I can have the <td> in just one row and not have that row repositioned?
Add a <td> to each row, like so:
<div>
<table border="1">
<tr><td>example1</td></tr>
<tr><td>example2</td></tr>
<tr><td>example3</td></tr>
</table>
</div>
(I added a border to make it clear where the cell boundaries are)
And if you want the second two rows to fill the width of the table, then use colspan which tells the row to span multiple columns:
<div>
<table border="1">
<tr><td>exampleA</td><td>exampleB</td></tr>
<tr><td colspan="2">example2</td></tr>
<tr><td colspan="2">example3</td></tr>
</table>
</div>
Adding in the <td> is correct HTML, so I don't believe there is a way to do what you want.
Why are you trying to write the table that way? You can probably make it work using <div> tags instead.
From within a xhtml page created with JSF, I need to use JavaScript / jQuery for changing the content of a cell of a table. I know how to assign a unique id to the div containing the table, and to the tbody. I can also assign unique class names to the div itself and to the target column. The target row is identified by the data-rk attribute.
<div id="tabForm:centerTabView:personsTable" class="ui-datatable ui-widget personsTable">
<table role="grid">
<tbody id="tabForm:centerTabView:personsTable_data" >
<tr data-rk="2" >
<td ... />
<td class="lastNameCol" role="gridcell">
<div> To Be Edited </div>
</td>
<td ... />
</tr>
<tr ... />
</tbody>
</table>
</div>
I have tried with many combinations of different jQuery selectors, but I am really lost. I need to search my target row and my target column inside that particular div or inside that particular table, because the xhtml page may contain other tables with different unique ids (and accidentally with the same row and column ids).
Something like this?
$("#tabForm\\:centerTabView\\:personsTable tr[data-rk=2] td.lastNameCol div").text("edited");
Or if personsTable is unique enough in the current view
$("[id$=personsTable] tr[data-rk=2] td.lastNameCol div").text("edited");
Please check this fiddle for your new html code
Fiddle without colon
Fiddle with Colon