个人中心
gpt4 book ai didi

javascript - 如何通过java脚本单击该行的更新超链接来更新该行？

转载 作者：行者123 更新时间：2023-12-03 08:12:13 24 4
gpt4 key购买 nike

enter image description here 

function myCreateFunction() {
    var sel = document.getElementById("osp");
    var text = document.getElementById("fill_form");

    var tsp = sel.options[sel.selectedIndex].value;


    var name = text.name.value;
    var age = text.age.value;

    if (document.getElementById("r1").checked) {
        var radio_selected = document.getElementById("r1").value;
    } else if (document.getElementById("r2").checked) {
        var radio_selected = document.getElementById("r2").value;
    }
    var table = document.getElementById("myTable");
    var row = table.insertRow(table.rows.length);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = name;
    cell2.innerHTML = radio_selected;
    cell3.innerHTML = age;
    cell4.innerHTML = tsp;
    var update = "Update";
    var remove = "Remove";

我想通过更新超链接更新该行，当用户单击更新时，该行的值必须传递给函数 myUpdateFunction()。

   var li='<a href="#" onclick="myUpdateFunction(name);"  > Update</a>';


 cell5.innerHTML = li;
}

    function myCreateFunction() {
        var sel = document.getElementById("osp");
        var text = document.getElementById("fill_form");

        var tsp = sel.options[sel.selectedIndex].value;


        var name = text.name.value;
        var age = text.age.value;

        if (document.getElementById("r1").checked) {
            var radio_selected = document.getElementById("r1").value;
        } else if (document.getElementById("r2").checked) {
            var radio_selected = document.getElementById("r2").value;
        }


        var table = document.getElementById("myTable");
        var row = table.insertRow(table.rows.length);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        cell1.innerHTML = name;
        cell2.innerHTML = radio_selected;
        cell3.innerHTML = age;
        cell4.innerHTML = tsp;
        var update = "Update";
        var remove = "Remove";
        var li = '<a href="#"   onclick="alert(document.write(rows.selected.text));"  > Update</a>';


        cell5.innerHTML = li;


    }

    function myDeleteFunction() {
        var table = document.getElementById("myTable");
        document.getElementById("myTable").deleteRow(table.rows.length - 1);
    }
    function myUpdateFunction(nam) {
        var oTable = document.getElementById('myTable');

        //gets rows of table
        var rowLength = oTable.rows.length;

        //loops through rows
        for (i = 0; i < rowLength; i++) {

            //gets cells of current row
            var oCells = oTable.rows.item(i).cells;

            //gets amount of cells of current row
            var cellLength = oCells.length;

            //loops through each cell in current row
            for (var j = 0; j < cellLength; j++) {

                // get your cell info here

                var cellVal = oCells.item(j).innerHTML;
                alert(cellVal);
            }
        }

    }
    function ResetForm() {
        document.getElementById("fill_form").reset();
    }
table {
    border: solid black 1px;
    /*width:40%;*/
}

td {
    border: solid black 1px;
    width: 120px;
}

#person_table {
    /*border: solid aqua 2px;*/
    width: 49%;
    float: left;
    background-color: #ffccfe;

}

#person_form {
    float: left;
    /*border: solid blue 2px;*/
    width: 24%;
    background-color: #cdff94;
}

label {

    width: 15%;
    display: inline-block;
    /*border: solid chartreuse 2px;*/
    padding: 10px;

}

.nam {

    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;

}

#nam2 {
    text-align: left;
    padding: 5px;
}

#person_form #nam2 input {
    width: 100px;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
   <script src="js6.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<div id="person_table">
    <h3>List Of Persons</h3>
    <table>
        <tr>
            <td>Name</td>
            <td>Gender</td>
            <td>Age</td>
            <td>City</td>
            <td>Action</td>

        </tr>
    </table>

    <table id="myTable">

    </table>
</div>

<div id="person_form">
    <h3>Add/Update Person Form</h3>

    <form id="fill_form">
        <div class="nam">
            <label> Name :</label>
            <input type="text" name="name">
        </div>

        <div class="nam">

            <label> Gender:</label>
            <input type="radio" name="gender" id="r1" value="male">Male
            <input type="radio" name="gender" id="r2" value="female">Female
        </div>

        <div class="nam">

            <label> Age :</label>
            <input type="text" name="age">
        </div>


        <div class="nam">

            <label> City:</label>
            <select name="cities_list" id="osp">
                <option value="lahore">Lahore</option>
                <option value="Islambad">Islambad</option>
                <option value="Karachi">Karachi</option>
                <option value="Okara">Okara</option>
            </select>
        </div>

        <input id="button" type="button" value=" Reset " onclick="ResetForm()">
        <input id="button" type="button" value=" Add " onclick="myCreateFunction()">
        <input id="button" type="button" value=" Update ">

    </form>

</div>

</body>
</html>

最佳答案

您需要创建 myUpdateFunction() 并向其传递一个变量，指示要更新哪个表行。我已经用完整的函数更新了答案，以在表中添加和修改用户。

HTML

<div id="person_table">
    <h3>List Of Persons</h3>
    <table id="myTable">
        <tr>
            <td>Name</td>
            <td>Gender</td>
            <td>Age</td>
            <td>City</td>
            <td>Action</td>
        </tr>
    </table>
