Question

<table border="1px" id="myTable" cols="3">
<tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
    <tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
    <tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
    <tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
</table>

<script language="JavaScript">
    function function1(elem) {
        alert("Cell Index :"+ elem.rowIndex);

    }
</script>

我希望使用Javascript的特定tr索引的td值实际上我创建了一个在tr的末尾有一个编辑功能的表，当我点击编辑按钮时，在特定的tr转换为文本框并编辑桌子。

Answer 1

你可以尝试这样的方法来获取数组中的所有td（Example）：

<强> JS：

$(function(){
    $("#myTable tr td.edit").on('click', function(e){
        var tr = $(this).closest('tr');
        var tds = $(tr).find("td:not('.edit')").get();
        console.log(tds); // Array of all td in the clicked tr

        // Put each td's text in a text box
        console.log($(tds[0]).text()); // First td text
        console.log($(tds[1]).text()); // Second td text
        console.log($(tds[2]).text()); // Third td text
    });
});

<强> HTML：

<table border="1px" id="myTable">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td class='edit'>Edit</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td class='edit'>Edit</td>
    </tr>
</table>

同样id必须是唯一的，如果class中有需要，请使用td。您在同一页面中多次使用id="td1"和其他类似的id。

Answer 2

<强> Working Fiddle even id's are changed
的Javascript

function function1(elem) {
    if (elem.getAttribute("isEditing") == null) {
        elem.setAttribute("isEditing","true");
        for (i = 0; i < elem.children.length; i++) {
            //Create an input type dynamically.
            var element = document.createElement("input");

            //Assign different attributes to the element.
            element.setAttribute("type", "text");
            element.setAttribute("value", elem.children[i].innerHTML);
            element.setAttribute("id", "inp-" + elem.children[i].getAttribute("id"));
            elem.children[i].innerHTML = "";
            elem.children[i].appendChild(element);
        }
    }
}

Answer 3

由于您已经使用jQuery标记发布了此内容，虽然你的问题不是100％清楚，但你想要做下面的代码，并且正如jsfiddle所证明的那样应该足以让你前进。假设您想要在有人点击该行时向单元格添加文本区域。

DEMO：http://jsfiddle.net/7x36X/

HTML：

<table border="1px" id="myTable" cols="3">
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
</table>

JAVASCRIPT / jQuery的：

$(document).ready(function () {
    //Listen to a click on a tr
    $('tr').on('click', function (event) {
        //check that we are clicking in a new row else do nothing
        if ($('.someInput', $(this)).length == 0) {
            // get the last td as our target for example
            var targetTD = $('td:last', $(this));
            //get previous content of the TD
            var previousContent = targetTD.text();
            // Now add in a textarea with a save button
            targetTD.html('<textarea class="someInput">' + previousContent + '</textarea><button class="saveButton">Save</button>');
            // Do whatever else you need to do here to make your changes persistent e.g. AJAX to server
        }
    });

    // We are adding what is called a delegated event listener for the save buttons which haven't been created yet.
    $('#myTable').on('click', '.saveButton', function (event) {
        // get the target TD
        var targetTD = $(this).parent();
        // get Textarea text
        var text = $(this).siblings('.someInput').val();
        // Set the targetTD html as the text
        targetTD.html(text);
    });
});

我希望使用Javascript从特定的tr索引获取td值

3 个答案: