Question

我真的需要你的帮助，如何在下面修改现有代码，以便在从选择框中选择另一个选项值时，应清除表格中的上一个<td>文本值。

以下是问题的图片：

以下是HTML标记和相关代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
* {
    font-family: Arial;
    font-size: 9pt;
}
</style>

<script type="text/javascript">

window.onload = function() {

$(document).on('click', '.ufield', function() {

  if($(this).find('select').length == 0) {
      $(this).append("<select><option value=''></option><option value='ADMIN'>ADMIN</option><option value='USER'>USER</option></select>");
  }
});


$(document).on('change', '.ufield select', function(){
    var myValue = $(this).val();
    var $parent = $(this).parent();

    $(this).remove();
    $parent.append(myValue);
});













}

</script>

</head>

<body>

<table style="width: 100%">
    <tr>
        <td>User ID:</td>
        <td>JSMITH</td>
        <td>Branch:</td>
        <td>TESTA</td>
    </tr>
    <tr>
        <td>Access:</td>
        <td class="ufield" id="access"></td>
        <td>Floor:</td>
        <td>12</td>
    </tr>
    <tr>
        <td>Account Status:</td>
        <td>active</td>
        <td>Office:</td>
        <td>D5656</td>
    </tr>
    <tr>
        <td>Last Login:</td>
        <td>30/08/2016 4:16 PM</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Firstname:</td>
        <td>John</td>
        <td>Address:</td>
        <td>175 Yahoo Lane</td>
    </tr>
    <tr>
        <td>Lastname:</td>
        <td>Smith</td>
        <td>Province:</td>
        <td>Ontario</td>
    </tr>
    <tr>
        <td>Telephone:</td>
        <td>123-456-7891</td>
        <td>City:</td>
        <td>Niagra Falls</td>
    </tr>
    <tr>
        <td>Fax:</td>
        <td>613-990-1301</td>
        <td>Country:</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>E-mail:</td>
        <td>john_smith@yahoo.ca</td>
        <td>Postal Code:</td>
        <td>90210</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>

Answer 1

$(this).remove();  ------>  $(this).closest("td").prev().empty();

Answer 2

这样做了，修改了以下部分：

$(document).on('click', '.ufield', function() {

    if ($(this).html()) {
        $(this).empty()
    }

    $(this).append("<select><option value=''></option><option value='ADMIN'>ADMIN</option><option value='USER'>USER</option></select>");

    //if($(this).find('select').length == 0) {}

});

在选择框中选择新选项值时清除/清空上一个TD值

2 个答案: