treewide: convert HTML tables to div

Mostly convert HTML tables to div based markup to allow for easier styling
in the future. Also change JS accessor code accordingly.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 28 insertions, 42 deletions

diff --git a/applications/luci-app-upnp/luasrc/view/upnp_status.htm b/applications/luci-app-upnp/luasrc/view/upnp_status.htm
index 89fdb5e218..1e09225793 100644
--- a/applications/luci-app-upnp/luasrc/view/upnp_status.htm
+++ b/applications/luci-app-upnp/luasrc/view/upnp_status.htm
@@ -4,8 +4,8 @@
 			function(x)
 			{
 				var tb = document.getElementById('upnp_status_table');
-				if (tb && (idx < tb.rows.length))
-					tb.rows[0].parentNode.removeChild(tb.rows[idx]);
+				if (tb && (idx + 1 < tb.childNodes.length))
+					tb.removeChild(tb.childNodes[idx + 1]);
 			}
 		);
 	}
@@ -17,35 +17,21 @@
 			if (st && tb)
 			{
 				/* clear all rows */
-				while( tb.rows.length > 1 )
-					tb.deleteRow(1);
+				while (tb.firstElementChild !== tb.lastElementChild)
+					tb.removeChild(tb.lastElementChild);
 
-				for( var i = 0; i < st.length; i++ )
-				{
-					var tr = tb.insertRow(-1);
-						tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
+				for (var i = 0; i < st.length; i++)
+					tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [
+						E('<div class="td">', st[i].proto),
+						E('<div class="td">', st[i].extport),
+						E('<div class="td">', st[i].intaddr),
+						E('<div class="td">', st[i].intport),
+						E('<div class="td">', st[i].descr),
+						E('<input class="cbi-button cbi-input-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />'.format(st[i].num))
+					]));
 
-					tr.insertCell(-1).innerHTML = st[i].proto;
-					tr.insertCell(-1).innerHTML = st[i].extport;
-					tr.insertCell(-1).innerHTML = st[i].intaddr;
-					tr.insertCell(-1).innerHTML = st[i].intport;
-					tr.insertCell(-1).innerHTML = st[i].descr;
-
-					tr.insertCell(-1).innerHTML = String.format(
-						'<input class="cbi-button cbi-input-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />',
-							st[i].num
-					);
-				}
-
-				if( tb.rows.length == 1 )
-				{
-					var tr = tb.insertRow(-1);
-						tr.className = 'cbi-section-table-row';
-
-					var td = tr.insertCell(-1);
-						td.colSpan = 5;
-						td.innerHTML = '<em><br /><%:There are no active redirects.%></em>';
-				}
+				if (tb.firstElementChild === tb.lastElementChild)
+					tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active redirects.%></em></div></div>'));
 			}
 		}
 	);
@@ -53,17 +39,17 @@
 
 <fieldset class="cbi-section">
 	<legend><%:Active UPnP Redirects%></legend>
-	<table class="cbi-section-table" id="upnp_status_table">
-		<tr class="cbi-section-table-titles">
-			<th class="cbi-section-table-cell"><%:Protocol%></th>
-			<th class="cbi-section-table-cell"><%:External Port%></th>
-			<th class="cbi-section-table-cell"><%:Client Address%></th>
-			<th class="cbi-section-table-cell"><%:Client Port%></th>
-			<th class="cbi-section-table-cell"><%:Description%></th>
-			<th class="cbi-section-table-cell">&#160;</th>
-		</tr>
-		<tr class="cbi-section-table-row">
-			<td colspan="5"><em><br /><%:Collecting data...%></em></td>
-		</tr>
-	</table>
+	<div class="table cbi-section-table" id="upnp_status_table">
+		<div class="tr cbi-section-table-titles">
+			<div class="th cbi-section-table-cell"><%:Protocol%></div>
+			<div class="th cbi-section-table-cell"><%:External Port%></div>
+			<div class="th cbi-section-table-cell"><%:Client Address%></div>
+			<div class="th cbi-section-table-cell"><%:Client Port%></div>
+			<div class="th cbi-section-table-cell"><%:Description%></div>
+			<div class="th cbi-section-table-cell">&#160;</div>
+		</div>
+		<div class="tr cbi-section-table-row">
+			<div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div>
+		</div>
+	</div>
 </fieldset>