<script type="text/javascript">
var i = 0;
function addRow(){
var tabEle = document.getElementById("tab_1");
var addTr = tabEle.insertRow();
addTr.setAttribute("id", "tr_"+i);
var td_1 = addTr.insertCell();
td_1.setAttribute("id", "td_"+i+"_1");
var td_2 = addTr.insertCell();
td_2.setAttribute("id", "td_"+i+"_2");
var td_3 = addTr.insertCell();
td_3.setAttribute("id", "td_"+i+"_3");
var td_4 = addTr.insertCell();
td_4.setAttribute("id", "td_"+i+"_4");
var td_5 = addTr.insertCell();
td_5.setAttribute("id", "td_"+i+"_5");
td_1.innerHTML="<input type='text' id='txt_"+i+"_1' width='120px'> ";
td_2.innerHTML="<input type='text' id='txt_"+i+"_2' size='6'> ";
td_3.innerHTML="<input type='text' id='txt_"+i+"_3' size='6'> ";
td_4.innerHTML="<div style='width:120px;'><input type='radio' name='rad_"+i+"_4' checked value='↑'>↑<input type='radio' name='rad_"+i+"_4' value='↓'>↓<input type='radio' name='rad_"+i+"_4' value='-'>- </div> ";
td_5.innerHTML="<div style='width:60px;'><button onclick='deleteRow("+i+");'>删除</button></div>";
i++;
}
function deleteRow(index){
var tabEle = document.getElementById("tab_1");
var currentRow = document.getElementById("tr_"+index);
tabEle.deleteRow(currentRow.rowIndex);
}
function createHtm(){
var testEle = document.getElementById("div_new");
var htmlValue = document.getElementById("div_1").innerHTML;
htmlValue = htmlValue.replace("tab_1", "tab_new");
htmlValue = htmlValue.replaceAll("tr_", "tr_new_");
htmlValue = htmlValue.replaceAll("td_", "td_new_");
htmlValue = htmlValue.replaceAll("txt_", "txt_new_");
htmlValue = htmlValue.replaceAll("rad_", "rad_new_");
testEle.innerHTML=htmlValue;
updateHtmValue();
var NewDivEle = document.getElementById("div_new");
document.getElementById("txt_htmlValue").value = NewDivEle.innerHTML;
document.getElementById("htmlIndex").value = getGeneralIndex();
//alert(document.all.xlpmForm.innerHTML);
document.all.xlpmForm.submit();
}
function updateHtmValue(){
var tabNewEle = document.getElementById("tab_new");
var trNodes = tabNewEle.childNodes[0].childNodes;
for(var k = 0; k < trNodes.length; k++){
//var trId = trNodes[k].getAttribute("id");
if(trNodes[k] && trNodes[k].childNodes.length >= 4){
trNodes[k].deleteCell(4);
}
}
var itemValue = "";
var itemTrEle = null;
var itemTxtEle = null;
var itemParentEle = null;
for(var k = 0; k <= i; k++){
for(var j = 1; j < 5; j++){
itemParentEle = document.getElementById("td_new_"+k+"_"+j);
if(!itemParentEle){
continue;
}
if(j == 4){
itemTxtEle = document.getElementsByName("rad_new_"+k+"_"+j);
for(var n = 0; n < itemTxtEle.length; n++){
if(itemTxtEle[n].checked){
itemValue = itemTxtEle[n].value;
break;
}
}
if(itemValue == "↑"){
itemParentEle.innerHTML = "<FONT color=#00ff00><B>"+itemValue+"</B></FONT>";
}else if(itemValue == "↓"){
itemParentEle.innerHTML = "<FONT color=#ff0000><B>"+itemValue+"</B></FONT>";
}else if(itemValue == "-"){
itemParentEle.innerHTML = "<FONT color=#000000><B>"+itemValue+"</B></FONT>";
}else{
itemParentEle.innerHTML = "<B>"+itemValue+"</B>";
}
}else{
itemTxtEle = document.getElementById("txt_new_"+k+"_"+j);
if(itemTxtEle){
itemParentEle.innerHTML = itemTxtEle.value;
}
}
}
}
}
function getGeneralIndex(){
var indexValue = "1";
var indexEle = document.getElementsByName("theIndex");
for(var n = 0; n < indexEle.length; n++){
if(indexEle[n].checked){
indexValue = indexEle[n].value;
break;
}
}
return indexValue;
}
String.prototype.replaceAll= function(s1, s2){
return this.replace(new RegExp(s1, "gm"), s2);
}
</script>
</head>
<body scroll = "no" style="background-color:#EAEFF8; margin:0 0 0 0;">
<form id="xlpmForm" name="xlpmForm" method="post" action="xlpmCreate.jsp">
<input id="userName" name="userName" type="hidden" value="<%=userName %>"/>
<input id="userPwd" name="userPwd" type="hidden" value="<%=userPwd %>"/>
<input id="txt_htmlValue" name="txt_htmlValue" type="hidden" />
<input id="htmlIndex" name="htmlIndex" type="hidden" />
</form>
<br />
<table width="350px">
<tr>
<td width="150px">
<input type="radio" name="theIndex" checked="checked" value="1" />序列一
<input type="radio" name="theIndex" value="2" />序列二
</td>
<td >
<button onclick="addRow();">增加新行</button>
<button onclick="createHtm();">生成htm</button>
</td>
</tr>
</table>
<div id="div_1">
<TABLE id="tab_1" cellSpacing=1 cellPadding=0 width=315 border=0>
<TR id="tr_head">
<TD bgColor=#e3e3e3 height=16><STRONG>单位</STRONG></TD>
<TD bgColor=#e3e3e3><STRONG>分数</STRONG></TD>
<TD bgColor=#e3e3e3><STRONG>名次</STRONG></TD>
<TD bgColor=#e3e3e3><STRONG>异动</STRONG></TD>
<TD bgColor=#e3e3e3 width="150px"><STRONG>操作</STRONG></TD>
<TR>
</table>
</div>
<div id="div_new" style="visibility:hidden"> </div>
</body>
相关推荐
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含，其中包含`<tr>`（表格行）元素，每行内可以有多个`<td>`（表格数据单元格）或`...
博客"JavaScript动态添加删除表格行"很可能会深入讨论这些技术，并提供实际的代码示例，帮助读者理解和应用这些概念。通过阅读和学习，开发者可以掌握如何在实际项目中实现动态操作HTML表格的功能。
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
在JavaScript中，动态添加和删除表格是常见的网页交互功能，主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例，展示了如何利用JavaScript实现这个功能。在讲解之前，我们先了解一下HTML表格的基本...
在JavaScript中，添加和删除表格是常见的操作，特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能，并提供一个简单的源码示例。首先，我们需要理解HTML表格的基本结构，然后利用...
### 动态插入、添加删除表格行的JS代码 在网页开发中，表格是一个非常重要的元素，用于展示数据。为了使网页更具交互性，我们常常需要动态地对表格进行操作，比如插入或删除行等。本文将通过一个具体的示例来讲解...
3. **删除行**：删除表格行通常涉及到选择要删除的行，并调用`removeChild()`方法。例如，假设我们想删除点击时的当前行，可以这样实现： ```javascript function deleteRow(event) { if (confirm('确定要删除...
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
以下是一个简单的示例代码，展示了动态添加和删除行的功能： ```html <!DOCTYPE html> <title>jQuery动态添加删除行 <script src="https://code.jquery.com/jquery-3.6.0.min.js"> 姓名 年龄 操作...
### 自动增加删除表格行代码（纯JS） 在网页开发中，动态地操作HTML元素是一项常见且实用的功能。本文将详细介绍如何使用纯JavaScript实现表格行的自动增加与删除功能，以及如何为表格中的特定单元格添加当前日期。...
在网页开发中，jQuery库因其简洁的语法和强大的功能，被广泛用于处理DOM操作，包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先，我们来理解HTML表格的基本结构。一个表格由`...
这个"vue.js动态表格增加删除修改代码.zip"文件显然包含了使用Vue.js实现动态表格功能的示例代码。动态表格是网页应用中常见的一种数据展示方式，它允许用户交互地添加、删除和修改数据。 首先，`index.html`文件是...
在Vue.js框架中，动态添加和删除表格数据是常见的需求，尤其在开发管理界面时。Vue的优势在于其响应式的数据绑定和组件化，使得这样的功能实现起来简洁高效。本项目提供了一个基于Bootstrap样式的vue动态添加删除...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
描述解释：该代码提供了 JavaScript 实现动态添加或删除表格行的功能，可以直接测试和应用。 标签解释：删除添加一行，指的是在网页中通过 JavaScript 动态添加或删除表格行的操作。 部分内容解释： 该代码主要...
在IT领域，尤其是在网页开发和用户界面设计中，动态添加删除表格是一项常用的技术。它允许用户根据需求在界面上自由地增加或减少表格行或列，提高了交互性和用户体验。本篇将深入探讨这一主题，主要关注如何实现这个...
总的来说，动态增加和删除表格行是Web开发中的常见需求，涉及JavaScript基础、DOM操作以及可能的前端框架知识。理解并掌握这些技术，对于提高用户体验和优化界面交互至关重要。通过实践和不断学习，开发者可以更好地...