当前位置： 文江博客 话题详情

如何使用javascript在html中动态添加行

发布于 2024-09-16 17:25:05 字数 2939 浏览 3 评论 0 原文

我有一个任务，需要在 HTML 中动态添加一个表格行，其中每行有 2 个文本框，最后一个元素是一个超链接。但是，当我添加一行时，最后一个元素超链接应替换为 标记。如何做到这一点？我

可以添加一行，但无法将最后一个元素更改为 标记，这是我的代码：

HTML 文件

<html>
<head>
<title>Add row</title>
<script language=javascript type=text/javascript src="multiplerows.js"></script>
</head>
<body>
<table id="CPTbl">
<tr>
<td>
   <input type="text" name="cpName" value="">
</td>
<td>
   <input type="text" name="cpName1" value="">
</td>
<td>
          <a href="samle.htm" View Image</a>
</td>
</tr>
<tr>
 <td>
<input type="button" value="AddRow" name="AddRowData" onClick="add('CPTbl',1)">
<input type="button" value="Delete Row" name="DeleteAgencyCp" onClick="remove('CPTbl',1);">
 </td>
</tr>
</table>
</form></body></html>

我的脚本如下

function add(TableId,replicaterow){
    var oMyTable = document.getElementById(TableId);
    var oNewRow;

      if (oMyTable.rows[replicaterow].style.display=="none"){
      if(oMyTable.rows.length==(replicaterow+1)){
          oMyTable.rows[replicaterow].style.display="";
      }else{

        oNewRow = oMyTable.rows[replicaterow].cloneNode(true);
        oNewRow.style.display=""
        ReInitRow(oNewRow,oMyTable.rows.length);
        oMyTable.tBodies[0].appendChild(oNewRow);
      }
      }else{
    oNewRow = oMyTable.rows[replicaterow].cloneNode(true);
    ReInitRow(oNewRow,oMyTable.rows.length);
    oMyTable.tBodies[0].appendChild(oNewRow);
    }       
}

function ReInitRow(oNewRow,rowlength){
  var flg=true;
  if (! oNewRow){return;}
  for (var i = 0 ; i < oNewRow.childNodes.length ; i++){
    if((oNewRow.childNodes[i].tagName == "INPUT") ||
    (oNewRow.childNodes[i].tagName == "SELECT") ||
    (oNewRow.childNodes[i].tagName == "TEXTAREA") ||
    (oNewRow.childNodes[i].tagName == "textarea"))
    {
    oNewRow.childNodes[i].name = oNewRow.childNodes[i].name;
    if((oNewRow.childNodes[i].tagName == "INPUT") &&
        (oNewRow.childNodes[i].type == "text") ||
        (oNewRow.childNodes[i].tagName == "TEXTAREA"))
    {
        oNewRow.childNodes[i].value = "";
    }
    if(oNewRow.childNodes[i].tagName == "SELECT" && !oNewRow.childNodes[i].multiple ){
        oNewRow.childNodes[i].selectedIndex=0;
    }
    if(oNewRow.childNodes[i].id == "resetList")
    {
    oNewRow.childNodes[i].options.length=0;
    }
    if((oNewRow.childNodes[i].type=="hidden")){
        flg=false;
        oNewRow.childNodes[i].value="0";
    }
    }
    ReInitRow(oNewRow.childNodes[i],rowlength);
  }
}

如何替换第三个表数据 ()，其中 ;？

提前致谢。

原文

I have a task where I need to add a table row dynamically in HTML where each row has 2 textboxes and the last element is a hyperlink. However, when I add a row the last element hyperlink should be replace by an <input> tag. How this can be done? I

I'm able to add a row but I'm unable to change the last element to <input> tag, here is my code:

HTML file

<html>
<head>
<title>Add row</title>
<script language=javascript type=text/javascript src="multiplerows.js"></script>
</head>
<body>
<table id="CPTbl">
<tr>
<td>
   <input type="text" name="cpName" value="">
</td>
<td>
   <input type="text" name="cpName1" value="">
</td>
<td>
          <a href="samle.htm" View Image</a>
</td>
</tr>
<tr>
 <td>
<input type="button" value="AddRow" name="AddRowData" onClick="add('CPTbl',1)">
<input type="button" value="Delete Row" name="DeleteAgencyCp" onClick="remove('CPTbl',1);">
 </td>
</tr>
</table>
</form></body></html>

My script is as below

