Wrap table rows without breaking HTML validation? - javascript

I have a table and I want to wrap table rows , but the problem is I don't know with what to wrap those those guys up... If I use <div>,<span>,<tr>,<td>...they all break my validation. So with what can I wrap my table-rows without breaking validation?
This is how I want it to look only problem is that my HTML is not valid.
Fiddle Here
I am generating my wrappers using following Jquery
$(document).ready(function(){
$('tr:first').nextUntil('.section2').andSelf().addClass('section1');
$('tr:nth-child(3)').removeClass('section1').addClass('section2');
$('.section2').nextUntil('.section3').removeClass('section1').addClass('section2');
//Lets wrap those two sections inside divs ...
//This will obviously break my validation:(
$('tr.section1').wrapAll('<div class="section_box1"></div>');
$('tr.section2').wrapAll('<div class="section_box2"></div>');
});

As #KevinB writes in a comment, a tbody element is really the only way to group table rows in a wrapper element. In static markup, this could be:
<table class="form-table">
<tbody class="bg">
<tr valign="top">
<th scope="row">Hide Menu Background:</th>
<td>
<input type="checkbox" value="value1" name="name1"/>
</td>
</tr>
<tr valign="top">
<th scope="row">
Menu Background:
</th>
<td>
<input type="file" name=""/>
</td>
</tr>
</tbody>
<tbody class="other">
<tr valign="top">
<th scope="row">Hide Sidebar:</th>
<td>
<input type="checkbox" value="value2" name="name2"/>
</td>
</tr>
<tr valign="top">
<th scope="row">Hide Site Title:</th>
<td>
<input type="checkbox" value="value3" name="name3" />
</td>
</tr>
</tbody>
</table>
The class attributes on tbody elements are really not needed, but they can be used to make styling a little easier.
Alternatively, you might decide that the two parts are not really logically parts of the same table, and use two separate table elements. This is really the only way if you want column 2 to start at different positions.

I would first start by just removing the table to begin with. It is really only best practice to use a table when actual 'tabular data' is being shown.
<h3 class="title">General Settings:</h3>
<div class="section_box1">
Hide Menu Background: <input type="checkbox" value="value1" name="name1"/><br />
Menu Background: <input type="file" name=""/>
</div>
<div class="section_box2">
Hide Sidebar: <input type="checkbox" value="value2" name="name2"/><br />
Hide Site Title: <input type="checkbox" value="value3" name="name3" />
</div>
See the jsfiddle.
This way you can more freely add classes / wrappers as needed and still be HTML compliant.

Related

How to parse HTTP GET method object in JS

I have variable "parse" in which is saved GET like this:
<div class="List_modal" data-target-input-id="Product" data-target-input-hidden="Product_Hidden">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Code</th>
<th>Base</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a title="Wsome talking " href="#" class="List_Item">
123.123.123.123
<input type="hidden" class="Code" value="123.123.123.123" />
<input type="hidden" class="Base" value="I NEED THIS TEXT" />
</a>
</td>
<td>
<a title="ere random text too" href="#" class="List_Item">
randomtextrandomtext
<input type="hidden" class="Code" value="123.123.123.123" />
<input type="hidden" class="Base" value="I NEEED THIS TEXT" />
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
What i need is to get only string from input class "Base" and "Code". I tried RegEx but i am not JS developer and i cant make Functions and using jQuery becasue this script is used in Data Integration Framework. Have any idea how to get this to values? And it should be universal because every time i scrap some site i have different values i code and base class.
What you need to do is web scraping, it's a whole art form in itself. There are commercial places like scraperwiki who will do it for you, or look at https://en.wikipedia.org/wiki/Web_scraping
As you have the html in a file (presumably) you don't have to use javascript, you can use a toolset that you are more familiar with

Adding TinyMCE to my dynamic form table