</div>

<div id="person_form">
    <h3>Add/Update Person Form</h3>
    <form id="fill_form">
      <input type="hidden" name="rowIndex" id="rowIndex" value="1" />
        <div class="nam">
            <label> Name :</label>
            <input type="text" name="name" id="personName">
        </div>

        <div class="nam">

            <label> Gender:</label>
            <input type="radio" name="gender" id="r1" value="male">Male
            <input type="radio" name="gender" id="r2" value="female">Female
        </div>

        <div class="nam">

            <label> Age :</label>
            <input type="text" name="age" id="personAge">
        </div>


        <div class="nam">

            <label> City:</label>
            <select name="cities_list" id="osp">
                <option value="lahore">Lahore</option>
                <option value="Islambad">Islambad</option>
                <option value="Karachi">Karachi</option>
                <option value="Okara">Okara</option>
            </select>
        </div>

        <input id="personFormReset" type="button" value=" Reset " onclick="resetForm()">
        <input id="personFormModify" type="button" value=" Add " onclick="modifyTable()">

    </form>

</div>

Javascript

//modifyTable() is used to add and modify records in the table
function modifyTable() {

    //get name
    var personName = document.getElementById("personName").value;

    //get age
    var personAge = document.getElementById("personAge").value;

    //get city
    var osp = document.getElementById("osp");
    var personCity = osp.options[osp.selectedIndex].value;

    //get gender
    if (document.getElementById("r1").checked) {
        var personGender = document.getElementById("r1").value;
    } else if (document.getElementById("r2").checked) {
        var personGender = document.getElementById("r2").value;
    }

    //the table
    var table = document.getElementById("myTable");



    //get the value for the row we want to add or modify
    //rowIndex is used to keep track of where in the table we need to add or update
    var rowIndex = parseInt(document.getElementById("rowIndex").value);

    //if the rowIndex is not the same as the number of rows in the table, we are updating a record, and we need to remove the old data
    if(table.rows.length != rowIndex) {
        //updating a record
        table.deleteRow(rowIndex);  //remove the old table row
    } else {
        //adding a record
        //update the tableIndex
        document.getElementById("rowIndex").value = rowIndex+1;
    }

    //get the row we want to add/modify
    var row = table.insertRow(rowIndex);



    var cell1 = row.insertCell();
    var cell2 = row.insertCell();
    var cell3 = row.insertCell();
    var cell4 = row.insertCell();
    var cell5 = row.insertCell();
    cell1.innerHTML = personName;
    cell2.innerHTML = personGender;
    cell3.innerHTML = personAge;
    cell4.innerHTML = personCity;
    var update = "Update";
    var remove = "Remove";
    var action='<a href="#" onclick="myUpdateFunction('+(rowIndex)+');"  > Update</a>';
    cell5.innerHTML = action;

    //clear the form.  this function also resets the tableIndex which is critical if we just did a table modification, because the index will not be at the end of the table
    resetForm();
}





//
function myUpdateFunction(tableRow) {

  //get name
  document.getElementById("personName").value = myTable.rows[tableRow].cells[0].innerHTML;

  //get gender
  if(myTable.rows[tableRow].cells[1].innerHTML == "male") {
      document.getElementById("r1").checked = true;
  } else {
    document.getElementById("r2").checked = true;
  }

  //get age
  document.getElementById("personAge").value = myTable.rows[tableRow].cells[2].innerHTML;


  //get city
  for(var i = 0; i < document.getElementById("osp").length; i++) {
    if(document.getElementById("osp")[i].value == myTable.rows[tableRow].cells[3].innerHTML) {
      document.getElementById("osp").selectedIndex = i;
        break;
    }
  }

  //get the rowIndex
  //this makes sure we update the correct row when the user clicks 'update' and we call modifyTable();
  document.getElementById("rowIndex").value = tableRow;



  //update the button text
  document.getElementById("personFormModify").value = "Update";
}



function resetForm() {

  //reset name
  document.getElementById("personName").value = "";

  //reset gender
  document.getElementById("r1").checked = false;
  document.getElementById("r2").checked = false;

  //reset age
  document.getElementById("personAge").value = "";

  //reset city
  document.getElementById("osp").selectedIndex = 0;

  //reset button
  document.getElementById("personFormModify").value = "Add";

  //make sure the rowIndex is updated, so the table is ready to insert a new record at the right place
  document.getElementById("rowIndex").value = document.getElementById("myTable").rows.length;
}

您可以对 javascript 和 html 进行大量清理工作，以消除错误、删除无效代码，使其更干净、更易于阅读且更高效。这个例子只是为了向您展示这个概念是如何运作的。你可以看到它在这个 JS Fiddle 中工作:http://jsfiddle.net/5Lesopx1/1/

希望有帮助! :-)

关于javascript - 如何通过java脚本单击该行的更新超链接来更新该行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34093552/

24 4 0
文章推荐： 带有空格的Powershell打开文件路径
文章推荐： matlab - Simulink中此错误消息的含义是什么？
文章推荐： Wordpress wp_editor 简码问题
文章推荐： sqlalchemy - 为什么我在简单的地质炼金查询中收到 AttributeError InstanceState has no_post_inspect ？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com