How to get tr count from html table by using Id.Please check my code below
<table id="tableId">
<tr id="a">
<td>a</td>
</tr>
<tr id="b">
<td>b</td>
</tr>
Now I want to find rowNumber by using row Id.for example my rowId is 'b' I want to find rowNumber for this Id.Any one help me
Here you go
var table = document.getElementById("tableId");
var rowIndex = document.getElementById("b").rowIndex;
table.deleteRow(rowIndex);
Added the code for deletion, as requested in the comments below.
It's very using with jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var rowCount = $('table#tableId tr:#b').index() + 1;
alert(rowCount);
$("#b").remove() // For Remove b Row (tr)
});
</script>
Your HTML
<table id="tableId">
<tr id="a">
<td>a</td>
</tr>
<tr id="b">
<td>b</td>
</tr>
</table>
If you want to remove the row with id b
$("#b").remove()
If you have the Id within any cell, then the below should work
document.getElementById("myID "+tempIdx).parentNode.parentNode.rowIndex;
provided table is in the below format
<table>
<tr>
<td>
<p id="myID 1" />
</td>
<td>xxx</td>
</tr>
<td>yyy</td>
<td>
<p id="myID 2" />
</td>
</tr>
<td>
<p id="myID 3" />
</td>
</tr>
</table>
The first .parentNode will give the CELL the second will give the ROW, then get the INDEX from the ROW
Related
Suppose I have two different tables as below:
<table id="T1">
<tr id="a">
<td>a</td>
</tr>
<tr id="b">
<td>b</td>
</tr>
</table>
<table id="T2">
<tr id="a">
<td>A</td>
</tr>
<tr id="b">
<td>B</td>
</tr>
</table>
These two tables have different IDs. However, due to design, some of their rows, when created, have the same IDs. In this case, both rows have the same ids a and b.
I am having trouble accessing rows by using document.getElementById since it could be multiple duplication. How do I specify a row using both the table ID and the row ID in JavaScript? Thanks.
You should never ever use the same ID twice! That said, you can use document.querySelectorAll() where you can use the same selectors as you use in CSS. Something like so to get all <tr>
var rowsOfTable1 = document.querySelectorAll('#T1 tr');
var rowsOfTable2 = document.querySelectorAll('#T2 tr');
rowsOfTable1.forEach( row => { console.log(row.innerHTML) });
rowsOfTable2.forEach( row => { console.log(row.innerHTML) });
<table id="T1">
<tr id="a">
<td>T1 a</td>
</tr>
<tr id="b">
<td>T1 b</td>
</tr>
</table>
<table id="T2">
<tr id="a">
<td>T2 A</td>
</tr>
<tr id="b">
<td>T2 B</td>
</tr>
</table>
or you can be more specific with the selector. If you know you only want to get 1 item you can also use Document.querySelector() which will not return an array but just the single item, something like:
var aOfTable1 = document.querySelector('#T1 #a');
var bOfTable2 = document.querySelector('#T2 #b');
console.log(aOfTable1.innerHTML);
console.log(bOfTable2.innerHTML);
<table id="T1">
<tr id="a">
<td>T1 a</td>
</tr>
<tr id="b">
<td>T1 b</td>
</tr>
</table>
<table id="T2">
<tr id="a">
<td>T2 A</td>
</tr>
<tr id="b">
<td>T2 B</td>
</tr>
</table>
or you could select all <tr> elements with an id like:
var rowsOfTable1 = document.querySelectorAll('#T1 tr[id]');
I have a multiple html tables in a same page, I want to get country code when on click on country get nearest country code value
Ex:- 1).country-click nearest -- India
Ex:- 2).country-click nearest -- China
Ex:- 3).country-click nearest -- Japan
Here is my table
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">India</td>
</tr>
</table>
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">China</td>
</tr>
</table>
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">Japan</td>
</tr>
</table>
Here is script code
$(document).ready(function(){
$("button").click(function(){
console.log($(this).parents().closest('tr').find('#code').html());
});
});
Thanks for suggestions.
You can use siblings for table rows
Sorry for snippet code formating, I can't format it in this editor for some reason.
You are doing good on finding closest tr, now you have to check sibling rows that contain element with "#code" id (you should use class instead of id here, id must be unique, as berko commented).
Here is jquery code:
$(document).ready(function(){
$("button").click(function(){
alert($(this).closest('tr').siblings().find('#code').html());
});
});
..and here is snippet:
$(document).ready(function(){
$("button").click(function(){ alert($(this).closest('tr').siblings().find('#code').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="country">
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">India</td>
</tr>
</table>
<table id='country'>
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">China</td>
</tr>
</table>
<table id="country">
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">Japan</td>
</tr>
</table>
This is my FIDDLE
<table>
<tr>
<td>
<div style="background:blue;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:blue;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green;color:white">hello</div>
</td>
</tr>
</table>
How do i rearrange the html table rows based on color? I want to group html table rows based on the background color of the rows.
Use sort() to sorting array of tr elements. You can get backgroud-color of element in function of sort and set arrangement of every element.
$("table tr").sort(function (a, b){
return $("div", b).css("background") < $("div", a).css("background") ? 1 : -1;
}).appendTo('table');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div style="background:blue">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:blue">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green">hello</div>
</td>
</tr>
</table>
I reviewed your question, I think you want to differentiate each tr by there color, adding html, style and script for you here.
Here is the Html
<table>
</tbody>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
</table>
Do add this script, by this function all your tr will have unique classes. you can add there background colors etc style on the base of class
<script>
// please do add jQuery file to prevent error
function adddClass() {
for(i=1; i<=6; i++) {
alert("");
jQuery('table tr:nth-child('+ i +')').addClass("color"+i);
}
}
adddClass();
</script>
Here is the style for background color of each table row tr
<style>
.color1{background-color:orange;}
.color2{background-color:teal;}
.color3{background-color:red;}
.color4{background-color:#717171;}
.color5{background-color:khaki;}
.color6{background-color:lightgray;}
tr, table, body{width:100%;}
</style>
Hope this will help, Thanks.!
You can easily do it in javascript.
Initiate an empty js object like this var colorRowmap = {}
Loop through all elements(tr elements) of table and get colorName from each tr. And if that color does not exist as a key of colorRowMap object do colorRowMap[colorName] = [currentTableRow] else do colorRowMap[colorName] = colorRowMap[colorName].push(currentTableRow)
Empty the table.
Loop through all keys of colorRowMap and push the tr roows to table.
Done. :)
I am using CKEditor 4.3.3, Where i have added table .Now table structure looks like given below
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Now i am able to select table using javascript as
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent();
Now i want to add html text before <tbody> start and after <table> start .
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().appendHtml("<!-- <div>" +html+"</div> -->");
I am using this to append HTML. But for prepending HTML i am not able to find any API
Is there any alternatives?
I want output to be like this
<table>
<!-- <div>testing</div> -->
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody></table>
you can use any jquery functions by
var html=CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().getParent();
$(html.$).prepend("hi");
You can use this
var editor = CKEDITOR.instances.ficeditor;
var data = $("<div>"+editor.getData()+"</div>");
data.prepend("top line");
editor.setData(data.html());
I have an html table with cells that span multiple rows:
<table border="1" style=""><tbody id="x">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3">**</td>
<td>AAAA</td>
<td> </td>
</tr>
<tr id="row2">
<td>BBBB</td>
<td> </td>
</tr>
<tr>
<td>CCCC</td>
<td> </td>
</tr>
<tr>
<td style=""> </td>
<td id="ee">EEEE</td>
<td> </td>
</tr>
<tr>
<td style=""> </td>
<td id="dd">DDDD</td>
<td> </td>
</tr>
</tbody></table>
<script type="text/javascript">
alert ("index of dd before delete =" + document.getElementById("dd").cellIndex);
document.getElementById("row2").style.display="none";
alert ("index of dd after delete =" + document.getElementById("dd").cellIndex);
</script>
I am trying to manipulate it in Javascript, eg hide row2.
When I do that, the multi-row cell containing "**" moves down, shifting all the cells in row 3 by 1 to the right. Evidently I have to reduce its rowSpan.
But it seems when I am looking at row 1, I have no way of knowing that there is a multi-row cell intersecting this row - it seems I have to scan all the rows above row2 for multi-row cells.
Is there a better/quicker way to find out what multi-row cells affect the hiding (or deleting) operation?
Try this using javascript... It is working properly.
Change the value of currRowToDelete for Range [1 to 6].
Refer for working code: http://jsfiddle.net/arunkumrsingh/cdS2D/1/
<table id="tbl" border="1" runat="server" >
<tr id="row1">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td rowspan="3">**</td>
<td>AAAA</td>
<td> </td>
</tr>
<tr id="row3">
<td>BBBB</td>
<td> </td>
</tr>
<tr id="row4">
<td>CCCC</td>
<td> </td>
</tr>
<tr id="row5">
<td style=""> </td>
<td id="ee">EEEE</td>
<td> </td>
</tr>
<tr id="row6">
<td style=""> </td>
<td id="dd">DDDD</td>
<td> </td>
</tr>
</table>
<script type="text/javascript">
var trs = document.getElementById("tbl").getElementsByTagName("tr");
var tds;
var bDeleted = false;
var currRowToDelete = 3;
for(var i=0;i<currRowToDelete;i++)
{
tds = trs[i].getElementsByTagName('td');
for(var j=0;j<tds.length;j++)
{
var currRowSpan = tds[j].rowSpan;
if(currRowSpan > 1)
{
if(eval(i + 1) == currRowToDelete)
{
var cell = document.createElement("td");
cell.innerHTML = tds[j].innerHTML;
trs[i + 1].insertBefore(cell, trs[i + 1].getElementsByTagName('td')[0]);
document.getElementById("tbl").deleteRow(i);
bDeleted = true;
document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);
}
else
{
if(eval(currRowSpan + i) >= currRowToDelete)
document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);
}
}
}
}
if(bDeleted == false)
document.getElementById("tbl").deleteRow(currRowToDelete -1);
</script>
I have a solution, in which you don't have to calculate the Rowspan and Colspan.
Step 1: Get the content of HTML (As mentioned above) and save as EXCEL file.
Step 2: Delete the particular Row (ie Row 2).
Step 3: Save as HTML file and Read the HTML content.
You will get the HTML in correct format.