What I need is append html content to a html table cell with jQuery via append method. This is my code,
$('.add_client').click(function(){
var table = document.getElementById("client_table");
var row = table.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var content = "<strong>Hello</strong>";
cell1.append( content );
cell2.append( content );
});
But appended content looks like <strong>Hello</strong> instead of just Hello. IT will be great if someone can help me on this.
You are using javascript append method not jquery if you want to use jquery append method use it as below $(cell2).append( content )
$('.add_client').click(function(){
var table = document.getElementById("client_table");
var row = table.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var content = "<strong>Hello</strong>";
$(cell1).append( content );
$(cell2).append( content );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add_client">Add</button>
<table id="client_table">
<tr>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
</tr>
<tr>
<td>A6</td>
<td>B5</td>
</tr>
</table>
You are using jQuery append on a DOM node. You need to wrap the cell in $()
$(cell1).append(content);
But since you have jQuery, use it - for example like this
$('.add_client').click(function() {
let $row = $("<tr/>")
let content = "<strong>Hello</strong>";
$row.append($("<td/>").append(content))
$row.append($("<td/>").append(content))
$("#client_table > tbody > tr").eq(4).after($row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add_client" type="button">Click</button>
<table id="client_table">
<tbody>
<tr>
<td>0</td>
<td>Row 0</td>
</tr>
<tr>
<td>1</td>
<td>Row 1</td>
</tr>
<tr>
<td>2</td>
<td>Row 2</td>
</tr>
<tr>
<td>3</td>
<td>Row 3</td>
</tr>
<tr>
<td>4</td>
<td>Row 4</td>
</tr>
<tr>
<td>5</td>
<td>Row 5</td>
</tr>
</tbody>
</table>
You can use insertAdjacentHTML for appending text as html
cell1.insertAdjacentHTML('beforeend', content);
cell2.insertAdjacentHTML('beforeend', content);
The problem in your case is index. If index is -1 or equal to the number of rows, the row is appended as the last row. If index is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1. about insertRow
$('.add_client').click(function(){
var table = document.getElementById("client_table");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var content = "<strong>Hello</strong>";
cell1.append( content );
cell2.append( content );
});
td {
border: 2px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<input type="button" value="add more" class="add_client"/>
<table id="client_table">
</table>
Related
I am trying to get the value of the cell right of the cell where i click.
But right now I get the value of the cell I want, but I can click any cell in that row and get the desired value. But it should only be possible with the first column. So I click the any cell in the first column and I wanna get it's next neighbour cell value.
document.querySelector("#tableEventListId").addEventListener("click",event => {
let dataTr = event.target.parentNode;
let deleteEventId = dataTr.querySelectorAll("td")[1].innerText;
console.log(deleteEventId);
alert(deleteEventId);
Any help?
You can use nextElementSibling
document.getElementById('table1').onclick = function(event){
//REM: Target
var tElement = event.target;
if(
//REM: Only cells (=<td>)
tElement.tagName === 'TD' &&
//REM: Only first column cells
tElement.parentNode.firstElementChild === tElement
){
//REM: Next Elementsibling of Target or Null
var tNext = tElement.nextElementSibling;
if(tNext){
console.log('TD: ', tElement.textContent);
console.log('Next: ', tElement.nextElementSibling.textContent)
}
}
}
table, td{
border: 1px solid black
}
<table id = 'table1'>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>
There is no HTML, so I can assume it's something like
<table border="1">
<tr>
<td class="first-column">1.1 (click here)</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td class="first-column">2.1 (click here)</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
According to this HTML, you can try
const firstColumns = document.querySelectorAll(".first-column");
for (let i = 0; i < firstColumns.length; i++) {
firstColumns[i].addEventListener("click", function(event) {
let dataTr = event.target.parentNode;
let deleteEventId = dataTr.querySelectorAll("td")[1].innerText;
console.log(deleteEventId);
alert(deleteEventId);
});
}
Have a look https://jsfiddle.net/vyspiansky/k2toLd8w/
I would recommend you to a an event on every td element of the table. Then use nextElementSibling to get a next cell.
Look code snippet to see the example.
const cells = document.querySelectorAll('#tableEventListId td');
cells.forEach(cell => cell.onclick = function(){
const nextCell = cell.nextElementSibling;
if (nextCell)
alert(nextCell.innerHTML);
})
<table id="tableEventListId">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
</tr>
</table>
If you want it to work only for cells at first column change the selector to #tableEventListId td:first-child.
Problem
I have a table with one or more empty rows. How to hide empty rows from the table?
For example
1 - John | Alfredo
2 - Mark | Zuck
3 - |
4 - Carl | Johnson
In this case, I'd like to delete the third row.
Step Tried
I found how to delete a specific row, what about deleting all the empty rows?
deleteEmptyRows();
function deleteEmptyRows() {
var myTable = document.getElementById("myTable")
var rowToDelete = 2;
myTable.deleteRow(rowToDelete)
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
<tbody>
<tr>
<td>John</td>
<td>Alfredo</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuck</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Carl</td>
<td>Johnson</td>
</tr>
</tbody>
</table>
This is how you can dynamically hide empty table rows with javascript.
deleteEmptyRows();
function checkIfCellsAreEmpty(row) {
var cells = row.cells;
var isCellEmpty = false;
for(var j = 0; j < cells.length; j++) {
if(cells[j].innerHTML !== '') {
return isCellEmpty;
}
}
return !isCellEmpty;
}
function deleteEmptyRows() {
var myTable = document.getElementById("myTable");
for(var i = 0; i < myTable.rows.length; i++) {
var isRowEmpty = checkIfCellsAreEmpty(myTable.rows[i]);
if (isRowEmpty) {
myTable.rows[i].style.display = "none";
}
}
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
<tbody>
<tr>
<td>John</td>
<td>Alfredo</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuck</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Carl</td>
<td>Johnson</td>
</tr>
</tbody>
</table>
Here, a simple method for row is empty (this allows us to check for other conditions easily later).
Loop over rows and call remove if empty.
const rowIsEmpty = (tr) => Array.from(tr.querySelectorAll('td')).every(td => td.innerText === "");
deleteEmptyRows();
function deleteEmptyRows() {
var myTable = document.getElementById("myTable");
myTable.querySelectorAll('tr').forEach(tr => {
if(rowIsEmpty(tr)) tr.remove();
});
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
<tbody>
<tr>
<td>John</td>
<td>Alfredo</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuck</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Carl</td>
<td>Johnson</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Was answered in another thread.
Jquery: hiding empty table rows
Loops through all table tr rows, and checks td lengths. If the td length is empty will hide.
$("table tr").each(function() {
let cell = $.trim($(this).find('td').text());
if (cell.length == 0){
console.log('Empty cell');
$(this).addClass('nodisplay');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
</tr>
<tr>
<!-- Will hide --> <td></td>
</tr>
</table>
With native Javascript:
function removeRow(src) {
var tableRows = document.getElementById(src).querySelectorAll('tr');
tableRows.forEach(function(row){
if((/^\s*$/).test(row.innerText)){
row.parentNode.removeChild(row);
}
});
}
removeRow('myTable');
The only problem is when you have some other characters in the row, except the whitespaces. This regex checks for blank characters, but if u have a dot inside or any other non empty character, it will fail.
I have table:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table-bordered" width="100%">
<tr>
<th>Product</th>
<th>Service</th>
</tr>
<tr>
<td>Product 1</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S13</td>
</tr>
<tr>
<td></td>
<td>S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S120</td>
</tr>
</table>
I need: where empty row with product (where product's name is empty) delete this row and move service to up product row and delete current service from up product. Example:
In this table we have product 1. I need remove S11 and paste: S13 and S14 in single row.
I need this table on result:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table-bordered" width="100%">
<tr>
<th>Product</th>
<th>Service</th>
</tr>
<tr>
<td>Product 1</td>
<td>S13, S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S120</td>
</tr>
</table>
I think, that this we can do with javascript or jquery. I try write this code:
$('table tr').each(function () {
if (!$.trim($(this).text())) $(this).remove();
});
But this only remove empty rows..
let tr
$('table tr').each(function () {
if($(this).find('td:nth-child(1)').text().length){
tr = $(this)
tr.find('td:nth-child(2)').text('')
}else{
let td = $(tr).find('td:nth-child(2)')
td.text(td.text() + ' ' + $(this).find('td:nth-child(2)').text())
$(this).remove()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table-bordered" width="100%">
<tr>
<th>Product</th>
<th>Service</th>
</tr>
<tr>
<td>Product 1</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S13</td>
</tr>
<tr>
<td></td>
<td>S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S120</td>
</tr>
</table>
for (var x= 0; x < $("table.table-bordered").children[0].children.length; x++) // loop through all table rows.
{
if($("table.table-bordered").children[0].children[x].children[1].outerHTML.indexOf(',') != -1) // if the second td of the table contains a comma
{
var arr = $("table.table-bordered").children[0].children[x].children[1].innerHTML.split(','); // split the array so you make as many rows as needed
for (var y = 1; y < arr.length; y++) { // loop trough the array
var row = document.createElement('tr'); // create a new row
var first = document.createElement('td');
row.append(first) // create a empty td and add it to the row
var second = document.createElement('td'); // create another td
second.append(arr[y]); // append the value (whats after the comma)
row.append(second); // add it to the row
$("table.table-bordered > tbody").append(row); // add the row to the table
}
};
}
With this i managed to add a row to the table but i didn't have time to add it in the right place but you could look into that yourself.
I hope this helps, but to be honest I think you would be better of changing it in the backend.
I started on that http://jsfiddle.net/DRFBG/
And if I add tables so mytable1, mytable2,...
<table id="mytable1" border="1">
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr class="data"><td>1st</td><td>1.1</td><td></td><td>1</td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td></td><td>2</td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td></td><td>3</td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td></td><td>4</td></tr>
</table>
<table id="mytable2" border="1">
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr class="data"><td>1st</td><td>1.1</td><td>1</td><td></td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td>2</td><td></td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td>3</td><td></td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td>4</td><td></td></tr>
</table>
How could I uniform my javascript code for all tables?
I've already tried passing by table[div^=mytable]*, but the problem is the second selector in the function.
So any ideas please? Thank you? Sorry for my english
By the way, the code is to remove th with empty td for each table
$('#mytable2 th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#mytable2 tr').length - 1)) {
$(this).hide();
tds.hide();
}
});
One approach is, selecting tables first and get their id and after that, doing the approach of http://jsfiddle.net/DRFBG/ on each of them like the following:
$('table').each(function()
{
var tb_id = $(this).attr('id');
$('#'+tb_id+' th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#'+tb_id+' tr').length - 1)) {
$(this).hide();
tds.hide();
}
});
});
Here is the working jsfiddle
To select all on your page you can use "table" selector.
So you'd need to use $('table2 th') instead of $('#mytable2 th')
One possible solution would be to loop through each column of each table, then check if there are any non-empty cells. If there is not, then you can safely remove() all the td and th within that column.
Note that the removal needs to be done last, otherwise it will affect the indexing of the following columns. You can do that by simply marking the cells to be removed with a class, and then selecting that class once all loops complete. Try this:
$('table').each(function() {
var $table = $(this);
var rows = $table.find('tr').length - 1; // -1 to account for the headings
$table.find('th').each(function(i, th) {
var $empty = $table.find(`td:nth-child(${i + 1}):empty`);
if ($empty.length == rows)
$empty.add(this).addClass('to-remove');
})
$table.find('.to-remove').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr class="data">
<td>1st</td>
<td>1.1</td>
<td></td>
<td>1</td>
</tr>
<tr class="data">
<td>2nd</td>
<td>2.01</td>
<td></td>
<td>2</td>
</tr>
<tr class="data">
<td>3rd</td>
<td>3.001</td>
<td></td>
<td>3</td>
</tr>
<tr class="data">
<td>4th</td>
<td>4.01</td>
<td></td>
<td>4</td>
</tr>
</table>
<table id="mytable2" border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr class="data">
<td>1st</td>
<td>1.1</td>
<td>1</td>
<td></td>
</tr>
<tr class="data">
<td>2nd</td>
<td>2.01</td>
<td>2</td>
<td></td>
</tr>
<tr class="data">
<td>3rd</td>
<td>3.001</td>
<td>3</td>
<td></td>
</tr>
<tr class="data">
<td>4th</td>
<td>4.01</td>
<td>4</td>
<td></td>
</tr>
</table>
I have a table for users to edit and view. I want to show the row content in a div, starting with the first row in the table. Then I want the user to be able to click an up or down arrow and display that new row content in the div.
Here is my html div where the row content will go:
<div id="rowEditDiv">
<div id="arrowIconsDiv">
<img src="images/up-arrow.png" class="arrowIcons" id="arrowUp">
<img src="images/down-arrow.png" class="arrowIcons" id="arrowDown">
</div>
<div id='editableRowToEdit'></div>
</div>
Here is my html table:
<table id='fileTextTableId'>
<tbody>
<tr class='rowToEdit'>
<td>1</td>
<td><pre>Some content will go on row 1</pre></td>
</tr>
<tr class='rowToEdit'>
<td>2</td>
<td><pre>Some content will go on row 2</pre></td>
</tr>
<tr class='rowToEdit'>
<td>3</td>
<td><pre>Some content will go on row 3</pre></td>
</tr>
<tr class='rowToEdit'>
<td>4</td>
<td><pre>Some content will go on row 4</pre></td>
</tr>
<tr class='rowToEdit'>
<td>5</td>
<td><pre>Some content will go on row 5</pre></td>
</tr>
<tr class='rowToEdit'>
<td>6</td>
<td><pre>Some content will go on row 6</pre></td>
</tr>
</tbody>
</table>
Here's my JS:
var table = document.getElementById("fileTextTableId");
var row = $(".rowToEdit");
var rowContent = table.rows[0].innerHTML;
//empty row
$("#editableRowToEdit").empty();
//draw arrows, form for specific row, and save btn
$("#editableRowToEdit").append(row);
$("#arrowUp").on("click", function() {
$("#editableRowToEdit").empty();
var rowUp = row.closest('tr').prev('tr');
console.log(rowUp);
$("#editableRowToEdit").append(rowUp);
});
$("#arrowDown").on("click", function() {
$("#editableRowToEdit").empty();
var rowDown = row.closest('tr').next('tr');
console.log(rowDown);
$("#editableRowToEdit").append(rowDown);
});
The JS code I have now doesn't show any new row content in the div and when I console log it, it shows all the rows in the table.
var table = document.getElementById("fileTextTableId");
var row = $(".rowToEdit");
var rowContent = table.rows[0].innerHTML;
//empty row
$("#rowToEdit").empty();
//draw arrows, form for specific row, and save btn
$("#rowToEdit").append(rowContent);
$("#arrowUp").on("click", function() {
var currentTdNo = $("#rowToEdit td").html();
var prevTdNo = parseInt(currentTdNo) - 1;
$(".rowToEdit").each(function(){
var interatioNo = $(this).children('td:first').html();
if ($.trim(interatioNo) == $.trim(prevTdNo)) {
var tdData = $(this).html();
$("#rowToEdit").empty();
$("#rowToEdit").append(tdData);
}
});
});
$("#arrowDown").on("click", function() {
var currentTdNo = $("#rowToEdit td").html();
var nextTdNo = parseInt(currentTdNo) + 1;
$(".rowToEdit").each(function(){
var interatioNo = $(this).children('td:first').html();
if ($.trim(interatioNo) == $.trim(nextTdNo)) {
var tdData = $(this).html();
$("#rowToEdit").empty();
$("#rowToEdit").append(tdData);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="rowEditDiv">
<div id="arrowIconsDiv">
<img src="images/up-arrow.png" class="arrowIcons" id="arrowUp">
<img src="images/down-arrow.png" class="arrowIcons" id="arrowDown">
</div>
<div id='rowToEdit'></div>
</div>
<table id='fileTextTableId'>
<tbody>
<tr class='rowToEdit'>
<td>1</td>
<td><pre>Some content will go on row 1</pre></td>
</tr>
<tr class='rowToEdit'>
<td>2</td>
<td><pre>Some content will go on row 2</pre></td>
</tr>
<tr class='rowToEdit'>
<td>3</td>
<td><pre>Some content will go on row 3</pre></td>
</tr>
<tr class='rowToEdit'>
<td>4</td>
<td><pre>Some content will go on row 4</pre></td>
</tr>
<tr class='rowToEdit'>
<td>5</td>
<td><pre>Some content will go on row 5</pre></td>
</tr>
<tr class='rowToEdit'>
<td>6</td>
<td><pre>Some content will go on row 6</pre></td>
</tr>
</tbody>
</table>
var row = $(".rowToEdit");
This means all your rows (because all of them have this class).
... and later on:
var rowUp = row.closest('tr').prev('tr'); // and
var rowDown = row.closest('tr').next('tr');
If you look at .prev() and .next(), they return next or previous sibling of each element in collection. Which means rowUp will hold all rows except last and rowDown will hold all rows except first.
You probably want to begin by selecting
var row = $(".rowToEdit").eq(0)
Or $(".rowToEdit").first(). After this your script will start working as you expect.
I guess this is what you're looking for?
var ftt = {
rTE : $(".rowToEdit").eq(0),
eRTE : $("#editableRowToEdit"),
aU : $('#arrowUp'),
aD : $("#arrowDown"),
place : function(row) {
ftt.eRTE.empty();
ftt.eRTE.append(row.clone())
}
}
ftt.place(ftt.rTE);
ftt.aU.on("click", function() {
var prev = ftt.rTE.prev();
ftt.rTE = prev.is('tr') ? prev : ftt.rTE;
ftt.place(ftt.rTE);
});
ftt.aD.on("click", function() {
var next = ftt.rTE.next();
ftt.rTE = next.is('tr') ? next : ftt.rTE;
ftt.place(ftt.rTE);
});
#editableRowToEdit {
border: 1px solid red;
display: inline-table;
margin-right: 100px;
}
.arrowIcons {
height: 50px;
width: 50px;
border: 1px solid red;
display: inline-block;
}
#arrowIconsDiv {
display: inline-block;
}
#rowEditDiv {
max-width: 800px;
display: flex;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowEditDiv">
<div id="arrowIconsDiv">
<span class="arrowIcons" id="arrowUp"></span>
<span class="arrowIcons" id="arrowDown"></span>
</div>
<div id='editableRowToEdit'></div>
</div>
<table id='fileTextTableId'>
<tbody>
<tr class='rowToEdit'>
<td>1</td>
<td>
<pre>Some content will go on row 1</pre>
</td>
</tr>
<tr class='rowToEdit'>
<td>2</td>
<td>
<pre>Some content will go on row 2</pre>
</td>
</tr>
<tr class='rowToEdit'>
<td>3</td>
<td>
<pre>Some content will go on row 3</pre>
</td>
</tr>
<tr class='rowToEdit'>
<td>4</td>
<td>
<pre>Some content will go on row 4</pre>
</td>
</tr>
<tr class='rowToEdit'>
<td>5</td>
<td>
<pre>Some content will go on row 5</pre>
</td>
</tr>
<tr class='rowToEdit'>
<td>6</td>
<td>
<pre>Some content will go on row 6</pre>
</td>
</tr>
</tbody>
</table>