I had an idea to help me work better and create tools for myself to work faster.
I intend to make documents to save my QA work to the db and to my server.
All that works so far on my local, but the problem im sitting with is that the TinyMCE editor i want to use is not working.
I have a dynamic table added to my form that helps me add and delete rows in my form. In one of the columns i have added the TinyMCE editor in to describe the process i did with my qa testing. I have added the tag "", but when i want to add another row, the editor has stopped working. I would like to know what can i do to create a new row but still be able to have the editor work in eack column/ row
<fieldset class="row2">
<legend>Process</legend>
<p>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Remove Row" onClick="deleteRow('dataTable')" />
<p>(All acions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="dataTable" class="form" border="1">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_STEP[]">
</td>
<td>
<label for="BX_process">Age</label>
<textarea type="text" required="required" class="small" name="BX_process[]"></textarea>
</td>
<td>
<label for="BX_pass-fail">Gender</label>
<select id="BX_pass-fail" name="BX_pass-fail" required="required">
<option>....</option>
<option>Pass</option>
<option>Fail</option>
</select>
</td>
<td>
<label for="BX_comment">Berth Pre</label>
<input id="BX_comment" name="BX_comment" required="required">
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script>tinymce.init({selector:'textarea'});</script>
I would just like to know how to generate a new text editor for every row i add?
I think you need to initialize each of the textareas independently. For example:
<script>
tinymce.init({selector:'#ta1'});
tinymce.init({selector:'#ta2'});
</script>
<h1>My First Text Area</h1>
<textarea id="ta1">Hello! Look at me, I'm an editable textarea!</textarea>
<h1>My Other Text Area</h1>
<textarea id="ta2">Whoa! Now there are two of us!</textarea>
See my jsfiddle: https://jsfiddle.net/wr8rh6b8/
You might also want to read up on selectors. The same selector syntax is used for CSS and for identifying DOM elements from your JavaScript code. See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors

GridView WebForm having multiple checkboxes per row but only 1 per row is allowed to be checked

I have code in which a gridview in asp.net webforms spits out 3 checkboxes of which I would like to have Jquery easily traverse through the ID's and ONLY allow 1 checkbox per row to be checked.
They will Always have the same name just that the ending numbers will increase thus row 1 might not have a number, but then ending in 1 then ending in 2 , then they all end of 3 etc...
I could do this regretfully long way of writing a ton of javascript/jquery in which I check for each specific checkbox and those that end in 1, those cannot have any others ending with 1 to be checked, they have to be unchecked.
I was thinking about regex in which I check the beginning of the ID and then the end of the ID and making sense that per ID having "chkCtrl" AND ending with a unique number like "1" that the specific box being checked will uncheck the other "chkCtrl" ending in 1 . Thus Out1 , Y1 , N1
I'm sure that there IS a fast way to do this I just cannot seem to find an example of it.
Example
<table>
<tr>
<td>Out</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>
<input id="MainContent_chkCtrlOut" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlY" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlN" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
</tr>
<tr>
<td>
<input id="MainContent_chkCtrlOut1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlY1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlN1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
</tr>
This can easily be done by writing a couple of lines of jquery. For example see the code below.
$('input:checkbox').click(function(){
$(this).closest('tr').find('input:checkbox').removeProp('checked');
$(this).prop('checked',true);
});
jsFiddle: https://jsfiddle.net/taleebanwar/a3qk0kc1/1/
Edit
As Tom Stickel has mentioned in the comments using removeProp is a bad idea. It may not work in jquery 2.*. Refer Tom Stickel's answer for a better way to do this.
The selected answer will work in older jquery, if you changed that selected answer jquery version to a new version the checkboxes do not work.
.removeProp is bad idea https://api.jquery.com/removeProp/
Taleeb was very close however, I would say to edit that one line.
$('input:checkbox').click(function () {
$(this).closest('tr').find('input:checkbox').prop('checked', false);
$(this).prop('checked', true);
});

Retrieve nested id using repeated firstchilds in JavaScript

I am writing a web application that dynamically creates and names table elements, and I need to retrieve and parse a thoroughly nested id (not the value). The structure (and my latest attempt) are as such:
<table>
<tr onclick="alert(this.firstChild.firstChild.firstChild.id);">
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
It keeps returning 'undefined', which confirms my suspicion that I do not know JavaScript as well as I should. I am also using jQuery, so those solutions would work.
If you need the exact one:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr onclick="alert($(this).find('td:first-child').find('div:first-child').find('input:first-child').attr('id'));">
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
This being an inline JavaScript, it is better to use unobtrusive JavaScript by delegating the events and make your code and presentation split, so that it will be clear. A fiddle of unobtrusive JavaScript is below.
$(function () {
$("table").on("click", "tr", function () {
alert($(this).find('td:first-child').find('div:first-child').find('input:first-child').attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
You don't need to keep on adding code for each <tr>.

Where do you put the form element if you have editable rows of a table in AngularJS?

We have a table(A) and we want a specific row to become editable on click. Currently we have a directive that inserts a new table into the td of table(A) where it is called. We do this so we can use the <form> element around the table.
uneditable-table.html
<table>
<tbody>
<tr>
<td ng-show="editing" class="editing" colspan="2">
<div edit-form-directive
model="thing"
on-success="thingUpdated(thing); editing=false;"
on-cancel="editing=false; setUpdating(false);"
enabled="editing" />
</td>
</tr>
</tbody>
</table>
edit-template.html inserted via the editFormDirective
<form ng-submit="save(thingCopy)" name="EditForm">
<table>
<tbody>
<tr>
<td>
<input ng-model="thing.field1"/>
</td>
<td>
<input ng-model="thing.field2"/>
</td>
</tr>
</tbody>
<table>
</form>
Question:
We have tried putting the <form> element around each row to be editable, and this works, however, this is not semantically correct with the <form> around a <tr> within a table.
We also considered putting the <form> around the entire table in uneditable-table.html. This causes a form validation issue, where we may have many errors per non-unique form node, so we would have to index the nodes to get specific errors.
We settled on the code as it is here, with having the <form> element around a whole new table (in edit-template.html) and inserting that into a <td>, as this seemed the least harmful.
We do have to have the form tag so we can access validation based on the form name and nodes.
Is there a more Angular (or elegant) way to do this?
Thank you!
Angular way. Form tag isn't needed:
<table ng-form="EditForm">
...
</table>
http://docs.angularjs.org/api/ng.directive:ngForm

Categories