I have a table created from a WYSIWYG editor and save as a string in C#. When I submit a form, I will map the values to the table cells. However, there are some empty rows that don't have any data. How can I remove these rows, for example the 3 4 row, before returning the html string with either regex or HtmlAgilityPack? Thanks
The table in the string looks like this:
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>Arthur</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Preview:
It's better to manage the empty elements on the frontend than the backend because you don't need to submit them and process them on the backend if you can simply filter them out (or even better validate them before submitting) on the frontend.
Proof-of-concept with JS:
const cells = document.querySelectorAll('td');
const emptyCells = Array.from(cells).filter(cell => cell.innerHTML === '');
emptyCells.forEach(cell => cell.parentNode.remove());
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>Arthur</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Related
These are the sample codes I've been using with el = "#app".
<div id="app">
<div id="customertable" style=" overflow:auto !important;height:100% ">
<table class="table" id="table">
<thead id="customerheadertable">
<tr>
<th scope="col" style="width:1%"></th>
<th scope="col" style="width:10%">Customer ID</th>
<th scope="col" style="width:30%">Customer Name</th>
<th scope="col" style="width:30%">Address</th>
<th scope="col" style="width:10%">Contact Number</th>
<th scope="col" style="width:10%">Actions</th>
</tr>
</thead>
<tbody id="custtomerbodytable">
<tr>
<td>1</td>
<td ref="customerid">(CUSTOMER ID)</td>
<td>(Name)</td>
<td>(Address)</td>
<td>(MOBILE NUMBER)</td>
<td>
<b-dropdown text="•••" class="activity_button">
<b-dropdown-item href="#" ##click="dropdown(event)" class="dropdown">View</b-dropdown-item>
</b-dropdown>
</td>
</tr>
<tr>
<td>2</td>
<td ref="customerid">(CUSTOMER ID)</td>
<td>(Name)</td>
<td>(Address)</td>
<td>(MOBILE NUMBER)</td>
<td>
<b-dropdown text="•••" class="activity_button">
<b-dropdown-item href="#" ##click="dropdown(event)" class="dropdown">View</b-dropdown-item>
</b-dropdown>
</td>
</tr>
</tbody>
</table>
</div>
</div>
How can I get the nearest value of ref="customerid" when clicking ##click="dropdown(event)" using Vue JS.
Like in jquery.
$(".dropdown").click(function() {
$(this).closest('tr').find('td:eq(1)').html().trim();
});
------This is the sample output
How to convert html table to datagridview in C#?
Let me know any reference for conversion.
Here is Html table.
<table>
<tr>
<td>Living Room</td>
</tr>
<tr>
<td>Size</td>
<td>Quantity</td>
<td>Amount</td>
<td>Duration</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
I have a string is as follows:
L1N:0V L2N:0V L3N:0V L12:0V L23:0V L31:0V IL1:0A IL2:0A IL3:0A RPM:0 FREQ:0.00Hz P:0.00psi T:64'C Fuel:43% kVA:0 BVolt:27.00V Hrs:2272
I am interested in the splits that are bold in the following string
L1N:0V L2N:0V L3N:0V L12:0V L23:0V L31:0V IL1:0A IL2:0A IL3:0A RPM:0 FREQ:0.00Hz P:0.00psi T:64'C Fuel:43% kVA:0 BVolt:27.00V Hrs:2272
And I want to create multiple rows for each of these splits as shown below.
<table>
<tr>
<td>ID</td>
<td>Value</td>
</tr>
<tr>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>3</td>
<td>0</td>
</tr>
<tr>
<td>4</td>
<td>0</td>
</tr>
<tr>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td>6</td>
<td>0</td>
</tr>
<tr>
<td>7</td>
<td>0</td>
</tr>
<tr>
<td>8</td>
<td>0</td>
</tr>
<tr>
<td>9</td>
<td>0</td>
</tr>
<tr>
<td>10</td>
<td>0</td>
</tr>
<tr>
<td>11</td>
<td>0</td>
</tr>
<tr>
<td>12</td>
<td>0</td>
</tr>
<tr>
<td>13</td>
<td>64</td>
</tr>
<tr>
<td>14</td>
<td>43</td>
</tr>
<tr>
<td>15</td>
<td>0</td>
</tr>
<tr>
<td>16</td>
<td>27</td>
</tr>
<tr>
<td>17</td>
<td>2272</td>
</tr>
</table>
While agreeing with the comments above, try this for starters:
string[] substring = myString.Split(':');
foreach (string str in substrings){
if(!string.IsNullOrEmpty(str){
var val = double.tryParse(str);
}
}
And then use those values for your html (in javascript it would be something like
var table = document.getElementById('myTable');
var row = table.insertRow(0);
cell1 = row.insertCell(0);
cell1.innerHTML = val;
this is my html :
<table>
<tbody>
<tr>
<table>
...
</table>
</tr>
<tr>
<table>
...
</table>
</tr>
<tr>
<table>
<tr>
<td width="165"></td>
<td width="165"></td>
<td width="165"></td>
</tr>
</table>
</tr>
</tbody>
</table>
there are lots of table, how to get td tags only with [width="165"] attribute? i am using htmlagilitypack in c#
You can use HAP's SelectNodes() method passing the following XPath as argument :
//td[#width=165]
I am dynamically generating tables one after another using asp.net c#.I have different section in a table
td.section{width:200px;}
<table>
<tr>
<td colspan="2" class="section">Sec 1</td>
</tr>
<tr>
<td>1</td>
<td>s</td>
</tr>
</table>
<table>
<tr>
<td class="section">Sec 2</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td colspan="3" class='section'>Sec 3</td>
</tr>
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
I want each sections must be same with but I am unable to do this.Can you guide me how can I do this.
I added the width attribute at the top within a style tag and I think I got what you're aiming for. Note that width is spelled with a "d" and you are also missing a "<" on your second tag.
Finished product:
<style>
td.section{width:200px;}
</style>
<table>
<tr>
<td colspan='2' class='section'>Sec 1</td>
</tr>
<tr>
<td>1</td>
<td>s</td>
</tr>
</table>
<table>
<tr>
<td class='section'>Sec 2</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
<tr>
<td colspan='3' class='section'>Sec 3</td>
</tr>
<tr>
<td>1</td>
</tr>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>