带有复选框高亮显示行的html和java脚本CRUD [英] html and java script CRUD with checkbox highlight row
本文介绍了带有复选框高亮显示行的html和java脚本CRUD的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好朋友，我需要您的帮助！
我正在用html Crud构建javascript，并在选中复选框时尝试突出显示该行。它只是第一列 - 标题！
PLZ帮助。
或者某人有什么东西 - 代码等于html和javascript ..
这里是我的代码：
< HTML >
< HEAD >
< TITLE > 在HTML表格中添加/删除动态行< / TITLE >
< link rel = 样式表 类型 = text / css href = style.css >
< SCRIPT language = javascript >
function addRow（tableID）{
var table = document.getElementById（tableID）;
var rowCount = table.rows.length;
var row = table.insertRow（rowCount）;
var colCount = table.rows [0] .cells.length;
for（var i = 0; i < colCount; i ++） {
< span class =code-attribute> var newcell = row.insertCell（一世）;
newcell.innerHTML = table.rows [0] .cells [I] .innerHTML;
// alert（ newcell.childNodes）;
switch（newcell.childNodes [0] .type） {
< span class =code-attribute> case checkbox：
< span class =code-attribute> newcell.childNodes [0] .checked = 假;
break;
< span class =code-attribute> case select-one：
< span class =code-attribute> < span class =code-attribute> newcell.childNodes [0] .selectedIndex < span class =code-attribute> = 0;
break;
< span class =code-attribute> }
}
< span class =code-attribute> }
function deleteRow（tableID） {
尝试 {
< span class =code-attribute> var table < span class =code-keyword> = document.getElementById（tableI d）;
var rowCount = table.rows.length;
for（var i = 0; i< rowCount; i ++ ） {
var row = table.rows [i];
var chkbox = row.cells [0] .childNodes [0];
if（null ！ = chkbox && true = = chkbox.checked） {
if（rowCount < ; = 1） {
< span class =code-attribute> alert（不能 delete 全部 rows。）;
break;
< span class =code-attribute> }
table.deleteRow（i）;
< span class =code-attribute>
< span class =code-attribute> < span class =code-attribute> rowCount - ;
< span class =code-attribute>
< span class =code-attribute> < span class =code-attribute> i - ;
< span class =code-attribute>
< span class =code-attribute> }
}
}
catch（e） {
< span class =code-attribute> alert（e）;
}
}
// when checkbox is checked.< /sp an>
function highlight(box, g)
{
var color1 = 'yellow';
var color2 = '';
document.getElementById(g).style.background = (box.checked ? color1 : color2);
}
</SCRIPT> $b $b
</HEAD>
<BODY>
<div>
<TABLE id=\"dataTable\">
<tr id=\"g\">
< TD><INPUT type=\"checkbox\" name=\"chk\" onClick=\"highlight(this,'g')\" /></TD>
<th< span class=\"code-attribute\"> id=\"fName\">First Name</th>
<th>Last Name</th>
</tr>
</TABLE>
<INPUT type=\"button\" value=\"Delete Checked People\" class=\"btnDelete\" onclick=\"deleteRow('dataTable')\" />
<INPUT type=\"button\" value=\"Add Person\" class=\"btnAdd\" onclick=\"addRow('dataTable')\" />
</div>
</BODY>
</HTML> 解决方案
The other rows which are dynamically generating on \"Add Person\" button click have no ID.
The rows are generating in this way.
<table id=\"dataTable\">
<tbody><tr id=\"g\">
<td><input type=\"checkbox\" name=\"chk\" onclick=\"highlight(this,'g')\"></td>
<th id=\"fName\">First Name</th>
<th>Last Name</th>
</tr>
<tr><td><input type=\"checkbox\" name=\"chk\" onclick=\"highlight(this,'g')\"></td><td>First Name</td><td>Last Name</td></tr><tr><td><input type=\"checkbox\" name=\"chk\" onclick=\"highlight(this,'g')\"> ;</td><td>First Name</td><td>Last Name</td></tr><tr><td><input type=\"checkbox\" name=\"chk\" onclick=\"highlight(this,'g')\"></td><td>First Name</td><td>Last Name</td></tr></tbody></table>
You can check that the page rendered in this way that No ID has been assigned to other table rows. Provide ID dynamically to rows when they are created. You can refer these links:
http://stackoverflow.com/questions/19625646/javascript-adding-an-id-attribute-to-another-created-element[^]
http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/[^]
Hi,
I have made few changes to your code. Introduced onclick event handler to the checkbox.
-------------------------------------------------------
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
<SCRIPT language=\"javascript\">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow（rowCount）;
var colCount = table.rows [ 0 ]。cells.length;
\t\t\tfor(var i=0; i < colCount; i++) {
\t\t\t\tvar newcell = row.insertCell(i), cellNode =null;
\t\t\t\tnewcell.innerHTML = table.rows[0].cells[i].innerHTML;
cellNode = newcell.childNodes [ 0 ];
\t\t\t\tswitch(cellNode.type) {
\t\t\t\t\tcase \"checkbox\":
\t\t\t\t\t\t\tcellNode.checked = false;
\t\t\t\t\t\t\tcellNode.id = \"checkBox_\"+i;
\t\t\t\t\t\t\tcellNode.onclick = function (node) {
\t\t\t\t\t\t\t\t\treturn function () {
\t\t\t\t\t\t\t\t\t\thighlight(node,row);
\t\t\t\t\t\t\t\t\t};
\t\t\t\t\t\t\t}(cellNode);
break;
case \"select-one\":
cellNode.selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert(\"Cannot delete all the rows.\");
break ;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
catch(e) {
alert(e);
}
}
\t// when checkbox is checked.
\tfunction highlight(checkBox,row)
\t{
\t\t var color1 = \"grey\", color2 =\"\";
\t\t row.style.backgroundColor = (checkBox.checked ? color1 : color2);
\t}
</SCRIPT>
</HEAD>
<BODY>
< div>
<TABLE id=\"dataTable\" cellspacing=\"0\" borderspacing='1' style='border: solid 1px black'>
< tr id = g>
< TD>< INPUT type = 复选框 name = chk id = ' checkBox_0' onclick = highlight（document.getElementById（'checkBox_0'），document。 getElementById（'g'）） /> < / TD >
< th id = fName>名字< / th > ;
< th>姓氏< / th >
< / tr>
</TABLE>
<INPUT type=\"button\" value=\"Delete Checked People\" class=\"btnDelete\" onclick=\"deleteRow('dataTable')\" />
< INPUT type = button value = 添加人员 class = btnAdd onclick = addRow（ 'dataTable'） />
</div>
</BODY>
</HTML>
Here is an easy fix, it should work:
//function highlight(box, g)
function highlight(box)
{
var color1 = 'yellow';
var color2 = '';
//document.getElementById(g).style.background = (box.checked ? color1 : color2);
\t box.parentNode.parentNode.style.background = (box.checked ? color1 : color2);
}
But take into consideration solution 1 comments, the reasoning behind why your code is not working.
hello friends, I need your help please!
I'm building javascript with html Crud,and trying to heighlight the row when check the checkbox. it colors just the first column- the Header !
plz help.
or maybe someone have something-code equals in html and javascript..
here is my code:
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
catch(e) {
alert(e);
}
}
// when checkbox is checked.
function highlight(box, g)
{
var color1 = 'yellow';
var color2 = '';
document.getElementById(g).style.background = (box.checked ? color1 : color2);
}
</SCRIPT>
</HEAD>
<BODY>
<div>
<TABLE id="dataTable">
<tr id="g">
<TD><INPUT type="checkbox" name="chk" onClick="highlight(this,'g')" /></TD>
<th id="fName">First Name</th>
<th>Last Name</th>
</tr>
</TABLE>
<INPUT type="button" value="Delete Checked People" class="btnDelete" onclick="deleteRow('dataTable')" />
<INPUT type="button" value="Add Person" class="btnAdd" onclick="addRow('dataTable')" />
</div>
</BODY>
</HTML> 解决方案
I have checked your code. Your code highlight the first row only because it gets the row with same ID='g'. And ID is always unique and can't be used more than once in same page.
The other rows which are dynamically generating on "Add Person" button click have no ID.
The rows are generating in this way.
<table id="dataTable"> <tbody><tr id="g"> <td><input type="checkbox" name="chk" onclick="highlight(this,'g')"></td> <th id="fName">First Name</th> <th>Last Name</th> </tr> <tr><td><input type="checkbox" name="chk" onclick="highlight(this,'g')"></td><td>First Name</td><td>Last Name</td></tr><tr><td><input type="checkbox" name="chk" onclick="highlight(this,'g')"></td><td>First Name</td><td>Last Name</td></tr><tr><td><input type="checkbox" name="chk" onclick="highlight(this,'g')"></td><td>First Name</td><td>Last Name</td></tr></tbody></table>
You can check that the page rendered in this way that No ID has been assigned to other table rows. Provide ID dynamically to rows when they are created. You can refer these links:
http://stackoverflow.com/questions/19625646/javascript-adding-an-id-attribute-to-another-created-element[^]
http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/[^]
Hi,
I have made few changes to your code. Introduced onclick event handler to the checkbox.
-------------------------------------------------------
<HTML> <HEAD> <TITLE> Add/Remove dynamic rows in HTML table </TITLE> <link rel="stylesheet" type="text/css" href="style.css"> <SCRIPT language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i < colCount; i++) { var newcell = row.insertCell(i), cellNode =null; newcell.innerHTML = table.rows[0].cells[i].innerHTML; cellNode = newcell.childNodes[0]; switch(cellNode.type) { case "checkbox": cellNode.checked = false; cellNode.id = "checkBox_"+i; cellNode.onclick = function (node) { return function () { highlight(node,row); }; }(cellNode); break; case "select-one": cellNode.selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } } catch(e) { alert(e); } } // when checkbox is checked. function highlight(checkBox,row) { var color1 = "grey", color2 =""; row.style.backgroundColor = (checkBox.checked ? color1 : color2); } </SCRIPT> </HEAD> <BODY> <div> <TABLE id="dataTable" cellspacing="0" borderspacing='1' style='border: solid 1px black'> <tr id="g"> <TD><INPUT type="checkbox" name="chk" id='checkBox_0' onclick="highlight(document.getElementById('checkBox_0'), document.getElementById('g'))" /></TD> <th id="fName">First Name</th> <th>Last Name</th> </tr> </TABLE> <INPUT type="button" value="Delete Checked People" class="btnDelete" onclick="deleteRow('dataTable')" /> <INPUT type="button" value="Add Person" class="btnAdd" onclick="addRow('dataTable')" /> </div> </BODY> </HTML>
Here is an easy fix, it should work:
//function highlight(box, g) function highlight(box) { var color1 = 'yellow'; var color2 = ''; //document.getElementById(g).style.background = (box.checked ? color1 : color2); box.parentNode.parentNode.style.background = (box.checked ? color1 : color2); }
But take into consideration solution 1 comments, the reasoning behind why your code is not working.
这篇关于带有复选框高亮显示行的html和java脚本CRUD的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
