|
HTML - Deleting Rows By Row Id
Can any body tell me how to delete rows by row id (rows are added/deleted inbetween rows dynamically so I cannt use the index property)
Similar TutorialsHello, I am needing help finding out how to remove a link in my HTML slideshow code. I made the slideshow for this website using slide.com and want to remove the link behind it that directs you to their site! The slideshow is fine but when you click on it, it directs you to "Their Site", I don't want that. I was wondering if the code was embedded, please help! Here is the code: <p style='visibility:visible;'><object type='application/x-shockwave-flash' data='http://widget-a3.slide.com/widgets/slideticker.swf' height='200' width='250' style='width:250px;height:200px'><param name='movie' value='http://widget-a3.slide.com/widgets/slideticker.swf' /><param name='quality' value='high' /><param name='scale' value='noscale' /><param name='salign' value='l' /><param name='wmode' value='transparent'/> <param name='flashvars' value='cy=ms&il=1&channel=2666130979436416163&site=widget-a3.slide.com'/></object><p style='white-space:nowrap'><a href Hey. I'm in need of a program that will go through hundreds of HTML files and delete/edit certain strings of text from the source code. For example: <tr> <td class="thread">Search Forums</td> </tr> <tr> Lets say that that is in the source code of every HTML file I have and I want to replace "Search Forums" with "Search Threads" in every single page without having to manually go through them all. Are there programs that will save me the trouble? Thanks in advance, ~Okin Hello, I have a table (with one cell). The table can be quite big (200 items) so I would like the user to be able to scroll it up and down... and I want the user to be able to add and delete an item. I have done something with javascript but it is not complete.. the delete does not work correctly ... the scroll up and down shown the same table. I don't have a clue on how to do the add button. Could you help me please? Here is what I have done so far.... Code: <html>
<head>
<title>Insert/Delete Table Row using DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/ccs">
<!--
form {border:1px solid blue;}
div {border:1px solid red; width:150px; overflow:auto;}
.selectBox { font-size:xx-small;overflow:auto;}
#tblSample td,th {padding:0.5em;}
.classy0 { background-color: #234567; color:#89abcd;}
.classy1 {background-color: #89abcd; color:@234567;}
-->
</style>
<%@ include file="javascriptLib.html" %>
<script language="JavaScript" type="text/JavaScript">
<!--- oculta el script para navegadores antiguos
var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script
var TABLE_NAME = 'items_list'; // this should be named in the HTML
var LABEL_NAME = 'label_list';
var ROW_BASE = 1; // first number (for display)
var MAXLENGTH=5;
function myRowObject(one,two)
{
this.one = one; // text object
this.two = two; // input text object
}
function deleteCurrentRow(obj)
{
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode.parentNode;
var rIndex = delRow.sectionRowIndex;
var rowArray = new Array(delRow);
deleteRows(rowArray);
reorderRows(tbl, rIndex);
}
function deleteRows(rowObjArray)
{
for (var i=0; i<rowObjArray.length; i++)
{
var rIndex = rowObjArray[i].sectionRowIndex;
rowObjArray[i].parentNode.deleteRow(rIndex);
}
}
function reorderRows(tbl, startingIndex)
{
if (tbl.tBodies[0].rows[startingIndex])
{
var count = startingIndex + ROW_BASE;
for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++)
{
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.one.data = count; // text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count;
var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' ');
tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);
count++;
}
}
}
function clearTable(option)
{
var tbl = document.getElementById(TABLE_NAME);
if (option != 0)
tbl= document.getElementById(LABEL_NAME);
//var lastRow = tbl.tBodies[0].rows.length;
var lastRow = tbl.rows.length;
var i=lastRow-1;
while (i>=0)
{
tbl.deleteRow(i);
i--;
}
}
function showRow (val)
{
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
//var nextRow=tbl.rows.length;
var iteration = nextRow + ROW_BASE;
var row = tbl.tBodies[0].insertRow(nextRow);
row.className = 'classy' + (iteration % 2);
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.setAttribute('type', 'text');
txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('size', '77');
txtInp.setAttribute('value', val);
txtInp.readOnly = true;
cell1.appendChild(txtInp);
}
function addRowToTable(val,num)
{
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
var iteration = nextRow + ROW_BASE;
if (num == null) // appends to the end of the table
{
num = nextRow;
}
else // Insert at row num
{
iteration = num + ROW_BASE;
}
// add the row
var row = tbl.tBodies[0].insertRow(num);
// CONFIG: requires classes named classy0 and classy1
row.className = 'classy' + (iteration % 2);
// CONFIG: This whole section can be configured
// cell 0 - index
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
// cell 1 - input text
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.setAttribute('type', 'text');
txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('size', '62');
txtInp.setAttribute('value', val); // iteration included for debug purposes
txtInp.readOnly = true;
cell1.appendChild(txtInp);
// cell 2 - delete button
//-----------------------
var cell2 = row.insertCell(2);
var btnEl = document.createElement('input');
btnEl.setAttribute('type', 'button');
btnEl.setAttribute('value', 'Delete');
btnEl.onclick = function () {deleteCurrentRow(this)};
cell2.appendChild(btnEl);
// Store the myRow object in each row
row.myRow = new myRowObject(textNode,txtInp);
}
function paintTable(index)
{
var maxLine=index+MAXLENGTH;
clearTable(0);
// add Row with delete and insert options
//----------------------------------------
services=document.forms[0].items.value;
if ((services != null) && (services != ""))
{
var services_array=services.split("|");
sLength=services_array.length ;
if (services_array.length < maxLine)
maxLine=sLength;
// add Row with delete options
//-----------------------------
for (var i=index; i < maxLine; i++)
{
val=services_array[i];
//showRow(1,val);
addRowToTable(val);
}
showLabel(index,sLength);
}
}
function showLabel(index,max)
{
clearTable(1);
next_val=index+MAXLENGTH;
prev_val=index-MAXLENGTH;
var tbl = document.getElementById(LABEL_NAME);
var nextRow = tbl.tBodies[0].rows.length;
// add Previous and/or Next buttons
//---------------------------------
var row = tbl.tBodies[0].insertRow(nextRow);
var celNo=0;
if (index !=0)
{
var cell0 = row.insertCell(celNo);
var btnEl0 = document.createElement('input');
btnEl0.setAttribute('type', 'button');
btnEl0.setAttribute('value', 'Previous');
btnEl0.onclick = function () {paintTable(prev_val)};
cell0.appendChild(btnEl0);
celNo++;
}
if (next_val <= max)
{
var cell1 = row.insertCell(celNo);
var btnEl1 = document.createElement('input');
btnEl1.setAttribute('type', 'button');
btnEl1.setAttribute('value', 'Next');
btnEl1.onclick = function () {paintTable(next_val)};
cell1.appendChild(btnEl1);
}
}
// end hiding from old browsers -->
</script>
</script>
</head>
<body onLoad=paintTable(0)>
<form onSubmit="return false" method="post" name="my_form" action="">
<table border= "2" cellspacing="0" id="items_list" >
<tbody></tbody>
<input type=hidden name="items" value="1|2|3|4|5|6|7|8|9|10|11">
</table>
<P><P><table border="1" id="label_list">
<tbody></tbody>
</form>
</body>
</html>
Please, help me! Thanks I finally figured out how to add text to my index and now I have another question. In my website template There is Heading 1 and a Heading 2 so my question is how do I delete any sections or headings that I don't need to make it go away on my home page. There is so much and I don't think I need all of it..... Thanks in advance Is there a way that anyone knows of to put list items side by side in a row? I'm currently working with some html/css/jquery that allows you to move li elements around and order them. However, instead of being on a new line for each element, I'd like to put several side by side in a row. Is there any way with html/css to make this happen, or is there no way to change the "nature" of li elements? Hey can someone help me and tell me how i can make like a paragraph in boxes that are side by side with borders please. Thank you. Hi there, I'm having a problem with spacing between rows n an html tabel. First let me stress that I am no expert and just know basics to get me by. I have been using this amazing bespoke platform for events websites and adding little bits of html in. The site in question is http://www.ffrp2.fatsoma.com/home.php. I'm sure that I am probably doing this the hard way but im a designer not a coder. My brother built the site builder but he's away skiing so cant ask him and a client wants his site down asap... Here's the code I have used <table width=960px border="0" cellspacing="0" cellpadding="0"> <tr height=332px><td width=960px> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_55.jpg"/></a> </td> </tr> <tr><td> <table width=960px border="0" cellspacing="0" cellpadding="0"> <tr height=447px> <td width=232px> <table border="0" cellspacing="0" cellpadding="0"> <tr height=232px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_56.jpg"/></a> </td></tr> <tr height=101px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_57.jpg"/></a> </td></tr> <tr height=90px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_58.jpg"/></a> </td></tr> </table> </td> <td width=218px> <table border="0" cellspacing="0" cellpadding="0"> <tr height=175px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_59.jpg"/></a> </td></tr> <tr height=101px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_60.jpg"/></a> </td></tr> <tr height=171px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_67.jpg"/></a> </td></tr> </table> </td> <td width=237px> <table border="0" cellspacing="0" cellpadding="0"> <tr height=90px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_62.jpg"/></a> </td></tr> <tr height=101px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_68.jpg"/></a> </td></tr> <tr height=85px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_64.jpg"/></a> </td></tr> <tr height=171px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_65.jpg"/></a> </td></tr> </table> </td> </tr> </table> </td> </tr> </table> many thansk in advance for any help offerd Mark Can anyone tell me why there is a space at the bottom of my page between the images in the middle and the bottom image? The page looks fine in Firefox and I cannot figure out why there is a space in IE7. Any suggestions would be greatly appreciated. Thanks Frank http://www.spartafitness.com/home.htm Hello, Can someone help me with this here. I want to make 3 tables with links to other sites on there. I want them to count down from 1 - 5 then 6 - 10 and 11 - 15. In the picture I want to have one big bar running across saying BEST LINKS and under it the website links. What I need is the code to divide/split the links. Code: <tr> <td width='100%' colspan='4' style='border: 1px solid #CCCCCC'> <table cellpadding='0' cellspacing='4' width='100%'><tr> <td width='25%' valign='top'> <?php include "topratedmenu.php"; ?> </td> <td width='25%' valign='top'> <?php include "mostpopularmenu.php"; ?> </td> <td width='25%' valign='top'> <?php include "topplayersmenu.php"; ?> </td> </tr></table> </td> </tr> <tr> <td width='25%' colspan='1'> </td> <td width='25%' colspan='1'> </td> <td width='25%' colspan='1'> </td> <td width='25%' colspan='1'> </td> </tr> How can you make a border appear between rows in a table but not between the columns? Hence you won't notice that there's actally any columns in the table since it's not squared, only the rows are marked, but the columns still are there to prevent the cells from ending up at different horizontal positions at the different rows. Afternoon everyone, I have a table with many rows and a checkbox in the first cell of each row. I want the user to be able to click anywhere on the row and activate the checkbox, so I'm using a label tag in front of each row. The following code works in IE7, but not Firefox or Chrome. Any ideas how to make it work cross-browser? Code: <table>
<label for="X">
<tr>
<td>
<input type="checkbox" id="X"/>
</td>
<td>
THIS TEXT SHOULD ACTIVATE THE LEFT CHECKBOX
</td>
</tr>
</label>
</table>
Thanks! I am working on an application within a website. Most of the HTML for the entire site, I did not create myself, just some HTML and CSS for a specific application. Even in that application, I imported some of the text (which contains HTML tags) from a previous application. So, I only did a small portion of the HTML/CSS. My problem is that when users print out this page in IE6, some of the rows of the main table are missing from the printout. For example, this page: http://www.northcarolina.edu/pe_test/sample_pe.php Does any one have any knowledge of a bug that would cause IE6 not to print some rows? Does any one see any reasons why some rows in the tables (the ones with class='workplan') would skip rows when printing? Thank You. Hi there, I'm a bit of a noob to HTML, and I'm working on creating a site for my webcomic. The main portion of the layout has a simple table with a header and footer at the top and bottom rows. It's supposed to look like Instead it looks like The code for the table is this: Quote: <table align="center" cellpadding="0" cellspacing="0" border="0" width="725"> <tr> <td width="725" valign="bottom" border="0"> <img src="/images/header.png" width="725" height="33" /></td> </tr> <tr> <td width="725" bgcolor="0099CC" align="center"> <p>***todays_comics***<p>***first_day*** ***previous_day*** ***next_day*** ***last_day*** </td> <tr> <td width="725" valign="top" border="0"> <img src="/images/footer.png" width="725" height="33" /></td> </tr> </table> Whenever I put the code into an HTML test bed, it works fine, but for some reason refuses to work when I upload it to my FTP. It's driving me crazy. If you could help, I'd really appreciate it. Thanks. I am working on a layout for a website, I'm not new at all to HTML, it's just been a while. I have a banner taking up the first row of the table(colspan=2), and for the 2nd row, I have a menu and a text region. This 2nd row always has a small space between it and the 1st, even if cellspacing=0. Is there any way to do this with a simple <table>??? Someone told me that using a table would be less effective than using <div>, is this true? If so, how would I do this using <div>. Thank you for any suggestions. I can't figure out how to get IE to position this page at the top. This has consistently worked perfectly in FireFox, no matter what changes I try. It has consistently NOT worked in IE, it starts each page 180 px from the bottom of the header. And please don't rag on me for using tables. This is custom coding for a Perl system we are using. The programs generate tables and rows, and I have to fit my code into the generated pages. Here's the code that's currently running. I know there are duplicates in here, I kept adding things hoping something would wake IE up. It's interesting that with all this redundancy, FireFox has no problems at all. And both the HTML and the CSS validate. The first table is actually in the header, and closed in the footer, so it has to be there. ============================================= <table class="ac_mainbody" cellpadding=0 cellspacing=0 style="position: absolute; left: 260px; width: 550px; top: 180px;"><tr><td> <table width="85%" align="left" border="0" cellpadding="0"> <tr><td class="top_of_page" colspan="4" valign="top" style="vertical-align: top;"> <h5><font face=Georgia color="#990066" size="2"> Offering quality products that bring safety and comfort into your life. We seek out unique equipment and supplies designed to improve the quality of life for those with disabilities and those who assist them.</font></h5></td></tr> <tr><td style="text-align: center;" colspan="4"> ============================================= Everything after this point is lined up correctly in both browsers. It's the starting position that I can't get IE to recognize. I started with just CSS, here's the code: h5.top_of_page {font-size: 12pt; color: #990066; margin: 0px 0px 0px 0px; padding-right: 60px; font-weight: bold; text-align: left; vertical-align: top;} IE ignored everything, including the font color. That's when I started adding names and parameters one at a time, including valign and the font stuff. I also tried <p> and <div> instead of the second table. Same problem. I tried position=”relative” --- everything clumped together at the left, 180px too low on FireFox and 360px too low on IE I tried position=”fixed” --- everything clumped together at the left, and still low on IE Hi All, Am a bit of a newbie here. I'm having a little problem with a table that I created on Wordpress. After creating the table, the image below shows how it looks like on the Wordpress editor: But, once published, the row alignment is a bit off. Here's the url: http://runfest.my/?page_id=346 Appreciate some advice on what went wrong and how I can fix it. Thanks a bunch! Hi. First time posting here, I hope this is a good place to get some quick help as I've hit a problem I can't figure out myself. I'm having problems with a site I'm working on: http://megansmetalworks.com/home.html My problem is this: the row I've created at the top of the page is far thicker in Firefox than in Safari (where it shows up exactly the height I wanted) In FireFox it is HUGE! how do I fix this? I must have made a mistake The code in question is as follows: <frameset rows="70, 20% framespacing="0" frameborder="0"> In safari it appears to show up correctly, 70 pixels tall. But in FireFox it is much larger and takes up the top half of the screen. Can anyone explain why this is? I need the navigation bar at the top to show up at the same height in all browsers. Thanks in advance. Ok, I am creating a calculator with html and javascript. I am using a table to format the buttons and text displays. The code is posted below with the table itself. It is supposed to be 3 cells height and 1 cell width but it turns out as 2 cells width and 2 cells height. I can't figure out the error in my code so can someone please figure out what is wrong with my tags: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type=text/css>
input
{
background-color: black;
color: white;
}
th
{
background-color: black;
color: white;
}
td
{
background-color: green;
}
</style>
<script type="text/javascript">
var a;
var b;
var c;
var d;
var e;
function inputtext(inputtext)
{
a=document.getElementById("inputcalculation").value;
b=inputtext;
c=a+b;
document.getElementById("inputcalculation").value=c;
}
function Evaluate()
{
d=document.getElementById("inputcalculation").value;
e=eval(d);
document.getElementById("outputcalculation").value=e;
document.getElementById("inputcalculation").value="";
}
</script>
<title>Help-In-Math Calculator</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="11" style="background-color: black">
<center>
<input type="text" id="inputcalculation" value="" />
</center>
</th>
</tr>
<tr>
<td colspan="11" rowspan="5">
<center>
<input type="button" value="1" onclick="inputtext('1')" /> <input type="button" value="2" onclick="inputtext('2')" /> <input type="button" value="3" onclick="inputtext('3')" /> <input type="button" value="+" onclick="inputtext('+')" />
<br />
<input type="button" value="4" onclick="inputtext('4')" /> <input type="button" value="5" onclick="inputtext('5')" /> <input type="button" value="6" onclick="inputtext('6')" /> <input type="button" value="-" onclick="inputtext('-')" />
<br />
<input type="button" value="7" onclick="inputtext('7')" /> <input type="button" value="8" onclick="inputtext('8')" /> <input type="button" value="9" onclick="inputtext('9')" /> <input type="button" value="X" onclick="inputtext('*')" />
<br />
<input type="button" value="0" onclick="inputtext('0')" /> <input type="button" value="." onclick="inputtext('.')" /> <input type="button" value="00" onclick="inputtext('00')" /> <input type="button" value=÷ onclick="inputtext('/')" />
<br />
<input type="button" value="EVALUATE" onclick="Evaluate()" style="background-color: blue"/>
</center>
</td>
</tr>
<tr>
<td colspan=11>
<input type="text" id="outputcalculation" onfocus="blur()" />
</td>
</tr>
</table>
</body>
</html>
Hello everyone! Thank you for taking the time to read this. Could anyone please look at my site in IE or FF and tell me how to remove the gap between the table row that has the links at the top and the row that starts the content? The address is http://www.hard2kill.org. I figure it would be less cluttered by leaving the code off of this post and just accessing the page source from the site; however, if you would like me to post it here, I certainly can! When I view it in Chrome, it looks just fine. IE and FF show the gap. Yes, I know using tables this way is bad designing, but I am continually learning more and trying to transition from them, so please leave personal opinions to yourself. If a fix can be made, then I would appreciate your input! I have all the cellspacing, cellpadding, and borders set to 0 so I am at a loss. Thanks in advance! Hi. I'm working on a fairly complicated web form and need to align input boxes horizontally across a lefthand column, a multi-row nested table, and a righthand column. This works OK (as long as cellpad and cellspace are set to 0) except that at one point I need to put text in the right-hand column instead of an input box, and this throws the alignment out. The simplified code below shows what I mean. As given below the boxes are aligned properly. But if you comment out the version A row and substitute the version B row, the alignment goes. Can anyone explain why this happens, and whether there's a way round it ? The form in question does have to be a table, by the way. Would be grateful for any suggestions ! Thanks Dedge <form> <table width='100%' cellspacing='0' cellpadding='0' border='0'> <tr> <td>Item name</td> <td rowspan='5'> <table cellspacing='0' cellpadding='0' border='0'> <tr> <td><input name='i1' id='i1' size='1' maxlength='1'></td> <td><input name='i2' id='i2' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i3' id='i3' size='1' maxlength='1'></td> <td><input name='i4' id='i4' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i5' id='i5' size='1' maxlength='1'></td> <td><input name='i6' id='i6' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> </table> </td> <td>Item name</td> <td><input name='ia' id='ia' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ib' id='ib' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--VERSION A--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--END OF VERSION A--> <!--VERSION B--> <!--<tr> <td>Item name</td> <td colspan='2' align='right'>SOME TEXT</td> </tr>--> <!--END OF VERSION B--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ie' id='ie' size='1' maxlength='1'></td> </tr> </table> </form> |
|||||||