I have a education management system. I want to apply a condition If select January then check February. Without selection January no body can select February.
If anyone select January, February, March. Then uncheck January. Automatically uncheck February and March.
Here is my html code. How can i applay in here jquery or javascript.
<table>
<tbody>
<tr>
<th>January</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall1" onclick="selectAll1(this,'color1')">
</td>
<td>7000</td>
</tr>
<tr>
<th>February</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall2" onclick="selectAll2(this,'color2')">
</td>
<td>800</td>
</tr>
<tr>
<th>March</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall3" onclick="selectAll3(this,'color3')">
</td>
<td>800</td>
</tr>
<tr>
<th>April</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall4" onclick="selectAll4(this,'color4')">
</td>
<td>800</td>
</tr>
<tr>
<th>May</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall5" onclick="selectAll5(this,'color5')">
</td>
<td>800</td>
</tr>
<tr>
<th>June</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall6" onclick="selectAll6(this,'color6')">
</td>
<td>800</td>
</tr>
<tr>
<th>July</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall7" onclick="selectAll7(this,'color7')">
</td>
<td>800</td>
</tr>
<tr>
<th>August</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall8" onclick="selectAll8(this,'color8')">
</td>
<td>800</td>
</tr>
<tr>
<th>September</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall9" onclick="selectAll9(this,'color9')">
</td>
<td>800</td>
</tr>
<tr>
<th>October</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall10" onclick="selectAll10(this,'color10')">
</td>
<td>800</td>
</tr>
<tr>
<th>November</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall11" onclick="selectAll11(this,'color11')">
</td>
<td>800</td>
</tr>
<tr>
<th>December</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall12" onclick="selectAll12(this,'color12')">
</td>
<td>800</td>
</tr>
<tr class="info">
<th>Grand Total</th>
<td></td>
<th>15800</th>
</tr>
</tbody>
</table>
Interesting challenge
This works as I understand the specs
const $months = $("[data-color]");
$months.on("click", function() {
const idx = $months.index(this)
if (this.checked && idx > 0) { // only check from Feb onwards
const checked = $("[data-color]:lt(" + idx + ")").map(function() { return this.checked }).get()
this.checked = checked.every(c => c); // only allow checking if previous are checked
} else $("[data-color]:gt(" + idx + ")").prop("checked", false)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>January</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall1" data-color="color1">
</td>
<td>7000</td>
</tr>
<tr>
<th>February</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall2" data-color="color2">
</td>
<td>800</td>
</tr>
<tr>
<th>March</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall3" data-color="color3">
</td>
<td>800</td>
</tr>
<tr>
<th>April</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall4" data-color="color4">
</td>
<td>800</td>
</tr>
<tr>
<th>May</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall5" data-color="color5">
</td>
<td>800</td>
</tr>
<tr>
<th>June</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall6" data-color="color6">
</td>
<td>800</td>
</tr>
<tr>
<th>July</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall7" data-color="color7">
</td>
<td>800</td>
</tr>
<tr>
<th>August</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall8" data-color="color8">
</td>
<td>800</td>
</tr>
<tr>
<th>September</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall9" data-color="color9">
</td>
<td>800</td>
</tr>
<tr>
<th>October</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall10" data-color="color10">
</td>
<td>800</td>
</tr>
<tr>
<th>November</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall11" data-color="color11">
</td>
<td>800</td>
</tr>
<tr>
<th>December</th>
<td style="text-align: center;">
<input type="checkbox" class="check" id="selectall12" data-color="color12">
</td>
<td>800</td>
</tr>
<tr class="info">
<th>Grand Total</th>
<td></td>
<th>15800</th>
</tr>
</tbody>
</table>
You can have a helper function to determine every time someone tries toggling the checkbox. Your set of condition would go there, if true, let them toggle, else don't.
You could generate an object with month name and number of months prior.
{ "JANUARY": 0, ..., "JULY": 6, ..., "DECEMBER": 11 }
This way you just have to track the count of rows before to decide whether the toggleRequest is allowed for a particular checkbox or not.
Related
I have a table with a checkbox in the table head which I want to use to check/uncheck all the checkboxes in my table. This is my code, but it doesn't work.
$(document).on('change', '#select_products_checkbox', function() {
$('.form-control').toggleClass('selected');
var selectAllProductsIsChecked = $('#select_products_checkbox').prop('checked');
$('.form-control .form-control').each(function(i, v) {
$(v).prop('checked', selectAllProductsIsChecked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
if you pass your event into the change function you can just use the currentTarget checked to set your checked prop on your other checkboxes:
$(document).on('change', '#select_products_checkbox', function(e) {
$('.form-control')
.toggleClass('selected', e.currentTarget.checked)
.prop('checked', e.currentTarget.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
To do what you require you can use the closest() and find() methods to find the checkboxes in the tbody of the table related to the 'All' checkbox. Then you can use prop() to set their checked state to match. Similarly you can provide a boolean to toggleClass() to add or remove the class based on whether or not the 'All' was checked.
$(document).on('change', '#select_products_checkbox', function() {
$(this).closest('table').find('tbody :checkbox')
.prop('checked', this.checked)
.toggleClass('selected', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t} - SELECT ALL</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
I have a survey on a website (WordPress, zenith template) and I have a problem submitting the form. I get an error saying "Uncaught Reference Error". Can someone help me fix this problem?
Screenshot from the moment y click SEND button
The survey address is here
<?php
/*
Template Name: Cuestionario OQ ingles
*/
get_header();
global $PAGE_ID;
$options = get_option('infinite_options');
?>
<?php while ( have_posts() ) : the_post();
$featured_image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'single-post-thumbnail' );
$featured_image = $featured_image_array[0];
$sidebar = get_post_meta(get_the_ID(), SYSTEM_VAR_PREFIX."select_sidebar", true);
if ($sidebar)
{
?>
<div id="inner-content">
<?php
}
else
{
?>
<div class="one">
<?php
}
if ($featured_image != "")
{
?>
<p><img src="<?php echo $featured_image; ?>" alt=""></p>
<?php
}
the_content();
?>
<!--Inicio todo el documento-->
<div id="contenedor">
<!--Inicio del Contenido-->
<div id="contenido">
<table border="0" align="center" cellpadding="0" cellspacing="0" id="textocontenido">
<tr>
<td > </td>
</tr>
<tr>
<td >
<center>
<?php
if (!$HTTP_POST_VARS){ }
?>
<form action="<?php bloginfo('template_url'); ?>/procesa_oq_ingles.php" method=post>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="7" colspan="6" align="center" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td colspan="6" align="center"> </td>
</tr>
<tr>
<td height="14" colspan="6" align="center">Outcomes Questionnaire (OQ-45.2)</td>
</tr>
<tr>
<td height="7" colspan="6"><hr /></td>
</tr>
<tr>
<td> </td>
<td colspan="4"> </td>
<td> </td>
</tr>
<tr>
<td align="right">Name:</td>
<td colspan="4"><label>
<input type="text" name="nombre" id="textfield">
</label></td>
<td> </td>
</tr>
<tr>
<td align="right">Age:</td>
<td colspan="4"><input type="text" name="edad" id="textfield2"></td>
<td> </td>
</tr>
<tr>
<td align="right">E-Mail:</td>
<td colspan="4"><input type="text" name="correo" id="textfield3"></td>
<td> </td>
</tr>
<tr>
<td align="right"> </td>
<td colspan="4"> </td>
<td> </td>
</tr>
<tr>
<td colspan="6">Instructions: Looking back over the last week, including today, help us understand how you have been feeling.</td>
</tr>
<tr>
<td align="right"> </td>
<td colspan="4"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="131" height="23" align="center">Never</td>
<td width="87" align="center">Rarely</td>
<td width="86" align="center">Sometimes</td>
<td width="97" align="center">Frequently</td>
<td width="121" align="center">Almost Always</td>
</tr>
<!-- FIRST QUESTION -->
<tr>
<td width="382">1. I get along well with others.</td>
<td colspan="5" align="center"><table width="430" height="25" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup1" value="4" id="RadioGroup1_0" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup1" value="3" id="RadioGroup1_1" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup1" value="2" id="RadioGroup1_2" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup1" value="1" id="RadioGroup1_3" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup1" value="0" id="RadioGroup1_4" />
</label></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="6"><hr /></td>
</tr>
<!-- LAST QUESTION -->
<tr>
<td height="12" valign="top" class="Estilo4">45. I have headaches.</td>
<td colspan="5" align="center"><table width="430" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup45" value="0" id="RadioGroup45_0" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup45" value="1" id="RadioGroup45_1" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup45" value="2" id="RadioGroup45_2" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup45" value="3" id="RadioGroup45_3" />
</label></td>
<td width="86" align="center"><label>
<input type="radio" name="RadioGroup45" value="4" id="RadioGroup45_4" />
</label></td>
</tr>
</table></td>
</tr>
<tr>
<td height="2" colspan="6" valign="top" class="Estilo4"><hr /></td>
</tr>
<tr>
<td colspan="6" valign="top" class="Estilo4"> </td>
</tr>
<tr>
<td colspan="6" align="center"><input type=submit value="Send" onClick="ValidaMail(correo)"></td>
</tr>
<tr>
<td colspan="6" align="center"> </td>
</tr>
</table>
</form>
</center> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<!--Fin del Contenido-->
</div>
<!--Fin todo el documento-->
</div><!--END ONE-->
<?php
if (get_post_meta(get_the_ID(), SYSTEM_VAR_PREFIX."add_class_title", true) != "no")
{
?>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".one :header, #inner-content :header").addClass("title");
$(".team-member-info :header, .no_title").removeClass("title");
$(".pricing-info :header, .no_title").removeClass("title");
})
</script>
<?php
}
if ($sidebar) get_sidebar();
?>
<?php endwhile; // end of the loop. ?>
<?php get_footer(); ?>
So this is my code. It is supposed to go to procesa_oq_ingles.php but this doesn´t happen due the error appearing in the console.
I tried clearing the onclick event, but there was no change after that. Maybe someone has an idea what I can do to correct this?
Thanks...
I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a
2 5 b
3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<table style="display : inline;width : 100%;"></table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[1]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[1]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your "main" container <td>s. After that the whole thing fell into place fairly easily:
to prevent the actual TSV text from being pasted directly into the first input field I used e.preventDefault()
I then used .split() twice on the TSV string to turn it into the 2D array vals
I identified the .closest() td.contTD element (--> td) and its column and row numbers (col and row) by finding the .index() of td and its parent row.
starting form the .closest('tbody')I then worked my way down again through the .slice()of rows starting with row and its (sliced) child input elements starting at column col.
in an .each() loop I then assigned the value of the vals-array to the input element, but only if val[i][j] exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /\s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<label>sample data for copying and pasting via clipboard:</label>
<table>
<tr><td>1</td><td>4</td><td>a</td></tr>
<tr><td>2</td><td>5</td><td>b</td></tr>
<tr><td>3</td><td>6</td><td>c</td></tr>
</table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[1]">
<table>
<tbody>
<tr id="tr_validation_options[1]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[1]">
<table>
<tbody>
<tr id="tr_validation_display[1]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[1]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
I want to place the check boxes and the tables next to each other with a proper alignment. I can seem to put the three check boxes that I've created beside each other in the same row but I am unable to align them all properly and neatly. I find some difficulties in formatting them by using Notepad++ as my developing tool.
Need help on this one.
Here is the CSS and HTML codes. Under this HTML section, the check boxes consist of respective table created in them. I have separated all the codes with the comment 'Scenario 1,2,3 and Main'.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output<br>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>
I put the corrected input in an answer to show how it should look like. The comment is not the right place for html snippets. But this answer did still not resolve the view problem.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed</td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed</td>
</tr>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output</td>
</tr>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>
How to find the td elements in a table which do not have checkboxes with the class name as chkCheckBox1
Created this fiddle
I've tried to use .filter and find the td but that didn't worked.
$("#LstDocTemp").filter("td:not(.chkCheckBox1)")
Any help would be appreciated
You can use :not() and :has() like this DEMO
$("td:not(:has(input.chkCheckBox1:checkbox))")
This also works. Single selector up front to get the input itself, then the containing TD.
$(function(){
var mySelection = $("#LstDocTemp td input:not(.chkCheckBox1)").parent();
console.log(mySelection)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="LstDocTemp" border="0" cellpadding="0" cellspacing="0" class="instruction_grid">
<tr>
<th align="left" class="ins_sl_no">
Sl No.
</th>
<th align="left" class="selct_column">
<input type="checkbox" id="chkSelectAll" name="chkSelectAll" />
</th>
<th align="left" class="doc_title_1">
Document title
</th>
<th align="left" class="description">
Description
</th>
<th align="center" class="revision">
Revision
</th>
<th align="left" class="part_no">
Parts name
</th>
<th align="center" class="issue_no">
Issue
</th>
<th align="center">
Link
</th>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox" id="chkbox_" />
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox1" id="chkbox_" />
</td>
<td>
Test
</td>
<td class="dark_highlight">
</td>
<td>
</td>
<td class="light_highlight">
</td>
<td>
<a class="icon_add" title="Add">Add</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox" id="Checkbox1" />
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox1" id="Checkbox1" />
</td>
<td>
Test
</td>
<td class="dark_highlight">
</td>
<td>
</td>
<td class="light_highlight">
</td>
<td>
<a class="icon_add" title="Add">Add</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox" id="Checkbox2" />
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox1" id="Checkbox2" />
</td>
<td>
Test
</td>
<td class="dark_highlight">
</td>
<td>
</td>
<td class="light_highlight">
</td>
<td>
<a class="icon_add" title="Add">Add</a>
</td>
</tr>
</table>