I have a demo here
In the demo i have a table and a temp var to keep the delimited string, using js I am putting the delimited strings into appropriate places, but instead of an input box, i want some label i.e., without any boundary or box holding the value. Is there a way to do that, I am using jsp
for eg:
Configuration Name Raj
<td width="25%"><input type="text" id="cname" readonly="readonly" style="border:0"></input></td>
OR
document.getElementById("cname").innerHTML = config_details[0];
with either
<td width="25%"><label" id="cname"></label></td>
or
<td width="25%" id="cname" ></td>
PS: here are the new input types from HTML5
search
tel
url
email
datetime
date
month
week
time
datetime-local
number
range
color
There is nothing like <input type="label"></input>
So you can do something like this.
Change <td width="25%" id="cname"><input type="label"readonly="readonly"></input></td> to <td width="25%" id="cname"></td> and call it like
document.getElementById("cname").innerHTML= config_details[0];
You can put the values into any kind of element you want. Just give the id (e.g. cname) to the element you want to put the value in and then use .innerHTML instead of .value, e.g.:
<table width="100%" cellspacing="0" cellpadding="4" border="0">
<tbody>
<tr>
<th width="25%">Configuration Name</th>
<td width="25%" id="cname"></td>
<th width="25%">Host Name</th>
<td width="25%" id="chostname"></td>
</tr>
<!-- ... -->
</tbody>
</table>
And in your JavaScript:
config_details = temp.split(",");
document.getElementById("cname").innerHTML = config_details[0];
// ...
document.getElementById("chostname").innerHTML = config_details[5];
// ...
Try something like this fiddle
HTML
<table width="100%" cellspacing="0" cellpadding="4" border="0">
<tbody>
<tr>
<th width="25%">Configuration Name</th>
<td width="25%"><span id="cname"></span></td>
<th width="25%">Host Name</th>
<td id="chostname" width="25%"></td>
</tr>
</tbody>
</table>
JS
var temp = "Raj,jh,Production,2011-06-06 08:30:15.0,client1.xml,nix1,abc,Linux"
config_details = temp.split(",");
document.getElementById("cname").innerHTML = config_details[0];
Related
I have this kind of data in my html which is very wrong
<table
border="0"
cellpadding="0"
id="iFlightTable"
class="cellpadding3 styled-table"
>
<thead>
<tr class="flightData1">
<td width="10%">Name</td>
<td width="5%">Subject</td>
<td width="20%">Email</td>
</tr>
</thead>
<table
border="0"
cellpadding="0"
id="iFlightTable"
class="cellpadding3 styled-table deleteit"
>
<tbody>
<tr>
<td></td>
</tr>
- many elements like this
</tbody>
</table>
</table>
with jquery I want to delete the table having the class "deleteit" and the extra closing </table> at the bottom, so my rendered table is perfect.
any clues how can I do it please guide ?
I am uysing raw vanilla javascript
coded as above to try to use a log of javascript and even created a function but it didn't help, it removes everything
function removeElementsByClass(className) {
const elements = document.getElementsByClassName(className);
while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]);
}
}
As you can see under 2nd row of my table between two cells there is a space which I want to remove but I am not sure how to achieve that.
Any help or suggestion will appreciated.Thanks
var str1 = "78896541230";
str1 = str1.replace(/.(?=.{4})/g, 'x');
document.getElementById('output').innerHTML = str1;
<table border="0" cellspacing="0" cellpadding="1" class="formtable">
<caption>Just for fun</caption>
<tr>
<td>The following will contain masked input number </td>
<td id="output"></td>
</tr>
<tr>
<td> If it is not masked number, then something is wrong.</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="1" class="formtable">
<tr>
<td>The following will contain masked input number </td>
<td id="output">XXXXXXX0230</td>
</tr>
<tr>
<td colspan="2"> If it is not masked number, then something is wrong.</td>
</tr>
</table>
The white space between the text and the 'output' number is being caused by the longer text in the second row. This causes the first column of the first row stretch. You're also nesting <tr> elements which you shouldn't.
You could add a colspan="2" to the <td> in the second row.
You can use the cell spacing and cell padding attribute in html 5
And set their values to 0 or -1
The answer stated above is all good unless the text in second <td> element increases.I have found a better solution which does work in my case.
Instead of putting the value of #output in another <td> i can inline that in the previous <td> and that way the space won't be there. Here's how
Code
var str1 = "78896541230";
str1 = str1.replace(/.(?=.{4})/g, 'x');
document.getElementById('output').innerHTML = str1;
<table border="0" cellspacing="0" cellpadding="1" class="formtable">
<caption>Just for fun</caption>
<tr>
<td>The following will contain masked input number <strong id="output"></strong></td>
</tr>
<tr>
<td> If it is not masked number, then something is wrong.</td>
</tr>
</table>
I have a HTML-Table
<table style="width:100%">
<tr>
<th>id</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>2</td>
<td contenteditable="true">Smith</td>
<td contenteditable="true">50</td>
</tr>
<tr>
<td>3</td>
<td contenteditable="true">Jackson</td>
<td contenteditable="true">94</td>
</tr>
</table>
(Just a TEST-Table)
It is editable, but how do I get all the rows (with ID) which were edited, to send them to a PHP-Backend which saves the changes to DB?
Thanks in advance,
Patrick.
You can save ids in an Array whenever field content is changed.
Here is the Working Example: https://jsfiddle.net/79egs9tc/
var idArr = [];
$(".edited").focusout(function() {
var id = $(this).parent().attr('id');
if($.inArray(id, idArr) === -1){
idArr.push(id);
}
console.log(idArr);
});
You can add check for content is changes or not.
Hope, it will work for you.
I would like to have keyup function that would show only rows matching the input text by cell that spans on multiple rows.
Consider following table:
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1'> dummy1 </td>
</tr>
<tr>
<td name='Key1'> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2'> dummy3 </td>
</tr>
<tr>
<td name='Key2'> dummy4 </td>
</tr>
</table>
jsfiddle
Here each row has second td tag with name that matches its "parent" column text. So when I type 'Key1' at the input field I would like it to show only dummy1 and dummy2. Is it possible in jquery?
I understand that you want to display the rows that has a matching name. If this is wrong, please elaborate more, then I can update it.
Here is a demo: https://jsfiddle.net/erkaner/gugy7r1o/33/
$('input').keyup(function(){
$('tr').hide();
$("td").filter(function() {
return $(this).text().toLowerCase().indexOf(keyword) != -1; }).parent().show().next().show();
});
});
Here's my take on your issue, assuming you always want the first column to show. https://jsfiddle.net/gugy7r1o/2/
<input type="text" id="myInput" />
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1' class="data"> dummy1 </td>
</tr>
<tr>
<td name='Key1' class="data"> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2' class="data"> dummy3 </td>
</tr>
<tr>
<td name='Key2' class="data"> dummy4 </td>
</tr>
</table>
.data{
display:none;
}
var theData = $('td.data');
var input = $('#myInput').on('keyup', function(){
theData.hide();
var value = input.val();
var matches = theData.filter('[name="'+value+'"]');
matches.show();
});
Firstly, I would recommend using <ul> to wrap each key in as tables should be used for data structure (Forgive me if that is what it is being used for).
Secondly, just attach an on keyup event to the search box and then find matches based on the id. See example below:
JS Fiddle Demo
It is also worth mentioning that it could be useful attaching a timeout to the keyup event if you end up having large amounts of rows so that only one filter is fired for fast typers!
Below is my table that is getting populated with spry dataset
Here is my dataset
var ds1 = new Spry.Data.XMLDataSet("/xml/data.xml", "rows/row");
Here is my jquery inside a method that is called on a button click
function addRow()
{
var newRow = new Array();
var nextID = ds1.getRowCount();
newRow['ds_RowID'] = nextID;
newRow['id'] = "x";
newRow['name'] = "Abhishek";
newRow['country'] = "India";
ds1.dataHash[newRow['ds_RowID']] = newRow;
ds1.data.push(newRow);
Spry.Data.updateRegion(ds1);
ds1.sort('name','descending');
ds1.setCurrentRow(newRow.ds_RowID);
$(".trEven td").css("background-color", "red");
alert($.fn.jquery);
/*$("#tableDg tbody tr:first").css({
"background-color": "red"
});*/
}
Here is my table
<div id="cdiv" style="width:100%;" spry:region="ds1">
<table id="tableDg"
style="border:#2F5882 1px solid;width:100%;" cellspacing="1" cellpadding="1">
<thead>
<tr id="trHead" style="color :#FFFFFF;background-color: #8EA4BB">
<th width="2%"><input id="chkbHead" type='checkbox' /></th>
<th width="10%" align="center" spry:sort="name"><b>Name</b></th>
<th width="22%" align="center" spry:sort="host"><b>Country</b></th>
</tr>
</thead>
<tbody spry:repeat="ds1">
<tr id="trOdd"
spry:if="({ds_RowNumber} % 2) != 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
style="color :#2F5882;background-color: #FFFFFF" class="{ds_OddRow}">
<td><input type="checkbox" id="chkbTest" class = "chkbCsm"></input></td>
<td width="10%" align="center"> {name}</td>
<td width="22%" align="center"> {country}</td>
</tr>
<tr id="trEven"
spry:if="({ds_RowNumber} % 2) == 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
style="color :#2F5882;background-color: #EDF1F5;" class="{ds_EvenRow}">
<td><input type="checkbox" class = "chkbCsm"></input></td>
<td id="tdname" width="10%" align="center"> {name}</td>
<td width="22%" align="center"> {country}</td>
</tr>
</tbody>
</table>
</div>
Am I going wrong somewhere, please guide me. Thanks :)
If I remember right, <tr> is only describing structure. <td> represents visual part of the table. Or this is how some browsers renders them.
Therefore $("#trEven td").css("background-color", "red") should work. And preferrably you should use classes instead of ids in these kind of cases where there may exist multiple instances.
Works for me (jsFiddle). What problems are you experiencing?
If your use classes instead of id's, you can use something like the following:
$('.trEven').each(function() {
$(this).css({"background-color": "red"});
});
See for reference: jQuery API - .each()
You shouldn’t be using ids for odd and even rows. id values are meant to be unique within the page.
So, I’d suggest:
<tr class="trOdd"
and:
<tr class="trEven"
and then:
$(".trEven")
If you really only want the first row in the table body to get a red background (as opposed to all the even ones), then your selector should be:
$("#tableDg tbody tr:first")