function add(TableId,replicaterow){
    var oMyTable = document.getElementById(TableId);
    var oNewRow;

      if (oMyTable.rows[replicaterow].style.display=="none"){
      if(oMyTable.rows.length==(replicaterow+1)){
          oMyTable.rows[replicaterow].style.display="";
      }else{

        oNewRow = oMyTable.rows[replicaterow].cloneNode(true);
        oNewRow.style.display=""
        ReInitRow(oNewRow,oMyTable.rows.length);
        oMyTable.tBodies[0].appendChild(oNewRow);
      }
      }else{
    oNewRow = oMyTable.rows[replicaterow].cloneNode(true);
    ReInitRow(oNewRow,oMyTable.rows.length);
    oMyTable.tBodies[0].appendChild(oNewRow);
    }       
}

function ReInitRow(oNewRow,rowlength){
  var flg=true;
  if (! oNewRow){return;}
  for (var i = 0 ; i < oNewRow.childNodes.length ; i++){
    if((oNewRow.childNodes[i].tagName == "INPUT") ||
    (oNewRow.childNodes[i].tagName == "SELECT") ||
    (oNewRow.childNodes[i].tagName == "TEXTAREA") ||
    (oNewRow.childNodes[i].tagName == "textarea"))
    {
    oNewRow.childNodes[i].name = oNewRow.childNodes[i].name;
    if((oNewRow.childNodes[i].tagName == "INPUT") &&
        (oNewRow.childNodes[i].type == "text") ||
        (oNewRow.childNodes[i].tagName == "TEXTAREA"))
    {
        oNewRow.childNodes[i].value = "";
    }
    if(oNewRow.childNodes[i].tagName == "SELECT" && !oNewRow.childNodes[i].multiple ){
        oNewRow.childNodes[i].selectedIndex=0;
    }
    if(oNewRow.childNodes[i].id == "resetList")
    {
    oNewRow.childNodes[i].options.length=0;
    }
    if((oNewRow.childNodes[i].type=="hidden")){
        flg=false;
        oNewRow.childNodes[i].value="0";
    }
    }
    ReInitRow(oNewRow.childNodes[i],rowlength);
  }
}

How can I replace the third table data (<a href="samle.htm" View Image</a>) with <input type="file" name="photo" value="">?

Thanks in advance.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

極樂鬼 2024-09-23 17:25:05

这是一种相当直接的方法，但是您没有任何有帮助的 id。

        ...
        if (!oNewRow) { return; }

        if (oNewRow.tagName == 'TD') {

            var anchors = oNewRow.getElementsByTagName('a');

            if (anchors.length > 0) {
                // found your hyperlink 
                oNewRow.removeChild(anchors[0]); // assuming there's only the one link

                var fi = document.createElement('input');
                fi.type = 'file';
                fi.name = 'photo';
                oNewRow.appendChild(fi);
            }
        }

        for (var i = 0; i < oNewRow.childNodes.length; i++) {
        ...

您的代码也设置为克隆按钮行。包含输入和超链接的行是第 0 行，而不是第 1 行，至少在 IE 中是这样。您可能会寻找一种更可靠的方法来获取代码中的行引用。

this is a rather blunt way to approach it, but you don't have id's for anything that would help.

        ...
        if (!oNewRow) { return; }

        if (oNewRow.tagName == 'TD') {

            var anchors = oNewRow.getElementsByTagName('a');

            if (anchors.length > 0) {
                // found your hyperlink 
                oNewRow.removeChild(anchors[0]); // assuming there's only the one link

                var fi = document.createElement('input');
                fi.type = 'file';
                fi.name = 'photo';
                oNewRow.appendChild(fi);
            }
        }

        for (var i = 0; i < oNewRow.childNodes.length; i++) {
        ...

also your code is set up to clone the button row. the row with the inputs and the hyperlink is row 0, not row 1, at least in IE. you might look for a more reliable way of obtaining row references in your code.

回复 原文
千仐 2024-09-23 17:25:05

@Apache - 输入您的原始 HTML 代码：

<a href="samle.htm" View Image</a>

应该是：

<a href="samle.htm">View Image</a>

@Apache - type in your original HTML code: 

<a href="samle.htm" View Image</a>

Should be:

<a href="samle.htm">View Image</a>
回复 原文
~没有更多了~

关于作者

凉薄对峙

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lioqio

文章 0 评论 0

Single

文章 0 评论 0

禾厶谷欠

文章 0 评论 0

alipaysp_2zg8elfGgC

文章 0 评论 0

qq_N6d4X7

文章 0 评论 0

放低过去

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文